Giao diện Tùy chỉnh
Giao diện Tùy chỉnh
Tạo giao diện tùy chỉnh
Lưu ý: API này chưa ổn định và có khả năng sẽ thay đổi trong tương lai gần. Chúng tôi khuyên bạn nên sử dụng giao diện tích hợp cho bây giờ.
Mặc dù các giao diện tích hợp cung cấp một số mức độ tùy chỉnh, loại Theme được cung cấp để giúp bạn xác định giao diện tùy chỉnh của riêng mình với quyền truy cập cấp thấp hơn vào các biến giao diện cơ bản.
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';
const myCustomTheme: Theme = {
blurs: {
modalOverlay: '...',
},
colors: {
accentColor: '...',
accentColorForeground: '...',
actionButtonBorder: '...',
actionButtonBorderMobile: '...',
actionButtonSecondaryBackground: '...',
closeButton: '...',
closeButtonBackground: '...',
connectButtonBackground: '...',
connectButtonBackgroundError: '...',
connectButtonInnerBackground: '...',
connectButtonText: '...',
connectButtonTextError: '...',
connectionIndicator: '...',
downloadBottomCardBackground: '...',
downloadTopCardBackground: '...',
error: '...',
generalBorder: '...',
generalBorderDim: '...',
menuItemBackground: '...',
modalBackdrop: '...',
modalBackground: '...',
modalBorder: '...',
modalText: '...',
modalTextDim: '...',
modalTextSecondary: '...',
profileAction: '...',
profileActionHover: '...',
profileForeground: '...',
selectedOptionBorder: '...',
standby: '...',
},
fonts: {
body: '...',
},
radii: {
actionButton: '...',
connectButton: '...',
menuButton: '...',
modal: '...',
modalMobile: '...',
},
shadows: {
connectButton: '...',
dialog: '...',
profileDetailsAction: '...',
selectedOption: '...',
selectedWallet: '...',
walletLogo: '...',
},
};
const App = () => (
<RainbowKitProvider theme={myCustomTheme} {...etc}>
{}
</RainbowKitProvider>;
)
Bạn có thể mở rộng một giao diện tích hợp mà không cần định nghĩa lại toàn bộ giao diện. Điều này hữu ích khi bạn chỉ muốn ghi đè các token giao diện cụ thể.
Để làm điều đó, hãy cài đặt lodash.merge (hoặc tương đương):
Nhập nó, cùng với giao diện bạn muốn mở rộng (ví dụ: darkTheme) và loại Theme của TypeScript:
import merge from 'lodash.merge';
import {
RainbowKitProvider,
darkTheme,
Theme,
} from '@rainbow-me/rainbowkit';
Sau đó, kết hợp giao diện tích hợp, với các token giao diện bạn muốn ghi đè. Trong ví dụ này, tôi đang ghi đè token accentColor để hợp với màu sắc chính của thương hiệu của tôi.
const myTheme = merge(darkTheme(), {
colors: {
accentColor: '#07296d',
},
} as Theme);
Cuối cùng, bạn có thể truyền giao diện tùy chỉnh của mình tới prop theme của RainbowKitProvider.
const App = () => {
return (
<RainbowKitProvider theme={myTheme} {...etc}>
{}
</RainbowKitProvider>
);
};
Nếu ứng dụng của bạn được render trên máy chủ/tĩnh và cho phép người dùng chuyển đổi giữa các giao diện bằng tay, hệ thống theming của RainbowKit có thể kết nối với các bộ chọn CSS tùy chỉnh với các chức năng sau đây có thể được sử dụng với bất kỳ hệ thống CSS-in-JS nào:
cssStringFromTheme
cssObjectFromTheme
Các chức năng này trả lại CSS thiết lập tất cả biến giao diện cần thiết. Bởi vì cả chuỗi và đối tượng đều được hỗ trợ, điều này có thể tích hợp với bất kỳ hệ thống CSS-in-JS nào.
Như một ví dụ cơ bản, bạn có thể render phần tử style của riêng bạn với các bộ chọn tùy chỉnh cho mỗi giao diện. Vì chúng tôi đang kiểm soát việc render CSS của giao diện, chúng tôi đang truyền null cho prop theme để RainbowKitProvider không render bất kỳ kiểu dáng nào cho chúng tôi. Cũng lưu ý việc sử dụng tùy chọn extends trên hàm cssStringFromTheme, nó loại bỏ bất kỳ biến giao diện nào giống như giao diện gốc.
import {
RainbowKitProvider,
cssStringFromTheme,
lightTheme,
darkTheme,
} from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={null} {...etc}>
<style
dangerouslySetInnerHTML={{
__html: `
:root {
${cssStringFromTheme(lightTheme)}
}
html[data-dark] {
${cssStringFromTheme(darkTheme, {
extends: lightTheme,
})}
}
`,
}}
/>
{}
</RainbowKitProvider>
);
};
