Theming
Custom Colors
Build your own theme from scratch.
Want a color the presets don't cover? Build your own. The trick is to set the accent base correctly and let the derived variables follow.
Step 1 — choose your accent
Pick a hex color and convert it to RGB. Set both in the active :root:
variables.css
:root {
--accent: #A855F7; /* your hex */
--accent-rgb: 168, 85, 247; /* same color in r, g, b */
}
--accent and --accent-rgbmust be the same color. The derived transparencies use --accent-rgb.Step 2 — set the supporting shades
variables.css
--accent-light: #C99CFB; /* a lighter tint */
--accent-dark: #6B21A8; /* a darker shade */
--accent-deep: #581C87; /* the deepest shade */
Tip: pick light ≈ accent + white, dark/deep ≈ accent + black.
Step 3 — set the radial colors
These drive the soft background glow. Use a dark and a light RGB pair:
variables.css
--accent-radial-from: 107, 33, 168; /* darker, RGB */
--accent-radial-to: 201, 156, 251; /* lighter, RGB */
Step 4 — inset & border
variables.css
--accent-inset-rgb: 168, 85, 247; /* usually same as accent */
--accent-border-rgb: 107, 33, 168; /* usually the dark shade */
Step 5 — hue rotate (optional)
--hue-rotate shifts certain hue-rotated elements. Start at 0deg and only adjust if a specific element looks off-color.
variables.css
--hue-rotate: 0deg;
Full custom example (Purple)
variables.css
:root {
--accent: #A855F7;
--accent-rgb: 168, 85, 247;
--accent-light: #C99CFB;
--accent-dark: #6B21A8;
--accent-deep: #581C87;
--accent-muted: rgba(var(--accent-rgb), 0.35);
--accent-glow: rgba(var(--accent-rgb), 0.75);
--accent-soft: rgba(var(--accent-rgb), 0.25);
--accent-faint: rgba(var(--accent-rgb), 0.55);
--accent-65: rgba(var(--accent-rgb), 0.65);
--accent-radial-from: 107, 33, 168;
--accent-radial-to: 201, 156, 251;
--accent-radial-05: radial-gradient(100.03% 100% at 50.33% 0%, rgba(var(--accent-radial-from), 0.05) 0%, rgba(var(--accent-radial-to), 0.05) 100%);
--accent-radial-12: radial-gradient(100.03% 100% at 50.33% 0%, rgba(var(--accent-radial-from), 0.12) 0%, rgba(var(--accent-radial-to), 0.12) 100%);
--accent-radial-14: radial-gradient(100.03% 100% at 50.33% 0%, rgba(var(--accent-radial-from), 0.14) 0%, rgba(var(--accent-radial-to), 0.14) 100%);
--accent-inset-rgb: 168, 85, 247;
--accent-inset: rgba(var(--accent-inset-rgb), 0.25);
--accent-border-rgb: 107, 33, 168;
--accent-border: rgba(var(--accent-border-rgb), 0.35);
--accent-gradient: linear-gradient(95deg, rgba(var(--accent-rgb), 0.75) 33.37%, rgba(var(--accent-rgb), 0) 100%);
--accent-gradient-text: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
--accent-gradient-icon: linear-gradient(180deg, var(--accent) 0%, var(--accent-light) 100%);
--accent-gradient-border: linear-gradient(180deg, rgba(var(--accent-border-rgb), 0.35) 0%, var(--accent) 100%);
--hue-rotate: 0deg;
--danger: #FF5E1F;
--danger-rgb: 255, 94, 31;
--danger-dark: #993515;
--danger-soft: rgba(var(--danger-rgb), 0.45);
--danger-bg: rgba(var(--danger-rgb), 0.05);
--danger-bg-hover: rgba(var(--danger-rgb), 0.12);
--danger-glow: rgba(255, 119, 95, 0.75);
--danger-gradient-border: linear-gradient(180deg, rgba(var(--danger-rgb), 0.35) 0%, var(--danger) 100%);
--panel-border-rgb: 8, 10, 2;
--panel-border: rgba(8, 10, 2, 0.32);
--panel-radius: 0.521vw;
--panel-border-width: 0.26vw;
}
Copy a preset block as your starting point and only change the
--accent* and --accent-radial* values — that's 90% of a retheme.You normally leave the
--danger* and --panel* values alone. Danger stays red on purpose so destructive actions are recognizable.