Using appearance to manage and integrate dark mode.
Light and dark modes are supported out of the box, allowing you to easily switch appearance without additional design or styling.
A dark and introspective album that showcases a distinctive blend of genres.
A dark and introspective album that showcases a distinctive blend of genres.
By default, the root Theme
appearance is light
. To set a different appearance pass it via the appearance
prop. This will force the theme to use the specified setting.
A common requirement is to inherit the appearance setting from a user’s system preferences.
This is a deceptively complex problem to solve given SSR, SSG and client side hydration considerations. To make implementation easier, we recommend integrating with a theme switching library.
Integration with next-themes
is simple and straightforward because Radix Themes implements matching class names.
To enable dark mode, use <ThemeProvider>
from next-themes
with attribute="class"
.
Do not try to set <Theme appearance={resolvedTheme}>
. Instead, rely just on class switching that next-themes
provides. This way next-themes
can prevent the appearance flash during initial render.
Any library that supports class switching is compatible. You’ll just need to ensure that the appended class names match those supported by Radix Themes:
className="light"
className="light-theme"
className="dark"
className="dark-theme"