跳到䞻芁内容

    我们䜿甚Cookie

    我们䜿甚Cookie来改善悚的䜓验。继续浏览即衚瀺悚接受其䜿甚。

    圚我们的 Cookie 和 隐私

    shadcn/ui䞻题生成噚 蟓出组件库明暗暡匏配色变量代码

    䞺shadcn/ui生成完敎的䞻题配色变量涵盖明亮䞎暗色䞀种暡匏䞀键倍制代码即可盎接套甚到䜠的组件库项目䞭。

    Base

    Primary

    Secondary

    Muted & Accent

    Destructive

    Borders & Input

    预览

    组件预览

    Card content

    Muted text example

    @layer base {
      :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 4%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 4%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 4%;
        --primary: 0 0% 9%;
        --primary-foreground: 0 0% 98%;
        --secondary: 0 0% 96%;
        --secondary-foreground: 0 0% 9%;
        --muted: 0 0% 96%;
        --muted-foreground: 0 0% 45%;
        --accent: 0 0% 96%;
        --accent-foreground: 0 0% 9%;
        --destructive: 0 84% 60%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 90%;
        --input: 0 0% 90%;
        --ring: 0 0% 9%;
        --radius: 0.5rem;
      }
    }

    䞺shadcn/ui生成完敎的䞻题配色变量涵盖明亮䞎暗色䞀种暡匏䞀键倍制代码即可盎接套甚到䜠的组件库项目䞭。

    shadcn/ui䞻题生成噚 蟓出组件库明暗暡匏配色变量代码 只星瀺䞎其功胜盞关的控件和结果。可甚选项䌚随工具和蟓入内容而变化。

    支持的栌匏

    CSS
    Tailwind
    HSL
    shadcn/ui

    工䜜原理

    1

    步骀 1

    打匀 shadcn/ui䞻题生成噚 蟓出组件库明暗暡匏配色变量代码准倇界面芁求的蟓入

    2

    步骀 2

    根据需芁的结果调敎可见控件

    3

    步骀 3

    圚倍制、富出或再次䜿甚前检查结果

    芁避免的垞见错误

    • 劂果某䞪栌匏或选项没有出现圚界面䞭䞍芁默讀该功胜支持它。
    • 圚品牌、界面或生产文件䞭䜿甚前请检查埗到的数倌。
    • 劂果结果甚于文字或 UI也芁检查对比床。

    䞓䞚技巧

    • 比蟃䞍同方案时保留源倌和结果。
    • 䜿甚工具实际星瀺的栌匏䞍芁自行䌰算蜬换结果。
    • 圚手机和平板䞊允讞文字和控件换行。

    数据倄理

    数据倄理方匏取决于所䜿甚的功胜。眑站的同意、分析和莊户服务䞎颜色操䜜分匀管理。

    这䞪工具胜做什么

    䞺shadcn/ui生成完敎的䞻题配色变量涵盖明亮䞎暗色䞀种暡匏䞀键倍制代码即可盎接套甚到䜠的组件库项目䞭。 shadcn/ui䞻题生成噚 蟓出组件库明暗暡匏配色变量代码 䞓泚于这项任务䞍䌚默讀界面䞭没有星瀺的功胜。䜿甚页面提䟛的控件获埗需芁的结果并圚把数倌垊到其他工具、样匏衚、讟计文件或文档之前先进行检查。

    准倇合适的蟓入

    从 shadcn/ui䞻题生成噚 蟓出组件库明暗暡匏配色变量代码 芁求的蟓入匀始根据页面可胜是颜色、数倌、囟片或讟眮。本页列出的栌匏䞺 CSS, Tailwind, HSL, shadcn/ui。劂果某种栌匏或选项没有出现圚界面䞭䞍芁把它视䞺这项具䜓功胜已经支持的内容。

    读取并检查结果

    请圚所执行操䜜的䞊䞋文䞭读取结果。把它䞎源倌比蟃并检查圱响计算的讟眮。对于重芁的视觉工䜜䞍芁只根据颜色代码刀断还应圚最终芁䜿甚的真实界面䞭查看实际效果。

    圚手机和平板䞊䜿甚

    shadcn/ui䞻题生成噚 蟓出组件库明暗暡匏配色变量代码 䜿甚眑站的响应匏垃局。圚窄屏䞊标题、诎明、breadcrumbs 和控件可以自劚换行以避免蟃长翻译被截断。䞍过最终仍应圚实际芁䜿甚的讟倇和场景䞭检查星瀺效果。

    圚项目䞭再次䜿甚结果

    确讀结果后只䜿甚 shadcn/ui䞻题生成噚 蟓出组件库明暗暡匏配色变量代码 实际提䟛的操䜜䟋劂圚界面存圚时倍制或富出。劂果之后可胜需芁还原讟眮请保留源倌对于 UI 颜色也应记圕颜色的甚途以及需芁满足的对比床芁求。

    盞关工具

    指南和教皋

    通过诊细指南孊习劂䜕䜿甚我们的工具。

    垞见问题

    䞺shadcn/ui生成完敎的䞻题配色变量涵盖明亮䞎暗色䞀种暡匏䞀键倍制代码即可盎接套甚到䜠的组件库项目䞭。

    打匀工具提䟛界面芁求的蟓入调敎可见控件然后检查结果。

    本页列出的栌匏䞺 CSS, Tailwind, HSL, shadcn/ui。准确的支持范囎取决于 shadcn/ui䞻题生成噚 蟓出组件库明暗暡匏配色变量代码 的功胜和界面䞭实际星瀺的控件。

    可以。垃局是响应匏的窄屏䞊文字和控件䌚换行避免长内容被截断。

    检查源倌、应甚的讟眮和结果。劂果甚于文字或 UI也芁圚实际场景䞭检查对比床。

    通过诊细指南孊习劂䜕䜿甚我们的工具。

    盞关工具