daisyUI 如何用 contenteditable="false">【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui如果你的页面整体是某个主题但希望其中一块区域一张卡片、一个弹窗、一个局部容器使用完全不同的配色daisyUI 的做法是在任意元素上添加data-themeTHEME_NAME该元素内部的所有内容都会切换到指定主题并且可以无限层嵌套。这套机制只依赖 CSS不要求写 JS。前提是你已经按 安装文档/docs/install/page.md) 把 daisyUI 作为 Tailwind CSS 插件接入项目。先启用你要在局部使用的主题daisyUI 通过 CSS 文件里的plugin daisyui {}管理主题。默认配置只启用了两个主题/* app.css */ import tailwindcss; plugin daisyui { themes: light --default, dark --prefersdark; }也就是说默认情况下你只能在局部区域使用light和dark。要让cupcake、retro这类内置主题可用于data-theme必须把它们加进themes列表来源themes 文档/docs/themes/page.md)import tailwindcss; plugin daisyui { themes: light --default, dark --prefersdark, cupcake, retro; }其中--default标记默认主题--prefersdark标记系统深色模式下的默认主题themes: all可启用全部内置主题。themes配置项的完整说明见 config 文档/docs/config/page.md)。在元素上嵌套>html>import tailwindcss; plugin daisyui; plugin daisyui/theme { name: mytheme; default: true; /* set as default */ prefersdark: false; color-scheme: light; --color-base-100: oklch(98% 0.02 240); --color-base-200: oklch(95% 0.03 240); --color-base-300: oklch(92% 0.04 240); --color-base-content: oklch(20% 0.05 240); --color-primary: oklch(55% 0.3 240); --color-primary-content: oklch(98% 0.01 240); /* 其余 --color-* 变量同文档示例 */ }div>input typecheckbox valuesynthwave classtoggle theme-controller /该组件纯靠 CSS 切换主题文档建议如需刷新后保持选择再自行用 JS 把状态存入 localStorage。浏览器支持要求为 Chrome 105、Firefox 121、Safari 15.4该文档 frontmatter 声明。要注意它改变的是整页主题与本文的局部data-theme机制独立两者可以共存但局部data-theme写死的区域不受整页切换影响。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考