tailwindcss暗色主题切换

徐同保2025-10-25 2:34

globals.css:

增加一行代码：@custom-variant dark (&:where(.dark, .dark *));

css 复制代码

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

javascript 复制代码

				<div>
					<div className="text-2xl font-medium">主题切换:</div>
					<div className="m-4">
						<Switch value={isDark} onChange={(e) => handleIsDarkChange(e)} />
					</div>
					<div className={isDark ? 'dark' : ''}>
						<div className="rounded-lg bg-white px-6 py-8 shadow-xl ring ring-gray-900/5 transition-all duration-500 dark:bg-gray-800">
							<h3 className="text-base font-medium tracking-tight text-gray-900 dark:text-white">
								Hello world
							</h3>
							<p className="mt-2 text-sm text-gray-500 dark:text-gray-400">Hello world</p>
						</div>
					</div>
				</div>

增加样式名dark后，会用自动应用上className中dark:后的样式