[unocss support] How to configure dark mode with unocss? #1855

spokospace · 2024-05-12T01:29:11Z

spokospace
May 12, 2024

Hello, is it possible to add the 'dark' class to the body?
It is required to display the styles correctly on unocss.

May 15, 2024

Starlight uses a data-theme attribute on the <html> element to indicate the current theme, i.e.

<html data-theme="dark">
<!-- or -->
<html data-theme="light">

I’ve never used UnoCSS, but based on their dark configuration reference, I think you should be able to configure it to use Starlight’s existing selectors:

presetMini({
  dark: {
    dark: '[data-theme="dark"]',
    light: '[data-theme="light"]',
  },
})

View full answer

delucis · 2024-05-15T15:34:48Z

delucis
May 15, 2024
Maintainer

Starlight uses a data-theme attribute on the <html> element to indicate the current theme, i.e.

<html data-theme="dark">
<!-- or -->
<html data-theme="light">

I’ve never used UnoCSS, but based on their dark configuration reference, I think you should be able to configure it to use Starlight’s existing selectors:

presetMini({
  dark: {
    dark: '[data-theme="dark"]',
    light: '[data-theme="light"]',
  },
})

0 replies

spokospace · 2024-05-16T13:49:34Z

spokospace
May 16, 2024
Author

I noticed issues with code like class="dark:invert", unocss is based on Tailwind, but with more useful features like grouping etc. That's pity there is no option to configure starlight or modify html.

I wanted to try with creating documentation in astro, but for me as a front-end developer VitePress is more friendly and has the necessary functionality right away:

edit:

okay, I managed to fix the selector, I guess the order of the presets is important, my current code:

// uno.config.ts
import {
  defineConfig,
  transformerVariantGroup,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
} from 'unocss'

...
export default defineConfig({

transformers: [
  transformerDirectives(),
  transformerVariantGroup(),
],

theme: {
	...
}

presets: [
 presetUno(
      {
        dark: { 
          dark: '[data-theme="dark"]',
        }
      }
    ),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
      prefix: 'i-',
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    presetTypography(),
	...
]

})

so the fix is here: presetUno( { dark: { dark: '[data-theme="dark"]' } } )

1 reply

delucis May 16, 2024
Maintainer

Thanks for sharing!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[unocss support] How to configure dark mode with unocss? #1855

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

[unocss support] How to configure dark mode with unocss? #1855

spokospace May 12, 2024

Replies: 2 comments · 1 reply

delucis May 15, 2024 Maintainer

spokospace May 16, 2024 Author

delucis May 16, 2024 Maintainer

spokospace
May 12, 2024

Replies: 2 comments 1 reply

delucis
May 15, 2024
Maintainer

spokospace
May 16, 2024
Author

delucis May 16, 2024
Maintainer