CSS Variables

Theme Variables

Typography

:root {
  font-size: 14px;
  --sl-font: "Inter", system-ui, sans-serif;
  --sl-text-body: 0.9rem;
  --sl-text-h1: 1.45rem;
  --sl-text-h2: 1.2rem;
  --sl-text-h3: 1.05rem;
  --sl-text-h4: 0.95rem;
  --sl-text-h5: 0.85rem;
  --sl-text-h6: 0.8rem;
  --sl-text-code: 0.8rem;
}

Layout

:root {
  --sl-content-width: 55rem;
  --sl-sidebar-width: 17rem;
}

Accent Colors

/* Dark mode (default) */
:root {
  --sl-color-accent-low: color-mix(in oklch, #fb923c 15%, #030712);
  --sl-color-accent: #fb923c;
  --sl-color-accent-high: #fb923c;
}

/* Light mode */
:root[data-theme="light"] {
  --sl-color-accent-low: color-mix(in oklch, #c2410c 10%, #f3f4f6);
  --sl-color-accent: #c2410c;
  --sl-color-accent-high: #c2410c;
}

Dark Mode Colors

:root {
  --sl-color-white: white;
  --sl-color-gray-1: var(--color-gray-200);
  --sl-color-gray-2: var(--color-gray-300);
  --sl-color-gray-3: var(--color-gray-400);
  --sl-color-gray-4: var(--color-gray-600);
  --sl-color-gray-5: var(--color-gray-700);
  --sl-color-gray-6: var(--color-gray-800);
  --sl-color-black: var(--color-gray-950);
}

Light Mode Colors

:root[data-theme="light"] {
  --sl-color-white: var(--color-gray-900);
  --sl-color-gray-1: var(--color-gray-800);
  --sl-color-gray-2: var(--color-gray-700);
  --sl-color-gray-3: var(--color-gray-500);
  --sl-color-gray-4: var(--color-gray-400);
  --sl-color-gray-5: var(--color-gray-300);
  --sl-color-gray-6: var(--color-gray-200);
  --sl-color-black: white;
}