Tailwind 4 与 daisyUI 5 的主题、深色模式

Tailwind 4 把配置搬进了 CSS。daisyUI 5 跟着这个模型走，主题也是 CSS 里的插件选项。

接入方式

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
})

定义两套主题

@import 'tailwindcss';

@plugin 'daisyui' {
  themes: false;
}

@plugin 'daisyui/theme' {
  name: 'myblog';
  default: true;
  color-scheme: light;
  --color-primary: oklch(44% 0.088 250);
}

@plugin 'daisyui/theme' {
  name: 'myblog-dark';
  color-scheme: dark;
  --color-primary: oklch(78% 0.084 235);
}

themes: false 表示不加载 daisyUI 自带的几十套主题，只留我们自己定义的两套。

切换与防闪烁

切换就是把 data-theme 写到 <html> 上；防闪烁的关键是这个属性必须在首屏绘制前就位，所以要在 <head> 里内联一小段脚本，而不是等 Vue 挂载。

var stored = localStorage.getItem('myblog-theme')
var theme =
  stored || (matchMedia('(prefers-color-scheme: dark)').matches ? 'myblog-dark' : 'myblog')
document.documentElement.setAttribute('data-theme', theme)

顺带一提

深色模式下代码块的配色由 Shiki 的双主题负责：浅色写内联样式，深色用 --shiki-dark 变量，再用一条属性选择器覆盖即可。