Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Guides

Dark mode

Using appearance to manage and integrate dark mode.

Overview

Light and dark modes are supported out of the box, allowing you to easily switch appearance without any additional design or styling.

King Krule – The OOZ

A dark and introspective album that showcases a distinctive blend of genres.

King Krule – The OOZ

A dark and introspective album that showcases a distinctive blend of genres.

Basic usage

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.

<Theme appearance="dark">

  <MyApp />

</Theme>

Automatic background color

Radix Themes will automatically set the background color of your app to match appearance, this is achieved by injecting a background-color style on the body element.

As the style injection can only occur on the client, you may experience a hydration warning. In this case it's safe to suppress the warning.

// app/layout.jsx

export default function Layout({ children }) {

  return (

    <html suppressHydrationWarning>

      <head />

      <body>{children}</body>

    </html>

  );

}

Inheriting from system preferences

A common requirement is to inherit the appearance setting from a users 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.

With next-themes

Radix Themes already implements matching class names which makes integration with next-themes simple and straight-forward.

All that is needed is to ensure that attribute is set to use the class switching method.

import { Theme } from '@radix-ui/themes';

import { ThemeProvider } from 'next-themes';



export default function () {

  return (

    <ThemeProvider attribute="class">

      <Theme>

        <MyApp />

      </Theme>

    </ThemeProvider>

  );

}

It's important not to pass resolvedTheme toappearance, instead relying entirely on class switching. This is important as next-themes will automatically prevent any unsightly flashing during initial render.

With other libraries

Any library that supports class switching is compatible, you'll just need to ensure that the appended class names match those used by Radix Themes:

  • light
  • dark

or

  • light-theme
  • dark-theme
PreviousColor
NextVisual style
Edit this page on GitHub.