Modern Docusaurus Dark Theme — CSS Reference

Dark-first, Vercel/Linear-inspired theme built for SKIC Playground docs. Full source lives at /opt/data/documentation/src/css/custom.css.

Design Decisions

Font: Geist (by Vercel) via CDN + Geist Mono for code
Accent: Indigo #6366f1 (light) / #818cf8 (dark)
Background: #0a0a0a (near-black, not pure black)
Surface: #111111 for cards, sidebars
Text: #ededed primary, #a1a1a1 secondary

Key Overrides

Dark mode base palette

[data-theme='dark'] {
  --ifm-color-primary:          #818cf8;
  --ifm-background-color:       #0a0a0a;
  --ifm-background-surface-color: #111111;
  --ifm-navbar-background-color: rgba(10, 10, 10, 0.85);
  --ifm-color-content:          #ededed;
  --ifm-color-content-secondary: #a1a1a1;
  --ifm-color-emphasis-100:     #1a1a1a;
  --ifm-color-emphasis-200:     #222222;
  --ifm-color-emphasis-300:     #333333;
}

Typography

:root {
  --ifm-font-family-base:      'Geist', 'Inter', system-ui, sans-serif;
  --ifm-font-family-monospace: 'Geist Mono', 'Fira Code', monospace;
  --ifm-font-size-base:        15px;
  --ifm-line-height-base:      1.7;
  --ifm-heading-letter-spacing: -0.02em;
  --ifm-h1-font-size:          2.25rem;
}
h2 { border-bottom: 1px solid var(--ifm-color-emphasis-200); }

.navbar {
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme='dark'] .navbar { background: rgba(10, 10, 10, 0.85); }

Table Styling

table { border: 1px solid var(--ifm-color-emphasis-200); border-radius: 8px; overflow: hidden; }
thead { background: var(--ifm-color-emphasis-100); }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
tbody tr:hover { background: var(--ifm-color-emphasis-100); }

Hero Section (homepage)

.heroTitle {
  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 60%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

App Cards (dark glass style)

.appCard {
  background: #111111;
  border: 1px solid #222222;
  border-radius: 12px;
  transition: all 0.15s ease;
}
.appCard:hover {
  border-color: #6366f1;
  background: #161625;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,102,241,0.12);
}

Prism Code Theme

Use oneDark for both light and dark (visually consistent in docs):

prism: {
  theme: prismThemes.oneDark,
  darkTheme: prismThemes.oneDark,
  additionalLanguages: ['bash', 'python', 'sql', 'yaml', 'json', 'typescript', 'docker'],
},

Announcement Bar

announcementBar: {
  id: 'wip',
  content: '🚧 Under active development',
  backgroundColor: '#1a1a2e',
  textColor: '#818cf8',
  isCloseable: true,
},

2.9 KiB Raw Permalink Blame History