Tema Tersuai
Tema Tersuai
Mencipta tema tersuai
Nota: API ini tidak stabil dan mungkin akan berubah
di masa depan. Kami mencadangkan agar anda berpegang pada tema terpasang buat sementara ini.
Sementara tema terpasang menawarkan beberapa tahap penyesuaian, jenis Theme disediakan untuk membantu anda mendefinisikan tema tersuai anda sendiri dengan akses rendah ke pembolehubah tema asas.
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>;
)
Anda boleh memanjangkan tema terpasang tanpa perlu mentakrifkan semula seluruh tema. Ini berguna apabila anda hanya ingin menimpa token tema tertentu.
Untuk melakukannya, pasang lodash.merge (atau setara):
Importkannya, bersama dengan tema yang anda ingin panjangkan (contohnya: darkTheme) dan jenis Theme TypeScript:
import merge from 'lodash.merge';
import {
RainbowKitProvider,
darkTheme,
Theme,
} from '@rainbow-me/rainbowkit';
Kemudian, gabungkan tema terpasang dengan token tema yang anda ingin timpa. Dalam contoh ini, saya menimpa token accentColor untuk sepadan dengan warna aksen jenama saya.
const myTheme = merge(darkTheme(), {
colors: {
accentColor: '#07296d',
},
} as Theme);
Akhir sekali, anda kini boleh menyerahkan tema tersuai anda kepada prop theme untuk RainbowKitProvider.
const App = () => {
return (
<RainbowKitProvider theme={myTheme} {...etc}>
{}
</RainbowKitProvider>
);
};
Jika aplikasi anda dirender di pelayan/statik dan membolehkan pengguna untuk menukar antara tema secara manual, sistem tema RainbowKit boleh disambungkan ke pemilih CSS tersuai dengan fungsi berikut yang boleh digunakan dengan mana-mana sistem CSS-in-JS:
cssStringFromTheme
cssObjectFromTheme
Fungsi-fungsi ini mengembalikan CSS yang menetapkan semua pembolehubah tema yang diperlukan. Oleh kerana kedua-dua string dan objek disokong, ini boleh diintegrasikan dengan mana-mana sistem CSS-in-JS.
Sebagai contoh asas, anda boleh memaparkan elemen style anda sendiri dengan pemilih khusus untuk setiap tema. Oleh kerana kita mengawal rendering CSS tema, kita melepasi null kepada prop theme supaya RainbowKitProvider tidak memaparkan sebarang gaya untuk kita. Juga perhatikan penggunaan pilihan extends dalam fungsi cssStringFromTheme yang menghapuskan mana-mana pembolehubah tema yang sama dengan tema asas.
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>
);
};
