[Bug]: darkmode error - Githubissues

KelvinTee58 commented 7 months ago

Reproduction

<script setup lang="ts">
import { useColorMode,useDark } from '@vueuse/core'
// import { Icon } from '@iconify/vue'
import { Button } from '@/components/ui/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

const mode = useColorMode()
const isDark = useDark()
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">
        <span class="sr-only">Toggle theme 》》{{isDark}}《《 </span>
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem @click="mode = 'light'">
        Light
      </DropdownMenuItem>
      <DropdownMenuItem @click="mode = 'dark'">
        Dark
      </DropdownMenuItem>
      <DropdownMenuItem @click="mode = 'auto'">
        System
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Describe the bug

I'm developing using vue3+vite+ts. After installing vite according to the Installation guide, I proceeded with implementing dark mode. Upon clicking 'toggle theme', the HTML root element toggles its class between 'light' and 'dark'. However, the page itself doesn't switch to 'light' or 'dark', nor does it modify '@media (prefers-color-scheme: light)'.

When I switch between light and dark modes using the appearance settings on my Mac OS, it disregards the root element's class as either 'light' or 'dark'. Additionally, I've added the '@media (prefers-color-scheme: light)' CSS property. I'm wondering if the logic for dark mode in the current documentation is sufficient, or how can I need to modify my code to fix it the bug or what kind a part of the code I'm missing.

If you could take the time to help, it would be greatly appreciated!

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 30.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 123.0.6312.107
    Safari: 17.4.1

Contributes

[ ] I am willing to submit a PR to fix this issue
[ ] I am willing to submit a PR with failing tests

KelvinTee58 commented 7 months ago

https://github.com/radix-vue/shadcn-vue/assets/32637205/3b4ad77c-a546-4d0f-8b8e-95e6b0bf1061

mactanxin commented 7 months ago

check your tailwind.config.js/ts what's the darkMode value in there. source code would be helpful

KelvinTee58 commented 7 months ago

Hi,mactanxin.Thank you for your reply This's my tailwind.config.js/ts

module.exports = {
  darkMode: ["class"],
  safelist: ["dark"],
  prefix: "",

  content: [
    './pages/**/*.{ts,tsx,vue}',
    './components/**/*.{ts,tsx,vue}',
    './app/**/*.{ts,tsx,vue}',
    './src/**/*.{ts,tsx,vue}',
    ],
  theme: {
    ...
  },
  plugins: [animate],
}

and this's my components.json

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "default",
  "typescript": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/assets/index.css",
    "baseColor": "gray",
    "cssVariables": true
  },
  "framework": "vite",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Did I miss something?

And I will make my code public. If you could take a look at the complete code, it would be great if it could help me. UCColorPresetEditer

I hope you have time to help me. Thank you very much.

sadeghbarati commented 7 months ago

@KelvinTee58

I checked your source

import { createApp } from "vue";
import App from "./App.vue";

// 自定义样式

// tailwindcss main css file path was wrong
import "./assets/index.css";

// with aliases
// import "@/assets/index.css";

import "./style.css";

const app = createApp(App);

// 路由
import router from "@/router/index.ts";
app.use(router);

app.mount("#app");

Your main tailwind CSS files is in src/assets/index.css but you was pointing to @/assets/styles/index.scss

KelvinTee58 commented 7 months ago

Hi sadeghbarati. The problem has been resolved. Thank you for your help.