[{"data":1,"prerenderedAt":415},["ShallowReactive",2],{"post-\u002Fposts\u002Ftailwind-daisyui-theme":3,"post-nav-\u002Fposts\u002Ftailwind-daisyui-theme":406},{"id":4,"title":5,"body":6,"date":392,"description":393,"draft":394,"extension":395,"meta":396,"navigation":52,"path":397,"seo":398,"stem":399,"summary":400,"tags":401,"__hash__":405},"posts\u002Fposts\u002Ftailwind-daisyui-theme.md","Tailwind 4 与 daisyUI 5 的主题、深色模式",{"type":7,"value":8,"toc":386},"minimark",[9,13,17,112,115,253,259,262,277,372,375,382],[10,11,12],"p",{},"Tailwind 4 把配置搬进了 CSS。daisyUI 5 跟着这个模型走，主题也是 CSS 里的插件选项。",[14,15,16],"h2",{"id":16},"接入方式",[18,19,24],"pre",{"className":20,"code":21,"language":22,"meta":23,"style":23},"language-ts shiki shiki-themes github-light github-dark","import tailwindcss from '@tailwindcss\u002Fvite'\n\nexport default defineNuxtConfig({\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css'],\n  vite: {\n    plugins: [tailwindcss()],\n  },\n})\n","ts","",[25,26,27,47,54,70,82,88,100,106],"code",{"__ignoreMap":23},[28,29,32,36,40,43],"span",{"class":30,"line":31},"line",1,[28,33,35],{"class":34},"szBVR","import",[28,37,39],{"class":38},"sVt8B"," tailwindcss ",[28,41,42],{"class":34},"from",[28,44,46],{"class":45},"sZZnC"," '@tailwindcss\u002Fvite'\n",[28,48,50],{"class":30,"line":49},2,[28,51,53],{"emptyLinePlaceholder":52},true,"\n",[28,55,57,60,63,67],{"class":30,"line":56},3,[28,58,59],{"class":34},"export",[28,61,62],{"class":34}," default",[28,64,66],{"class":65},"sScJk"," defineNuxtConfig",[28,68,69],{"class":38},"({\n",[28,71,73,76,79],{"class":30,"line":72},4,[28,74,75],{"class":38},"  css: [",[28,77,78],{"class":45},"'~\u002Fassets\u002Fcss\u002Fmain.css'",[28,80,81],{"class":38},"],\n",[28,83,85],{"class":30,"line":84},5,[28,86,87],{"class":38},"  vite: {\n",[28,89,91,94,97],{"class":30,"line":90},6,[28,92,93],{"class":38},"    plugins: [",[28,95,96],{"class":65},"tailwindcss",[28,98,99],{"class":38},"()],\n",[28,101,103],{"class":30,"line":102},7,[28,104,105],{"class":38},"  },\n",[28,107,109],{"class":30,"line":108},8,[28,110,111],{"class":38},"})\n",[14,113,114],{"id":114},"定义两套主题",[18,116,120],{"className":117,"code":118,"language":119,"meta":23,"style":23},"language-css shiki shiki-themes github-light github-dark","@import 'tailwindcss';\n\n@plugin 'daisyui' {\n  themes: false;\n}\n\n@plugin 'daisyui\u002Ftheme' {\n  name: 'myblog';\n  default: true;\n  color-scheme: light;\n  --color-primary: oklch(44% 0.088 250);\n}\n\n@plugin 'daisyui\u002Ftheme' {\n  name: 'myblog-dark';\n  color-scheme: dark;\n  --color-primary: oklch(78% 0.084 235);\n}\n","css",[25,121,122,133,137,145,150,155,159,166,171,177,187,199,204,209,216,228,236,248],{"__ignoreMap":23},[28,123,124,127,130],{"class":30,"line":31},[28,125,126],{"class":34},"@import",[28,128,129],{"class":45}," 'tailwindcss'",[28,131,132],{"class":38},";\n",[28,134,135],{"class":30,"line":49},[28,136,53],{"emptyLinePlaceholder":52},[28,138,139,142],{"class":30,"line":56},[28,140,141],{"class":34},"@plugin",[28,143,144],{"class":38}," 'daisyui' {\n",[28,146,147],{"class":30,"line":72},[28,148,149],{"class":38},"  themes: false;\n",[28,151,152],{"class":30,"line":84},[28,153,154],{"class":38},"}\n",[28,156,157],{"class":30,"line":90},[28,158,53],{"emptyLinePlaceholder":52},[28,160,161,163],{"class":30,"line":102},[28,162,141],{"class":34},[28,164,165],{"class":38}," 'daisyui\u002Ftheme' {\n",[28,167,168],{"class":30,"line":108},[28,169,170],{"class":38},"  name: 'myblog';\n",[28,172,174],{"class":30,"line":173},9,[28,175,176],{"class":38},"  default: true;\n",[28,178,180,184],{"class":30,"line":179},10,[28,181,183],{"class":182},"s9eBZ","  color-scheme",[28,185,186],{"class":38},": light;\n",[28,188,190,193,196],{"class":30,"line":189},11,[28,191,192],{"class":38},"  --color-primary: oklch(44% 0",[28,194,195],{"class":65},".088",[28,197,198],{"class":38}," 250);\n",[28,200,202],{"class":30,"line":201},12,[28,203,154],{"class":38},[28,205,207],{"class":30,"line":206},13,[28,208,53],{"emptyLinePlaceholder":52},[28,210,212,214],{"class":30,"line":211},14,[28,213,141],{"class":34},[28,215,165],{"class":38},[28,217,219,222,225],{"class":30,"line":218},15,[28,220,221],{"class":38},"  name: '",[28,223,224],{"class":182},"myblog-dark",[28,226,227],{"class":38},"';\n",[28,229,231,233],{"class":30,"line":230},16,[28,232,183],{"class":182},[28,234,235],{"class":38},": dark;\n",[28,237,239,242,245],{"class":30,"line":238},17,[28,240,241],{"class":38},"  --color-primary: oklch(78% 0",[28,243,244],{"class":65},".084",[28,246,247],{"class":38}," 235);\n",[28,249,251],{"class":30,"line":250},18,[28,252,154],{"class":38},[10,254,255,258],{},[25,256,257],{},"themes: false"," 表示不加载 daisyUI 自带的几十套主题，只留我们自己定义的两套。",[14,260,261],{"id":261},"切换与防闪烁",[10,263,264,265,268,269,272,273,276],{},"切换就是把 ",[25,266,267],{},"data-theme"," 写到 ",[25,270,271],{},"\u003Chtml>"," 上；防闪烁的关键是这个属性必须在首屏绘制前就位，所以要在 ",[25,274,275],{},"\u003Chead>"," 里内联一小段脚本，而不是等 Vue 挂载。",[18,278,282],{"className":279,"code":280,"language":281,"meta":23,"style":23},"language-js shiki shiki-themes github-light github-dark","var stored = localStorage.getItem('myblog-theme')\nvar theme =\n  stored || (matchMedia('(prefers-color-scheme: dark)').matches ? 'myblog-dark' : 'myblog')\ndocument.documentElement.setAttribute('data-theme', theme)\n","js",[25,283,284,310,320,356],{"__ignoreMap":23},[28,285,286,289,292,295,298,301,304,307],{"class":30,"line":31},[28,287,288],{"class":34},"var",[28,290,291],{"class":38}," stored ",[28,293,294],{"class":34},"=",[28,296,297],{"class":38}," localStorage.",[28,299,300],{"class":65},"getItem",[28,302,303],{"class":38},"(",[28,305,306],{"class":45},"'myblog-theme'",[28,308,309],{"class":38},")\n",[28,311,312,314,317],{"class":30,"line":49},[28,313,288],{"class":34},[28,315,316],{"class":38}," theme ",[28,318,319],{"class":34},"=\n",[28,321,322,325,328,331,334,336,339,342,345,348,351,354],{"class":30,"line":56},[28,323,324],{"class":38},"  stored ",[28,326,327],{"class":34},"||",[28,329,330],{"class":38}," (",[28,332,333],{"class":65},"matchMedia",[28,335,303],{"class":38},[28,337,338],{"class":45},"'(prefers-color-scheme: dark)'",[28,340,341],{"class":38},").matches ",[28,343,344],{"class":34},"?",[28,346,347],{"class":45}," 'myblog-dark'",[28,349,350],{"class":34}," :",[28,352,353],{"class":45}," 'myblog'",[28,355,309],{"class":38},[28,357,358,361,364,366,369],{"class":30,"line":72},[28,359,360],{"class":38},"document.documentElement.",[28,362,363],{"class":65},"setAttribute",[28,365,303],{"class":38},[28,367,368],{"class":45},"'data-theme'",[28,370,371],{"class":38},", theme)\n",[14,373,374],{"id":374},"顺带一提",[10,376,377,378,381],{},"深色模式下代码块的配色由 Shiki 的双主题负责：浅色写内联样式，深色用 ",[25,379,380],{},"--shiki-dark"," 变量，再用一条属性选择器覆盖即可。",[383,384,385],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":23,"searchDepth":56,"depth":56,"links":387},[388,389,390,391],{"id":16,"depth":49,"text":16},{"id":114,"depth":49,"text":114},{"id":261,"depth":49,"text":261},{"id":374,"depth":49,"text":374},"2026-09-20","用 CSS 变量定义两套自定义主题，再用一个 data-theme 属性切换，顺带解决首屏闪烁。",false,"md",{},"\u002Fposts\u002Ftailwind-daisyui-theme",{"title":5,"description":393},"posts\u002Ftailwind-daisyui-theme","不用 tailwind.config.js，全部写在 CSS 里。",[402,403,404],"Tailwind","daisyUI","CSS","q8g-tw99FVDWTsZB3NvM1UX-ilRMzFgc80P_04eFOvU",{"prev":407,"next":411},{"path":408,"title":409,"date":410},"\u002Fposts\u002Fnuxt-content-frontmatter","@nuxt\u002Fcontent 的 frontmatter 怎么写","2026-09-25",{"path":412,"title":413,"date":414},"\u002Fposts\u002Funiversity-php-notes","大学里学 PHP 记的那几页","2021-11-07",1792556024907]