Dark mode not working because of `@layer base`, demo repo provided

[Zwyx]

Hi and congrats for making these beautiful components!

I notice that dark mode isn't working on a fresh install:

• ran npx create-next-app@latest, didn't choose to use the app directory
• ran npx shadcn-ui init
• ran npm i next-themes
• added <ThemeProvider attribute="class"> in _app.tsx

The result: we notice that the dark class is present (thanks to prefers-color-scheme: dark), but it's the variables from :root that are applied, not the ones from .dark:

Demo repository: https://github.com/Zwyx/shadcn-ui-dark-mode-demo deployed at https://zwyx.github.io/shadcn-ui-dark-mode-demo/

Notes:

• Removing @layer base from globals.css fixes this.
• This issue is very similar to https://github.com/shadcn/ui/issues/278 although I'm not using the app directory, and I'm not able to fix it...

[luanfvieira]

Update your globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer utilities {
  .step {
    counter-increment: step;
  }

  .step:before {
    @apply absolute w-8 h-8 bg-muted rounded-full font-medium text-center text-base inline-flex items-center justify-center -indent-px;
    @apply ml-[-41px];
    content: counter(step);
  }
}

@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}

[Zwyx]

Thanks for trying to help Luan, but globals.css is already like this. Please have a look in the demo repo: https://github.com/Zwyx/shadcn-ui-dark-mode-demo/blob/main/styles/globals.css

The demo repo is deployed here, where the bug can be observed: https://zwyx.github.io/shadcn-ui-dark-mode-demo/

[luanfvieira]

See the diff

https://www.diffchecker.com/rMmjsfQG/

[Zwyx]

Would you be able to check out this repo: https://github.com/Zwyx/shadcn-ui-dark-mode-demo

Then replace the content of globals.css by yours, start the app, open it in an incognito window (to make sure there is not "theme" value in local storage), open the dev tools and turn on prefers-color-scheme: dark like it is shown on the screenshot above.

I did exactly that, and the dark theme still not apply. Even with the content of your file.

[hgaron-blockbar]

@Zwyx can you please check your tailwind.config.js file? I had to update mine because I'm using a src directory - so had to account for that.

example: content: ["src/app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],

By default, there's no src prefix there (I realize you aren't using app dir, but maybe the path in the content directory needs to be corrected?

[Zwyx]

The tailwind.config.js file, present here https://github.com/Zwyx/shadcn-ui-dark-mode-demo/blob/main/tailwind.config.js seems correctly configured.

[hgaron-blockbar]

@Zwyx I haven't yet gotten to the root of the issue, but it does seem to be some sort of config issue. Updating this as the content array restores the styles as expected:

content: ["**/*.{ts,tsx}"]

You can also update your original content array to include the styles folder, which also works:

content: [
		"./pages/**/*.{ts,tsx}",
		"./pages/*.{ts,tsx}",
		"./components/**/*.{ts,tsx}",
		"./styles/**/*.css",
	],

But that is not recommended per the tailwind docs. 🤔

Seems in this repro it only works when that css file is included.

[Zwyx]

@hgaron-blockbar thanks for trying to fix this! I confirm that changing content to ["**/*.{ts,tsx}"], or include "./styles/**/*.css" in it, solves the issue. Good find!

[aaronlin0122]

I got the same problem

[shadcn]

@Zwyx Is this still not working? How can I help?

[bidodev]

Got the same problem, following the previous suggestions and replacing the content in the the tailwind config to the following content to ["**/*.{ts,tsx}"] solves the issue.

[Zwyx]

Hi @shadcn, thanks for your message. Yes, this is still an issue (I've just retried from scratch by redoing the steps described in the first post; same result).

I'm not familiar with the @layer CSS tag, and I've noticed that if I remove it from globals.css, all works correctly.

I don't know if you can help and I definitely don't want to waste your time, but I'd be interesting to know why you use @layer? And if you can think of any issue that could appear by removing @layer like I did.

The user hgaron-blockbar, above, noticed that we can also make it work by tweaking Tailwind's config.

These two ways of solving the issue are workarounds, but don't really identify the root of the problem.

[ndinata]

I had the same problem until I found out I had to add themeColor to my root layout metadata, following the template repo here. No other special changes to tailwind.config.js nor globals.css.

@Zwyx I notice you're not using the app dir in your demo repo, but since themeColor gets converted into <meta name="theme-color" /> tags (according to Nextjs docs), maybe you could try copy-pasting the appropriate tags into your project and see if dark mode works afterwards?

[Zwyx]

Hi Nico and thanks for your message. Good find! That indeed fixed it. I simply added the following in _documents.tsx:

	<Head>
		<meta
			name="theme-color"
			media="(prefers-color-scheme: light)"
			content="white"
		/>
		<meta
			name="theme-color"
			media="(prefers-color-scheme: dark)"
			content="black"
		/>
	</Head>

I don't see the relation between @layer base and theme-color though. It could be interesting to dig, but I'm not keen to dive in a deep rabbit hole.

I also noticed something else: this problem was happening in Chrome, but not in Firefox.

I guess with this third workaround, we could close the issue if you'd like, Shadcn?

[chen-rn]

@ndinata worked for me too!

@shadcn We should either add this to the docs or somehow fix it!

[Zwyx]

Made a PR for this: https://github.com/shadcn/ui/pull/938

[CibiAananth]

Adding this in app/layout.tsx worked for me

import { Metadata } from 'next';

export const metadata: Metadata = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'white' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
};

[Zwyx]

Hi Cibi, thanks for your contribution. ~However it looks like I won't be able to help on this issue anymore: I can't reproduce it. It's probably since a Chrome update.~

My bad. I still have the issue. It requires a full restart of the dev server to see it again, so I missed it before. Glad I double checked.

Discussion continued at https://github.com/shadcn-ui/ui/pull/938

[marcklingen]

Had the same issue, fixed it with :root[class~="dark"] instead of .dark in style.css

style.css for reference: https://github.com/langfuse/langfuse-docs/blob/e9ba748e0e53e5d9179ffc0040839108d1930621/style.css#L39

[cleytoncarvalho]

Had the same issue, fixed it with :root[class~="dark"] instead of .dark in style.css

style.css for reference: https://github.com/langfuse/langfuse-docs/blob/e9ba748e0e53e5d9179ffc0040839108d1930621/style.css#L39

Thank you! Worked just fine. I was searching for a solution for hours.

[benyamynbrkyc]

Had the same issue, fixed it with :root[class~="dark"] instead of .dark in style.css

style.css for reference: https://github.com/langfuse/langfuse-docs/blob/e9ba748e0e53e5d9179ffc0040839108d1930621/style.css#L39

Thank you, this worked for me as well. I just set the styles up with both targets, class and root:

  .dark,
  :root[class~="dark"] {
    ...
  }

[toitzi]

Can confirm @marcklingen solution worked for me as well, imho a good solution since you dont need to modify your tailwind config or meta data tags.

[alabenyahia]

For me, on a Vite/React app, the problem was forgetting to import the global.css file into my App.tsx.

[mortenjust]

I seem to have fixed this by adding “dark” to the tailwind safe list

[xieyezi]

I've also encountered the same issue. Here's my setup:

"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"lucide-vue-next": "^0.292.0",
"tailwind-merge": "^2.0.0",
"tailwindcss-animate": "^1.0.7",

and my components.json :

{
  "style": "default",
  "typescript": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "assets/css/tailwind.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "framework": "nuxt",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

When I add class="dark" to the HTML tag, my div is set as follows:

  <div class="bg-background text-foregroundl">
   ...
  </div>

However, this doesn't have any effect, and the page still appears in light mode.

[dong20191111]

这个问题确实困扰了我好几个小时，直到我仔细的一遍一遍看shadcn的文档才解决，我是用shadcn+tailwindcss，因为shadcn的代码可以直接生成，所以用shadcn的provider方式处理。但是怎么也不好用。这个问题应该与我的是一个问题。

• 按照https://ui.shadcn.com/docs/dark-mode/vite先增加provider

• 页面点击切换主题，会发现，其中class="dark"是可以变化为light的，说明provider是可用的

• 我们通过https://ui.shadcn.com/themes，定制自己的主题，拿到代码并放到global.css中，这个样式文件与components.json里的tailwind样式文件一致：

"tailwind": {
    "config": "tailwind.config.js",
    "css": "src/globals.css",
    "baseColor": "gray",
    "cssVariables": true
  },

• 仔细阅读https://ui.shadcn.com/docs/theming，有两种控制主题样式的方式：

一种是dark:bg-white这样的，在tailwind里边直接用的这种。另一种是变量形式：

其中的background，foreground并不是tailwind自带的样式变量，需要我们要定义才能识别。 注意"cssVariables": true，要设置为true才可以用这种方式。因为我们要用的主题样式控制都是这种的： ``` @layer base { :root { --background: 0 0% 100%; --foreground: 20 14.3% 4.1%; --card: 0 0% 100%; --card-foreground: 20 14.3% 4.1%; --popover: 0 0% 100%; ```

• 在tailwind.config.js文件中增加自定义颜色：

colors: {
        'background':"hsl(var(--background))",
        "foreground": "hsl(var(--foreground))",

文档这里其实已经举例了一种增加主题控制的warning颜色的处理方法，就是没直接写整个页面的背景及前景色怎么做。。。 也许不想让我们直接copy用吧，还是想让我们动动脑筋。

• 最后光上边这些还是没有效果的，因为还要给body加上class这样才能找到对应的点去处理主题颜色

我们在最顶端的body增加class: <body class="bg-background text-foreground"> 这样就全部完成了。

[shadcn]

Is this still an issue?

[marcklingen]

Had the same issue, fixed it with :root[class~="dark"] instead of .dark in style.css

style.css for reference: https://github.com/langfuse/langfuse-docs/blob/e9ba748e0e53e5d9179ffc0040839108d1930621/style.css#L39

@shadcn this works well for us

[benyamynbrkyc]

Looks like it is. I still have to use the root selector, e.g.:

.dark,
:root[class~='dark'] {
  ...
}

[Zwyx]

There is a PR for that: https://github.com/shadcn-ui/ui/pull/1780