Customize the appearance of OnchainKit’s components
OnchainKit provides flexible appearance control through two main features: mode
and theme
.
You can choose from built-in themes or dynamically switch modes based on user preference or system settings, allowing for a customized and responsive user interface.
OnchainKit offers multiple themes to quickly style your components. Set the theme via the OnchainKitProvider
using config.appearance.theme
:
default
: Includes both light and dark modes.base
: Single mode only.cyberpunk
: Single mode only.hacker
: Single mode only.custom
: Single mode only.If no theme is selected, the default
theme is applied automatically.
Control the color scheme by setting the config.appearance.mode
property of the OnchainKitProvider
:
auto
: Automatically switches between light and dark mode based on the user’s OS preference.light
: Forces all components to use the light version of the theme.dark
: Forces all components to use the dark version of the theme.If no mode is specified, auto
mode will be applied by default.
Fine-tune specific aspects of an existing theme. This is useful when you want to make adjustments to the appearance of the components without creating an entirely new theme.
Define an entirely new look and feel for your application. This gives you complete control over all aspects of the design, including colors, fonts, and other visual properties.
Use CSS variables to define your custom theme.
The class name definitions must include the -light
or -dark
suffix.
Customize the appearance of OnchainKit’s components
OnchainKit provides flexible appearance control through two main features: mode
and theme
.
You can choose from built-in themes or dynamically switch modes based on user preference or system settings, allowing for a customized and responsive user interface.
OnchainKit offers multiple themes to quickly style your components. Set the theme via the OnchainKitProvider
using config.appearance.theme
:
default
: Includes both light and dark modes.base
: Single mode only.cyberpunk
: Single mode only.hacker
: Single mode only.custom
: Single mode only.If no theme is selected, the default
theme is applied automatically.
Control the color scheme by setting the config.appearance.mode
property of the OnchainKitProvider
:
auto
: Automatically switches between light and dark mode based on the user’s OS preference.light
: Forces all components to use the light version of the theme.dark
: Forces all components to use the dark version of the theme.If no mode is specified, auto
mode will be applied by default.
Fine-tune specific aspects of an existing theme. This is useful when you want to make adjustments to the appearance of the components without creating an entirely new theme.
Define an entirely new look and feel for your application. This gives you complete control over all aspects of the design, including colors, fonts, and other visual properties.
Use CSS variables to define your custom theme.
The class name definitions must include the -light
or -dark
suffix.