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