如何在daisy-ui中自定义主题?
How to customize a theme in daisy-ui?
我想在daisyui中自定义一个主题。是否可以自定义,即深色主题(只需固定一种颜色,或添加更多颜色条目)?
此外:是否可以为您的自定义主题添加新的颜色条目?
即我尝试了以下但没有成功:
daisyui: {
styled: true,
themes: [
"light", // first one will be the default theme
"dark",
{
mytheme: {
primary: "#793ef9",
"new-color": "#eff1ae",
"primary-focus": "#570df8",
},
},
"cupcake",
],
},
...但是当我在 css (theme("colors.new-color")
) 中使用新颜色 new-color
时。我收到以下错误:
(146:7) /home/armwur/code/booking-overview/src/index.css 'colors.new-color' does not exist in your theme config. 'colors' has the following valid keys: 'inherit', 'current', 'transparent', 'black', 'white', 'neutral', 'primary', 'primary-focus', 'primary-content', 'secondary', 'secondary-focus', 'secondary-content', 'accent', 'accent-focus', 'accent-content', 'neutral-focus', 'neutral-content', 'base-100', 'base-200', 'base-300', 'base-content', 'info', 'success', 'warning', 'error'
144 | }
145 | .fast-table tr:hover td {
> 146 | background-color: theme('colors.new-color');
| ^
147 | }
148 | .fast-table th, .fast-table td {
我需要添加自定义颜色条目。这怎么可能?
在 DaisyUI 中更改默认主题的颜色
- 在以下位置查找主题颜色:https://github.com/saadeghi/daisyui/blob/master/src/colors/themes.js
- 将 整个 主题添加到 tailwind.config.cjs,随意更改。
daisyui: {
themes: [
{'dark': {
"primary": "#793ef9",
"primary-focus": "#570df8",
"primary-content": "#ffffff",
"secondary": "#f000b8",
"secondary-focus": "#bd0091",
"secondary-content": "#ffffff",
"accent": "#37cdbe",
"accent-focus": "#2aa79b",
"accent-content": "#ffffff",
"neutral": "#2a2e37",
"neutral-focus": "#16181d",
"neutral-content": "#ffffff",
"base-100": "#3d4451",
"base-200": "#2a2e37",
"base-300": "#16181d",
"base-content": "#ebecf0",
"info": "#66c6ff",
"success": "#87d039",
"warning": "#e2d562",
"error": "#ff6f6f"
}},
'light',
]
}
虽然我不知道你会如何为你的主题添加新颜色...
- 您要做的是创建另一个主题。编辑现有主题的方法如下:
module.exports = {
//...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: "blue",
"primary-focus": "mediumblue",
},
},
],
},
}
可以找到更多信息 here。
- 这也可以通过将您的 CSS 添加到主题中来完成:
[data-theme="mytheme"] .btn {
border-width: 2px;
border-color: black;
}
可以找到更多信息 here。
我想在daisyui中自定义一个主题。是否可以自定义,即深色主题(只需固定一种颜色,或添加更多颜色条目)?
此外:是否可以为您的自定义主题添加新的颜色条目?
即我尝试了以下但没有成功:
daisyui: {
styled: true,
themes: [
"light", // first one will be the default theme
"dark",
{
mytheme: {
primary: "#793ef9",
"new-color": "#eff1ae",
"primary-focus": "#570df8",
},
},
"cupcake",
],
},
...但是当我在 css (theme("colors.new-color")
) 中使用新颜色 new-color
时。我收到以下错误:
(146:7) /home/armwur/code/booking-overview/src/index.css 'colors.new-color' does not exist in your theme config. 'colors' has the following valid keys: 'inherit', 'current', 'transparent', 'black', 'white', 'neutral', 'primary', 'primary-focus', 'primary-content', 'secondary', 'secondary-focus', 'secondary-content', 'accent', 'accent-focus', 'accent-content', 'neutral-focus', 'neutral-content', 'base-100', 'base-200', 'base-300', 'base-content', 'info', 'success', 'warning', 'error'
144 | }
145 | .fast-table tr:hover td {
> 146 | background-color: theme('colors.new-color');
| ^
147 | }
148 | .fast-table th, .fast-table td {
我需要添加自定义颜色条目。这怎么可能?
在 DaisyUI 中更改默认主题的颜色
- 在以下位置查找主题颜色:https://github.com/saadeghi/daisyui/blob/master/src/colors/themes.js
- 将 整个 主题添加到 tailwind.config.cjs,随意更改。
daisyui: {
themes: [
{'dark': {
"primary": "#793ef9",
"primary-focus": "#570df8",
"primary-content": "#ffffff",
"secondary": "#f000b8",
"secondary-focus": "#bd0091",
"secondary-content": "#ffffff",
"accent": "#37cdbe",
"accent-focus": "#2aa79b",
"accent-content": "#ffffff",
"neutral": "#2a2e37",
"neutral-focus": "#16181d",
"neutral-content": "#ffffff",
"base-100": "#3d4451",
"base-200": "#2a2e37",
"base-300": "#16181d",
"base-content": "#ebecf0",
"info": "#66c6ff",
"success": "#87d039",
"warning": "#e2d562",
"error": "#ff6f6f"
}},
'light',
]
}
虽然我不知道你会如何为你的主题添加新颜色...
- 您要做的是创建另一个主题。编辑现有主题的方法如下:
module.exports = {
//...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: "blue",
"primary-focus": "mediumblue",
},
},
],
},
}
可以找到更多信息 here。
- 这也可以通过将您的 CSS 添加到主题中来完成:
[data-theme="mytheme"] .btn {
border-width: 2px;
border-color: black;
}
可以找到更多信息 here。