:root { --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; --font-body: system-ui, var(--font-fallback); --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; --color-white: #fff; --color-black: #000014; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; --color-gray-950: #090e18; --color-blue: #3894ff; --color-blue-dark: #1c5fac; --color-blue-rgb: 56, 148, 255; --color-green: #17c083; --color-green-rgb: 23, 192, 131; --color-orange: #ff5d01; --color-orange-rgb: 255, 93, 1; --color-purple: #882de7; --color-purple-rgb: 136, 45, 231; --color-red: #ff1639; --color-red-rgb: 255, 22, 57; --color-yellow: #ffbe2d; --color-yellow-rgb: 255, 190, 45; } :root { color-scheme: light; --theme-accent: var(--color-orange); --theme-text-accent: var(--color-orange); --theme-accent-rgb: var(--color-orange-rgb); --theme-accent-opacity: 0.1; --theme-divider: var(--color-gray-100); --theme-text: var(--color-gray-800); --theme-text-light: var(--color-gray-600); --theme-text-lighter: var(--color-gray-400); --theme-bg: var(--color-white); --theme-bg-hover: var(--color-gray-50); --theme-bg-offset: var(--color-gray-100); --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); --theme-code-inline-bg: var(--color-gray-100); --theme-code-inline-text: var(--theme-text); --theme-code-bg: var(--color-gray-700); --theme-code-text: var(--color-gray-100); --theme-navbar-bg: var(--color-gray-700); --theme-navbar-height: 3.5rem; --theme-sidebar-offset: var(--theme-navbar-height); --theme-selection-color: var(--color-orange); --theme-selection-bg: rgba( var(--color-orange-rgb), var(--theme-accent-opacity) ); } body { background: var(--theme-bg); color: var(--theme-text); } :root.scrolled { --theme-sidebar-offset: 0; } :root.theme-dark { color-scheme: dark; --theme-accent-opacity: 0.4; --theme-accent: var(--color-orange); --theme-text-accent: var(--color-orange); --theme-accent-rgb: var(--color-orange-rgb); --theme-divider: var(--color-gray-950); --theme-text: var(--color-gray-200); --theme-text-light: var(--color-gray-300); --theme-text-lighter: var(--color-gray-600); --theme-bg: var(--color-gray-800); --theme-bg-hover: var(--color-gray-600); --theme-bg-offset: var(--color-gray-950); --theme-code-inline-bg: var(--color-gray-900); --theme-code-inline-text: var(--color-white); --theme-code-bg: var(--color-gray-950); --theme-code-text: var(--color-white); --theme-navbar-bg: var(--color-gray-900); --theme-selection-color: var(--color-white); --theme-selection-bg: rgba( var(--color-purple-rgb), var(--theme-accent-opacity) ); } ::selection { color: var(--theme-selection-color); background-color: var(--theme-selection-bg); }