daisyUI 主题
如何使用 daisyUI 的主题？
daisyUI 原生已经有很多精美制作的主题，你可以直接获取它们。 每一个主题都定义了一些全局的变量，这些变量会影响所有的 daisyUI 组件。 要使用一个主题，只需要在 tailwind.config.js 里添加主题名字，然后在 HTML 标签里添加 data-theme 属性即可：module.exports = {
//...
daisyui: {
themes: ["light", "dark", "cupcake"],
},
}<html data-theme="cupcake"></html>我推荐使用 theme-change，这样你可以方便的切换主题，并且主题的选择会存储在本地存储里。 主题列表
尝试它们:light
A
A
A
A
dark
A
A
A
A
cupcake
A
A
A
A
bumblebee
A
A
A
A
emerald
A
A
A
A
corporate
A
A
A
A
synthwave
A
A
A
A
retro
A
A
A
A
cyberpunk
A
A
A
A
valentine
A
A
A
A
halloween
A
A
A
A
garden
A
A
A
A
forest
A
A
A
A
aqua
A
A
A
A
lofi
A
A
A
A
pastel
A
A
A
A
fantasy
A
A
A
A
wireframe
A
A
A
A
black
A
A
A
A
luxury
A
A
A
A
dracula
A
A
A
A
cmyk
A
A
A
A
autumn
A
A
A
A
business
A
A
A
A
acid
A
A
A
A
lemonade
A
A
A
A
night
A
A
A
A
coffee
A
A
A
A
winter
A
A
A
A
dim
A
A
A
A
nord
A
A
A
A
sunset
A
A
A
A
module.exports = {
//...
daisyui: {
themes: [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
"dim",
"nord",
"sunset",
],
},
}light（或者如果是黑暗模式则为 dark ） 你可以通过配置 tailwind.config.js 来改变默认的主题选择 如何去掉不使用的主题？
在你的项目中只引入你需要的主题。 这会减小你最终的 CSS 文件。 在下面的例子里cupcake会成为 light 模式的默认主题dark会成为 dark 模式的默认主题- 当 HTML 的 tag 存在
data-theme='cmyk'时，主题会切换为cmyk
module.exports = {
daisyui: {
themes: ["cupcake", "dark", "cmyk"],
},
}如何禁止所有的主题？
如果你只想使用默认的 light 和 dark 主题，设置themes 配置为 false。 module.exports = {
//...
daisyui: {
themes: false,
},
}themes 配置为一个空数组。 module.exports = {
//...
daisyui: {
themes: [],
},
}如何在页面的一部分使用主题？
在你想使用主题的标签添加data-theme='THEME_NAME' 即可以让这个标签下面使用对应的主题。 你可以嵌套使用主题，可能是无尽的，尝试吧！ 你可以强制让你的 HTML 去使用一个特定的主题。 <html data-theme="dark">
<div data-theme="light">
This div will always use light theme
<span data-theme="retro">This span will always use retro theme!</span>
</div>
</html>如何增加自定义主题？
你可以在你的tailwind.config.js 文件里添加一个新主题。 在下面这个例子里，我添加了一个新主题叫 mytheme 并且我也引入了 dark 和 cupcake 主题。 - 第一个主题 （
mytheme） 会成为默认主题。 dark主题会成为默认的黑暗模式主题。
primary 按钮的文字颜色）。 你也可以添加 可选颜色名字 来完全控制所有的颜色。
module.exports = {
//...
daisyui: {
themes: [
{
mytheme: {
"primary": "#a991f7",
"secondary": "#f6d860",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#ffffff",
},
},
"dark",
"cupcake",
],
},
}daisyUI 主题的 CSS 变量
如果你想自定义 daisyUI 主题，这里有一些你可以调整的 CSS 变量：module.exports = {
//...
daisyui: {
themes: [
{
mytheme: {
"primary": "#a991f7",
"secondary": "#f6d860",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#ffffff",
"--rounded-box": "1rem", // border radius rounded-box utility class, used in card and other large boxes
"--rounded-btn": "0.5rem", // border radius rounded-btn utility class, used in buttons and similar element
"--rounded-badge": "1.9rem", // border radius rounded-badge utility class, used in badges and similar
"--animation-btn": "0.25s", // duration of animation when you click on button
"--animation-input": "0.2s", // duration of animation for inputs like checkbox, toggle, radio, etc
"--btn-focus-scale": "0.95", // scale transform of button when you focus on it
"--border-btn": "1px", // border width of buttons
"--tab-border": "1px", // border width of tabs
"--tab-radius": "0.5rem", // border radius of tabs
},
},
],
},
}给 daisyUI 主题增加自定义 CSS
你可以通过 CSS 给 daisyUI 主题增加样式：[data-theme="mytheme"] .btn {
border-width: 2px;
border-color: black;
}如何对已有主题进行自定义设置？
在你的 tailwind.config.js，你可以获取一个特定的主题，并且覆盖这个主题的颜色变量。 在下面这个例子，我调整了light 主题，并且改变了这个主题的 primary 和 secondary 的颜色： module.exports = {
//...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/theming/themes")["light"],
primary: "blue",
secondary: "teal",
},
},
],
},
}如何为一个指定的主题添加自定义样式？
你只能给一个指定的主题的元素写自定义样式。 在这个例子里，.btn-twitter 类只会在 light 主题中才会有这些样式 module.exports = {
//...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/theming/themes")["light"],
".btn-twitter": {
"background-color": "#1EA1F1",
"border-color": "#1EA1F1",
},
".btn-twitter:hover": {
"background-color": "#1C96E1",
"border-color": "#1C96E1",
},
},
},
],
},
}你有什么问题么？ 向社区提问题
你发现了 bug 么？ 在 GitHub 提 issue
你喜欢 daisyUI？ 在 twitter、知乎、微博宣传 daisyui 吧！
支持daisyUI的开发:
Open Collective
