Theme editor · CodeAtlas UI

Theme Editor Customize every token · changes auto-save
Live preview
Revenue
$48k
↑+12.4%
Users
3.8k
↓-2.1%
Buttons
Inputs
Role
Notifications
Dark mode
Display
Active Beta Archived
Active Pending Failed Draft
Filter + Search
CSS output
/* ── CodeAtlas UI — Custom Theme ──────────────────────────────────────────
 * Generated by Theme Editor.
 * Paste into your app.css after the @import of global.css.
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  --ca-brand-main: oklch(0.54 0.21 55);
  --ca-brand-light: oklch(0.63 0.189 55);
  --ca-brand-dark: oklch(0.43 0.199 55);
  --ca-brand-contrast: oklch(1 0 0);
  --ca-brand-fill: oklch(0.54 0.21 55);
  --ca-brand-fill-hover: oklch(0.48 0.199 55);
  --ca-surface-sunken: oklch(0.930 0.006 55);
  --ca-surface-base: oklch(0.955 0.005 55);
  --ca-surface-raised: oklch(0.980 0.003 55);
  --ca-surface-overlay: oklch(0.995 0.001 55);
  --ca-text-primary: oklch(0.200 0.012 55);
  --ca-text-secondary: oklch(0.420 0.010 55);
  --ca-text-disabled: oklch(0.620 0.008 55);
  --ca-text-hint: oklch(0.420 0.010 55);
  --ca-outline-subtle: oklch(0.200 0.010 55 / 0.08);
  --ca-outline-default: oklch(0.200 0.010 55 / 0.16);
  --ca-outline-strong: oklch(0.200 0.010 55 / 0.30);
  --ca-glass-bg: oklch(0.97 0.003 55 / 0.82);
  --ca-glass-tint-ultra-thin: oklch(0.970 0.003 55 / 0.15);
  --ca-glass-tint-thin: oklch(0.970 0.003 55 / 0.22);
  --ca-glass-tint: oklch(0.970 0.003 55 / 0.32);
  --ca-glass-tint-thick: oklch(0.975 0.003 55 / 0.52);
  --ca-glass-tint-chrome: oklch(0.980 0.002 55 / 0.72);
  --ca-glass-tint-solid: oklch(0.960 0.004 55);
  --ca-glass-border: oklch(0.700 0.008 55 / 0.28);
  --ca-glow-primary: oklch(0.54 0.21 55 / 0.12);
  --ca-glow-primary-strong: oklch(0.54 0.21 55 / 0.22);
  --ca-vibrancy-label: oklch(0.18 0.010 55 / 0.85);
  --ca-vibrancy-secondary: oklch(0.18 0.010 55 / 0.50);
  --ca-vibrancy-tertiary: oklch(0.18 0.010 55 / 0.25);
  --ca-vibrancy-fill: oklch(0.18 0.010 55 / 0.10);
  --ca-vibrancy-separator: oklch(0.18 0.010 55 / 0.05);
  --ca-scrim-color: oklch(0.12 0.010 55 / 0.38);
  --ca-tooltip-fg: oklch(0.970 0.003 55);
}
.dark {
  --ca-brand-main: oklch(0.63 0.206 55);
  --ca-brand-light: oklch(0.72 0.183 55);
  --ca-brand-dark: oklch(0.52 0.204 55);
  --ca-brand-contrast: oklch(1 0 0);
  --ca-brand-fill: oklch(0.58 0.206 55);
  --ca-brand-fill-hover: oklch(0.52 0.204 55);
  --ca-surface-sunken: oklch(0.115 0.006 55);
  --ca-surface-base: oklch(0.150 0.006 55);
  --ca-surface-raised: oklch(0.190 0.006 55);
  --ca-surface-overlay: oklch(0.235 0.006 55);
  --ca-text-primary: oklch(0.940 0.005 55);
  --ca-text-secondary: oklch(0.730 0.007 55);
  --ca-text-disabled: oklch(0.500 0.007 55);
  --ca-text-hint: oklch(0.700 0.008 55);
  --ca-glass-bg: oklch(0.14 0 0 / 0.80);
  --ca-glow-primary: oklch(0.63 0.21 55 / 0.16);
  --ca-glow-primary-strong: oklch(0.63 0.21 55 / 0.32);
  --ca-vibrancy-label: oklch(0.93 0.005 55 / 0.85);
  --ca-vibrancy-secondary: oklch(0.93 0.005 55 / 0.50);
  --ca-vibrancy-tertiary: oklch(0.93 0.005 55 / 0.25);
  --ca-vibrancy-fill: oklch(0.93 0.005 55 / 0.10);
  --ca-vibrancy-separator: oklch(0.93 0.005 55 / 0.05);
  --ca-tooltip-fg: oklch(0.93 0.005 55);
  --ca-outline-subtle: oklch(1 0 0 / 0.08);
  --ca-outline-default: oklch(1 0 0 / 0.14);
  --ca-outline-strong: oklch(1 0 0 / 0.26);
  --ca-glass-tint-ultra-thin: oklch(0.20 0 0 / 0.22);
  --ca-glass-tint-thin: oklch(0.22 0 0 / 0.34);
  --ca-glass-tint: oklch(0.24 0 0 / 0.44);
  --ca-glass-tint-thick: oklch(0.20 0 0 / 0.65);
  --ca-glass-tint-chrome: oklch(0.16 0 0 / 0.85);
  --ca-glass-tint-solid: oklch(0.18 0 0);
  --ca-glass-border: oklch(1 0 0 / 0.18);
  --ca-glass-shadow: 0 8px 40px oklch(0 0 0 / 0.50);
  --ca-scrim-color: oklch(0 0 0 / 0.50);
}

/* ── Border radius ─────────────────────────────────────────────────────── */
:root {
  --ca-radius-xs:   4px;
  --ca-radius-sm:   6px;
  --ca-radius-md:   10px;
  --ca-radius-lg:   14px;
  --ca-radius-xl:   20px;
  --ca-radius-pill: 999px;

  /* ── Spacing (base 4px) ──────────────────────────────────── */
  --ca-space-1:  4px;
  --ca-space-2:  8px;
  --ca-space-3:  12px;
  --ca-space-4:  16px;
  --ca-space-5:  20px;
  --ca-space-6:  24px;
  --ca-space-7:  28px;
  --ca-space-8:  32px;
  --ca-space-10: 40px;
  --ca-space-12: 48px;
  --ca-space-16: 64px;

  /* ── Page layout ──────────────────────────────────────────────────────── */
  --ca-page-px:      24px;
  --ca-page-px-sm:   16px;
  --ca-page-pt:      20px;
  --ca-page-gap:     20px;
  --ca-card-padding: 20px;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --ca-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ca-font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;

  --ca-font-size-h1:      2.25rem;
  --ca-font-size-h2:      1.875rem;
  --ca-font-size-h3:      1.5rem;
  --ca-font-size-h4:      1.25rem;
  --ca-font-size-h5:      1.063rem;
  --ca-font-size-h6:      0.938rem;
  --ca-font-size-body1:   0.938rem;
  --ca-font-size-body2:   0.813rem;
  --ca-font-size-caption: 0.75rem;
  --ca-font-size-label:   0.813rem;
  --ca-font-size-button:  0.875rem;
  --ca-font-size-micro:   0.688rem;
  --ca-font-size-dialog:  1rem;

  /* ── Shadows (light) ──────────────────────────────────────────────────── */
  --ca-shadow-xs: 0 1px 2px  oklch(0.25 0.008 70 / 0.07);
  --ca-shadow-sm: 0 2px 4px  oklch(0.25 0.008 70 / 0.09);
  --ca-shadow-md: 0 4px 16px oklch(0.25 0.008 70 / 0.12);
  --ca-shadow-lg: 0 8px 32px oklch(0.25 0.008 70 / 0.15);
  --ca-shadow-xl: 0 16px 48px oklch(0.25 0.008 70 / 0.19);

  /* ── Blur scale ───────────────────────────────────────────────────────── */
  --ca-blur-ultra-thin: blur(8px) saturate(160%);
  --ca-blur-thin:       blur(14px) saturate(175%);
  --ca-blur-regular:    blur(22px) saturate(190%);
  --ca-blur-thick:      blur(32px) saturate(200%);
  --ca-blur-chrome:     blur(44px) saturate(210%);
}

.dark {
  /* ── Shadows (dark — stronger) ──────────────────────────────────────── */
  --ca-shadow-xs: 0 1px 3px  oklch(0 0 0 / 0.3);
  --ca-shadow-sm: 0 2px 6px  oklch(0 0 0 / 0.35);
  --ca-shadow-md: 0 4px 20px oklch(0 0 0 / 0.4);
  --ca-shadow-lg: 0 8px 36px oklch(0 0 0 / 0.45);
  --ca-shadow-xl: 0 16px 56px oklch(0 0 0 / 0.5);
}