配置

如何更改 daisyUI 的默认配置？

daisyUI 可以从你的 CSS 文件中配置。

替换分号;在@plugin "daisyui"之后使用括号{}并在括号内添加配置。

- @plugin "daisyui";
+ @plugin "daisyui" {
+ }

默认配置

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
  root: ":root";
  include: ;
  exclude: ;
  prefix: ;
  logs: true;
}

主题

@plugin "daisyui" {
  themes: nord --default, abyss --prefersdark, cupcake, dracula;
}

在上面的示例中，我们有 4 个主题nord,abyss,cupcake，和dracula。 nord 是默认主题，abyss 是暗黑模式的默认主题，cupcake 和 dracula 可用于data-theme="cupcake"和data-theme="dracula".

@plugin "daisyui" {
  themes: all;
}

在上面的示例中，我们启用了所有主题。

@plugin "daisyui" {
  themes: false;
}

在上面的示例中，我们禁用了所有主题。禁用所有主题并使用@plugin "daisyui/theme"

@plugin "daisyui" {
  themes: dracula --default;
}

添加自定义主题非常有用。在上面的示例中，我们将 dracula 设置为默认主题。像这样设置一个值意味着只有一个主题可用。除非你使用@plugin "daisyui/theme"

根元素

@plugin "daisyui" {
  root: "#my-app";
}

在上面的示例中，我们将 CSS 变量设置在#my-app而不是:root上。这样，所有 daisyUI 全局 CSS 变量都将作用域限定为#my-app.
这在作用域环境（如 Web 组件或 Shadow DOM）或页面的特定部分中使用 daisyUI 非常有用。

包含

@plugin "daisyui" {
  include: button, input, select;
}

在上面的示例中，我们仅包含 button、input 和 select 组件。daisyUI 库的所有其他样式都将被排除。
以下是可以包含或排除的文件名.

排除

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

在上面的示例中，我们排除了rootscrollgutter样式，该样式已添加到:root当模态框或抽屉打开时。

@plugin "daisyui" {
  exclude: checkbox, footer, typography, glass, rootcolor, rootscrollgutter;
}

在上面的示例中，我们排除了列出的文件。daisyUI 的所有其他部分都将可用。如果你想选择退出 daisyUI 的某些部分，或者你想将 daisyUI 用于某些部分，而将另一个库用于其余部分，这将非常有用。
以下是可以包含或排除的文件名.

前缀

@plugin "daisyui" {
  prefix: "d-";
}

在上面的示例中，所有 daisyUI 类的前缀都将是d-。例如，btn将变成d-btn.

日志

@plugin "daisyui" {
  logs: false;
}

在上面的示例中，我们禁用了 daisyUI 的日志。如果你想清理控制台输出，这将非常有用。

NEXUS
官方 daisyUI 仪表板模板

在 daisyUI 商店有售

更多详情