Support 'system' theme #6418

jim-king-2000 · 2026-04-09T15:48:45Z

jim-king-2000
Apr 9, 2026

If we wanna set light/dark mode, we can do:

<!-- Light theme -->
<html class="light" data-theme="light">
<!-- Dark theme -->
<html class="dark" data-theme="dark">

If we wanna set the theme to 'system', what should we do?

wingkwong · 2026-04-09T16:27:52Z

wingkwong
Apr 9, 2026
Maintainer

"system" isn't its own theme, it just means delegate the choice to the OS. You detect the user's OS-level preference via prefers-color-scheme then apply light or dark.

0 replies

jim-king-2000 · 2026-04-10T02:01:09Z

jim-king-2000
Apr 10, 2026
Author

I'd like to come up with the pseudo code for the 'system' theme.

export default function RootLayout({ children }) {
  const theme = getPrefersColorScheme()
  return (
    <html lang='en' className={theme} data-theme={theme}>
      <body>{children}</body>
    </html>
  )
}

Could you please help me to implement the magic function getPrefersColorScheme() which could detect prefers-color-scheme on both the client and the server side?

0 replies

jim-king-2000 · 2026-04-10T14:06:52Z

jim-king-2000
Apr 10, 2026
Author

I suggest that heroui supports 'system' value in class and data-theme. Then the user's code could be very straightforward.

export default function RootLayout({ children }) {
  return (
    <html lang='en' className='system' data-theme='system'>
      <body>{children}</body>
    </html>
  )
}

And internally, heroui could use the css magic for the 'system' theme:

@media (prefers-color-scheme: dark) {
// do some magic here
}

And then it would be very easy to implement theme switcher which just uses cookie.

0 replies

jim-king-2000 · 2026-04-13T07:13:23Z

jim-king-2000
Apr 13, 2026
Author

It is very hard to implement 'system' theme value outside. Here is the answer from claude:

Good thinking! You can avoid duplication by making the media query simply apply the .dark selector's styles by reusing the same variable declarations — but CSS alone can't alias a selector. However, you can restructure where the dark variables are defined so both .dark and the media query point to the same source:

The trick is to define dark variables in a shared block that both selectors reference:
/* Define dark variables once */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]):not(.dark):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}

.dark,
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --background: oklch(12% 0.005 285.823);
    --foreground: oklch(0.9911 0 0);
    /* ...all dark variables only written once */
  }
}
But unfortunately you can't mix @media into a selector list like that in CSS.

The real clean solution is a CSS nesting approach:
.dark,
[data-theme="dark"] {
  --background: oklch(12% 0.005 285.823);
  --foreground: oklch(0.9911 0 0);
  /* all dark variables once */
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]):not(.dark):not([data-theme="dark"]) {
    /* Just inherit from .dark by reusing the same custom properties via a layer or @apply */
  }
}
This still doesn't avoid duplication in pure CSS. The honest answer is that pure CSS has no way to "call" another selector's rules. Your real options are:

JS approach — the cleanest, no duplication (as shown in my previous answer)

SCSS/PostCSS — define a mixin and @include it in both places

Accept the duplication — but put dark vars in a @layer so it's at least organized

In practice, option 1 (JS) is what every major library (next-themes, Radix, MUI) uses for exactly this reason — pure CSS simply can't deduplicate selector-based theming elegantly.

Suggest heroui provide 'system' theme value.

1 reply

wingkwong Apr 13, 2026
Maintainer

If you are using nextjs, you can simply use next-themes. We also have an example in documentation here.

jim-king-2000 · 2026-04-13T10:10:04Z

jim-king-2000
Apr 13, 2026
Author

It does not support server side. And it uses tricky javascript to workaround SSR problem. And it does not support other theme systems https://semi.design/en-US/advanced/dark-mode#How%20to%20switch. With the support of 'system' value by heroui, I could use dozens of lines to replace next-theme.

0 replies

jim-king-2000 · 2026-04-15T11:16:07Z

jim-king-2000
Apr 15, 2026
Author

It seems that supporting 'system' value only needs this code snippet:

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]):not(.dark):not([data-theme="dark"]) {
    /* Just inherit from .dark by reusing the same custom properties via a layer or @apply */
  }
}

0 replies

wingkwong · 2026-04-15T15:43:04Z

wingkwong
Apr 15, 2026
Maintainer

FYI. We will introduce use-theme hook like v2. See PR: #6426.

1 reply

jim-king-2000 Apr 16, 2026
Author

Fantastic! Look forward to it.

Uh oh!

Support 'system' theme #6418

Uh oh!

jim-king-2000 Apr 9, 2026

Replies: 7 comments · 2 replies

Uh oh!

wingkwong Apr 9, 2026 Maintainer

Uh oh!

jim-king-2000 Apr 10, 2026 Author

Uh oh!

Uh oh!

jim-king-2000 Apr 10, 2026 Author

Uh oh!

jim-king-2000 Apr 13, 2026 Author

Uh oh!

wingkwong Apr 13, 2026 Maintainer

Uh oh!

jim-king-2000 Apr 13, 2026 Author

Uh oh!

jim-king-2000 Apr 15, 2026 Author

Uh oh!

wingkwong Apr 15, 2026 Maintainer

Uh oh!

jim-king-2000 Apr 16, 2026 Author

jim-king-2000
Apr 9, 2026

Replies: 7 comments 2 replies

wingkwong
Apr 9, 2026
Maintainer

jim-king-2000
Apr 10, 2026
Author

jim-king-2000
Apr 10, 2026
Author

jim-king-2000
Apr 13, 2026
Author

wingkwong Apr 13, 2026
Maintainer

jim-king-2000
Apr 13, 2026
Author

jim-king-2000
Apr 15, 2026
Author

wingkwong
Apr 15, 2026
Maintainer

jim-king-2000 Apr 16, 2026
Author