Communitygithub.com

papopporking-oss/opencode-nextjs-standard

daisyUI 5 的配置選項

opencode-nextjs-standard 是什麼?

此技能提供 daisyUI 5 的完整配置指南,說明開發者如何透過 `@plugin "daisyui"` 語法在 CSS 中自訂主題、根元素、包含/排除元件、CSS 前綴以及日誌記錄等選項。支援平台包括使用 Tailwind CSS 與 daisyUI 的 Next.js 專案(如 OpenCode Next.js Standard)。技能的核心價值在於簡化主題管理,讓開發者能快速設定多重主題(如指定 `bumblebee` 為預設主題、`synthwave` 為 prefersdark 主題),並透過 `data-theme` 屬性動態切換。此外,它還提供排除 root scrollbar gutter、新增前綴避免樣式衝突、以及關閉主控台日誌等細部控制,適合需要高度自訂 UI 的場景。

相容平台~Claude Code~Codex CLI~Cursor✓OpenCode
npx skills add https://github.com/papopporking-oss/opencode-nextjs-standard/tree/HEAD/.agents/skills/daisyui/config

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

配置

daisyUI 5 配置文件:https://daisyui.com/docs/config/

未經配置的 daisyUI:

@plugin "daisyui";

僅使用 light 主題的 daisyUI 配置:

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

使用所有預設設定的 daisyUI:

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

範例配置: 此配置啟用所有內建主題。bumblebee 主題為預設主題。synthwave 主題是 prefersdark 主題,即預設的深色模式。 若要使用其他已啟用的主題,請在 <html> 元素中加入 data-theme="THEME_NAME"。 該配置排除根元素的捲軸間距(scrollbar gutter)。它對所有 daisyUI 類別使用 daisy- 前綴,並停用主控台日誌。

@plugin "daisyui" {
  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, 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, caramellatte, abyss, silk;
  root: ":root";
  include: ;
  exclude: rootscrollgutter, checkbox;
  prefix: daisy-;
  logs: false;
}

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相關技能