Skip to main content

CSS design tokens

custom.css defines the palette as --sk-* variables consumed by theme.module.css, so overriding one variable re-themes every component:

TokenDefaultPurpose
--sk-bg-deep#06050ePage background
--sk-bg-surface#0e0c1aCard/surface background
--sk-border#1a1730Borders and dividers
--sk-text#e8e6f0Primary text
--sk-text-dim#b0aec3Secondary/muted text
--sk-accent#6ee7b7Accent color
--sk-accent-dimrgba(110, 231, 183, 0.15)Accent background tint
--sk-purple#a78bfaSecondary accent
--sk-purple-dimrgba(167, 139, 250, 0.1)Secondary accent tint
--sk-monoJetBrains Mono stackMonospace font

Beyond the tokens, the style sheet also sets Infima-level values: a purple --ifm-color-primary scale, dark backgrounds (#0a0818 page, #110e20 surface), a blurred translucent navbar, footer and active-sidebar-item styling, and a JetBrains Mono import. The file's own header calls it "plumbing only." Component styles belong in theme.module.css.