daisyUI 主题
如何使用 daisyUI 主题？
daisyUI 带有 35 个内置主题，可以立即改变您网站的整体外观 - 这是一个节省时间的工具，让您可以专注于构建，而不是决定颜色。
您还可以创建自己的自定义主题或自定义内置主题。
您可以通过在@plugin "daisyui"CSS 文件中添加括号来管理主题。
app.css
@import "tailwindcss";
- @plugin "daisyui";
+ @plugin "daisyui" {
+ themes: light --default, dark --prefersdark;
+ }themes是您要启用的主题名称的逗号分隔列表。- 您可以设置
--default标志，使主题成为默认主题。 - 您也可以设置
--prefersdark标志，使主题成为暗黑模式的默认主题 (prefers-color-scheme: dark)。
启用内置主题
默认情况下，light和dark主题已启用。让我们启用cupcake主题
app.css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}并为页面设置cupcake主题
index.html
<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
caramellatte
A
A
A
A
abyss
A
A
A
A
silk
A
A
A
A
启用所有主题
通过将themes设置为all:
app.css
@import "tailwindcss";
@plugin "daisyui" {
themes: all;
}禁用主题
要禁用dark主题，例如，将其从列表中删除。现在只包含 light 主题
app.css
@import "tailwindcss";
@plugin "daisyui" {
- themes: light --default, dark --prefersdark;
+ themes: light --default;
}如果出于某种原因，您想禁用所有主题并删除所有 daisyUI 颜色，请设置themes设置为false:
app.css
@import "tailwindcss";
@plugin "daisyui" {
themes: false;
}如何仅对页面的一部分使用主题？
将data-theme='THEME_NAME' 添加到任何元素，里面的所有内容都将应用您的主题。 您可以嵌套主题，并且没有限制！ 您可以强制 HTML 的一部分仅使用特定主题。 index.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>如何添加新的自定义主题？
要添加新主题，请使用@plugin "daisyui/theme" {}在您的 CSS 文件中，使用以下结构
app.css
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "mytheme";
default: true; /* set as default */
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
color-scheme: light; /* color of browser-provided UI */
--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-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
/* border radius */
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
/* base sizes */
--size-selector: 0.25rem;
--size-field: 0.25rem;
/* border size */
--border: 1px;
/* effects */
--depth: 1;
--noise: 0;
}如何自定义现有主题？
要自定义内置主题，您可以使用与添加新主题相同的结构，但使用与内置主题相同的名称。例如，要自定义light主题
app.css
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "light";
default: true;
--color-primary: blue;
--color-secondary: teal;
}所有其他值将从原始主题继承。
如何为特定主题添加自定义样式？
您可以仅为特定主题的元素编写自定义样式。 在此示例中，.my-btn 类仅在 light 主题上具有此样式。app.css
[data-theme="light"] {
.my-btn {
background-color: #1EA1F1;
border-color: #1EA1F1;
}
.my-btn:hover {
background-color: #1C96E1;
border-color: #1C96E1;
}
}如何为特定主题应用 Tailwind 的“dark:”选择器
daisyUI 可以配置为使用 Tailwind 的 `dark:` 前缀 例如，如果您只想为 daisyUI dark 主题添加内边距，您可以使用 `dark:p-10` 在下面的示例中，“night”是暗黑模式主题，因此我们将其添加到 `@variant dark`app.css
@import "tailwindcss";
@plugin "daisyui" {
themes: winter --default, night --prefersdark;
}
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));index.html
<div class="p-10 dark:p-20">
I will have 10 padding on winter theme and 20 padding on night theme
</div>您有问题吗？ 在 GitHub 上提问 或 Discord 服务器
您发现错误了吗？ 在 GitHub 上打开一个 issue
您喜欢 daisyUI 吗？ 发帖宣传一下！
支持 daisyUI 的开发： Open Collective
