goodui
获取 Pro

免费 · 无需注册

Theme Studio

18 个颜色预设、19 组字体搭配和 12 个风格包。在真实仪表盘上预览，复制 CSS。

Graphite · goodui Display + goodui Sans
Primary button 17.0:1 AAABody text 19.5:1 AAAMuted text 5.9:1 AA

Use this theme

  1. Replace the :root and .dark blocks in app/globals.css.
  2. Load the fonts in app/layout.tsx with next/font.
  3. Add the font and shadow lines to your @theme inline block.
app/globals.css
/* goodui Theme Studio · Graphite · goodui Display + goodui Sans · 0.625rem
   Edit: /themes
   Replace the :root and .dark blocks in app/globals.css with the rules below.
   Not on Next.js? Put this at the very top of the file instead of next/font:
   @import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300..800&display=swap");
   @font-face { font-family: "goodui Display"; src: url("/fonts/goodui/GooduiDisplay-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
   @font-face { font-family: "goodui Sans"; src: url("/fonts/goodui/GooduiSans-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
   (goodui fonts: files and license at /fonts) */

:root {
  --radius: 0.625rem;
  --font-sans: var(--font-goodui-sans, "goodui Sans"), ui-sans-serif, system-ui, sans-serif;
  --font-heading: var(--font-goodui-display, "goodui Display"), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-2xs: 0 1px oklch(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
  --background: oklch(0.995 0.001 286);
  --foreground: oklch(0.145 0.008 286);
  --card: oklch(0.995 0.001 286);
  --card-foreground: oklch(0.145 0.008 286);
  --popover: oklch(0.995 0.001 286);
  --popover-foreground: oklch(0.145 0.008 286);
  --primary: oklch(0.21 0.006 286);
  --primary-foreground: oklch(0.985 0 286);
  --secondary: oklch(0.962 0.006 286);
  --secondary-foreground: oklch(0.21 0.008 286);
  --muted: oklch(0.962 0.005 286);
  --muted-foreground: oklch(0.5 0.01 286);
  --accent: oklch(0.955 0.004 286);
  --accent-foreground: oklch(0.25 0.003 286);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.915 0.005 286);
  --input: oklch(0.915 0.005 286);
  --ring: oklch(0.55 0.005 286);
  --chart-1: oklch(0.646 0.222 41.1);
  --chart-2: oklch(0.6 0.118 184.7);
  --chart-3: oklch(0.398 0.07 227.4);
  --chart-4: oklch(0.828 0.189 84.4);
  --chart-5: oklch(0.769 0.188 70.1);
  --sidebar: oklch(0.985 0.003 286);
  --sidebar-foreground: oklch(0.145 0.008 286);
  --sidebar-primary: oklch(0.21 0.006 286);
  --sidebar-primary-foreground: oklch(0.985 0 286);
  --sidebar-accent: oklch(0.955 0.004 286);
  --sidebar-accent-foreground: oklch(0.25 0.003 286);
  --sidebar-border: oklch(0.915 0.005 286);
  --sidebar-ring: oklch(0.55 0.005 286);
}

.dark {
  --background: oklch(0.155 0.007 286);
  --foreground: oklch(0.985 0.002 286);
  --card: oklch(0.215 0.008 286);
  --card-foreground: oklch(0.985 0.002 286);
  --popover: oklch(0.215 0.008 286);
  --popover-foreground: oklch(0.985 0.002 286);
  --primary: oklch(0.92 0.004 286);
  --primary-foreground: oklch(0.17 0.001 286);
  --secondary: oklch(0.275 0.008 286);
  --secondary-foreground: oklch(0.985 0.002 286);
  --muted: oklch(0.275 0.008 286);
  --muted-foreground: oklch(0.71 0.01 286);
  --accent: oklch(0.295 0.004 286);
  --accent-foreground: oklch(0.985 0.002 286);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.69 0.003 286);
  --chart-1: oklch(0.706 0.222 41.1);
  --chart-2: oklch(0.66 0.118 184.7);
  --chart-3: oklch(0.5 0.07 227.4);
  --chart-4: oklch(0.88 0.189 84.4);
  --chart-5: oklch(0.829 0.188 70.1);
  --sidebar: oklch(0.215 0.008 286);
  --sidebar-foreground: oklch(0.985 0.002 286);
  --sidebar-primary: oklch(0.92 0.004 286);
  --sidebar-primary-foreground: oklch(0.17 0.001 286);
  --sidebar-accent: oklch(0.295 0.004 286);
  --sidebar-accent-foreground: oklch(0.985 0.002 286);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.69 0.003 286);
}

@layer base {
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  h1 {
    font-size: 1.953rem;
    line-height: 1.15;
  }
  h2 {
    font-size: 1.563rem;
    line-height: 1.2;
  }
  h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  code, kbd, pre, samp {
    font-family: var(--font-mono);
  }
  /* Card depth (shadcn cards draw their border with a ring, so the shadow joins it). */
  [data-slot="card"] {
    --tw-shadow: var(--shadow-xs);
  }
}