Tema Khusus
Tema Khusus
Membuat tema khusus
Catatan: API ini tidak stabil dan kemungkinan akan berubah
di masa mendatang. Kami menyarankan untuk tetap menggunakan tema bawaan untuk
sementara.
Meskipun tema bawaan menyediakan beberapa tingkat kustomisasi, tipe Theme disediakan untuk membantu Anda mendefinisikan tema kustom Anda sendiri dengan akses tingkat rendah ke variabel tema dasar.
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 dapat memperluas tema bawaan tanpa harus mendefinisikan ulang keseluruhan tema. Ini berguna ketika Anda hanya ingin mengganti token tema tertentu.
Untuk melakukannya, instal lodash.merge (atau setara):
Impor ini, bersama dengan tema yang ingin Anda perpanjang (misalnya: darkTheme) dan tipe TypeScript Theme:
import merge from 'lodash.merge';
import {
RainbowKitProvider,
darkTheme,
Theme,
} from '@rainbow-me/rainbowkit';
Kemudian, gabungkan tema bawaan, dengan token tema yang ingin Anda ganti. Dalam contoh ini, saya mengganti token accentColor untuk mencocokkan warna aksen merek saya.
const myTheme = merge(darkTheme(), {
colors: {
accentColor: '#07296d',
},
} as Theme);
Akhirnya, Anda sekarang dapat memberikan tema kustom Anda ke properti theme di RainbowKitProvider.
const App = () => {
return (
<RainbowKitProvider theme={myTheme} {...etc}>
{}
</RainbowKitProvider>
);
};
Jika aplikasi Anda dirender oleh server/statis dan memungkinkan pengguna untuk beralih manual antara tema, sistem tematikan RainbowKit dapat dihubungkan ke selektor CSS kustom dengan fungsi berikut yang dapat digunakan dengan sistem CSS-in-JS apa pun:
cssStringFromTheme
cssObjectFromTheme
Fungsi ini mengembalikan CSS yang mengatur semua variabel tema yang diperlukan. Karena string dan objek didukung, ini dapat diintegrasikan dengan sistem CSS-in-JS apa pun.
Sebagai contoh dasar, Anda dapat merender elemen style Anda sendiri dengan selektor kustom untuk setiap tema. Karena kita mengambil kontrol atas perenderan CSS tema, kita meneruskan null ke properti theme sehingga RainbowKitProvider tidak merender gaya apa pun untuk kita. Juga perhatikan penggunaan opsi extends pada fungsi cssStringFromTheme yang menghilangkan variabel tema yang sama dengan tema dasar.
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>
);
};
