CSS Variables

All colors, dimensions, fonts, and other styles are defined via CSS variables. This allows for easy theme customization by overriding only the necessary values.

How to Override Variables

Create the file assets/sass/theme/_variables.scss:


// Light theme
:root[data-theme=light] {
    --accent: #6366f1;
    --background: #fafafa;
    --text: #1a1a2e;
}
 
// Dark theme
:root[data-theme=dark] {
    --accent: #818cf8;
    --background: #121212;
    --text: #e0e0e0;
}

Variables are set separately for the light (data-theme=light) and dark (data-theme=dark) themes.

Color Palette

Accent Color

The main brand color, used for buttons, links, active elements:


:root[data-theme=light] {
    --accent: #007aff;           // Main
    --accent-50: #eff6ff;        // Lightest
    --accent-100: #dbeafe;
    --accent-200: #bfdbfe;
    --accent-300: #93c5fd;
    --accent-400: #60a5fa;
    --accent-500: #3b82f6;       // Medium
    --accent-600: #2563eb;
    --accent-700: #1d4ed8;
    --accent-800: #1e40af;
    --accent-900: #1e3a8a;       // Darkest
    --accent-950: #172554;
}

Status Colors


:root[data-theme=light] {
    // Success
    --success: #22c55e;
    --success-100: #dcfce7;
    --success-500: #22c55e;
    --success-600: #16a34a;
    
    // Error
    --error: #ef4444;
    --error-100: #fee2e2;
    --error-500: #ef4444;
    --error-600: #dc2626;
    
    // Warning
    --warning: #f59e0b;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    
    // Info
    --info: #3b82f6;
    --info-100: #dbeafe;
    --info-500: #3b82f6;
    --info-600: #2563eb;
}

Interface Colors


:root[data-theme=light] {
    // Backgrounds
    --background: #ffffff;       // Main page background
    --secondary: #f8fafc;        // Secondary background (cards)
    --third: #f1f5f9;            // Tertiary background
    
    // Text
    --text: #0f172a;             // Main text
    --text-muted: #64748b;       // Muted text
    --text-400: #94a3b8;         // Even more muted
    
    // Transparencies
    --transp-1: rgba(0,0,0,0.06);    // Light shadow
    --transp-2: rgba(0,0,0,0.1);     // Medium shadow
    --transp-3: rgba(0,0,0,0.15);    // Noticeable shadow
}


:root[data-theme=dark] {
    // Backgrounds
    --background: #0f0f0f;
    --secondary: #1a1a1a;
    --third: #262626;
    
    // Text
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --text-400: #71717a;
    
    // Transparencies
    --transp-1: rgba(255,255,255,0.06);
    --transp-2: rgba(255,255,255,0.1);
    --transp-3: rgba(255,255,255,0.15);
}

Typography

Font Sizes


:root {
    --h1: clamp(2rem, 4vw, 2.5rem);      // Heading 1
    --h2: clamp(1.5rem, 3vw, 2rem);      // Heading 2
    --h3: clamp(1.25rem, 2.5vw, 1.5rem); // Heading 3
    --h4: clamp(1.1rem, 2vw, 1.25rem);   // Heading 4
    --h5: 1rem;                           // Heading 5
    --h6: 0.875rem;                       // Heading 6
    
    --p: 1rem;                            // Regular text (16px)
    --small: 0.875rem;                    // Small text (14px)
    --smaller: 0.75rem;                   // Very small (12px)
}

clamp() ensures responsiveness: the size scales depending on the screen width.

Font Family


:root {
    --font: 'Manrope', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

To change the font:


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
:root {
    --font: 'Inter', sans-serif;
}

Line Height


:root {
    --line-height: 1.6;
    --line-height-heading: 1.2;
}

Spacing


:root {
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
}

Usage:


.element {
    padding: var(--space-md);           // 16px
    margin-bottom: var(--space-lg);     // 24px
    gap: var(--space-sm);               // 8px
}

Border Radius


:root {
    --border05: 6px;     // Small (buttons, inputs)
    --border1: 12px;     // Medium (cards)
    --border2: 16px;     // Large (modals)
    --border3: 24px;     // Extra large
}

Usage:


.card {
    border-radius: var(--border1);
}
 
.btn {
    border-radius: var(--border05);
}
 
// Pill button
.btn-pill {
    border-radius: 50px;
}

Shadows


:root {
    --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

Full Example: Changing Palette


// assets/sass/theme/_variables.scss
 
// Emerald Palette
:root[data-theme=light] {
    // Accent — Emerald
    --accent: #10b981;
    --accent-50: #ecfdf5;
    --accent-100: #d1fae5;
    --accent-200: #a7f3d0;
    --accent-300: #6ee7b7;
    --accent-400: #34d399;
    --accent-500: #10b981;
    --accent-600: #059669;
    --accent-700: #047857;
    --accent-800: #065f46;
    --accent-900: #064e3b;
    
    // Backgrounds — Warm
    --background: #fefdfb;
    --secondary: #faf8f5;
    --third: #f5f3f0;
    
    // Text
    --text: #1c1917;
    --text-muted: #78716c;
}
 
:root[data-theme=dark] {
    --accent: #34d399;
    --accent-100: #064e3b;
    --accent-500: #10b981;
    --accent-600: #34d399;
    
    --background: #0c0a09;
    --secondary: #1c1917;
    --third: #292524;
    
    --text: #fafaf9;
    --text-muted: #a8a29e;
}

Using Variables


// assets/sass/app.scss
 
@import 'theme/variables';
 
.my-card {
    background: var(--secondary);
    color: var(--text);
    padding: var(--space-lg);
    border-radius: var(--border1);
    box-shadow: var(--shadow-medium);
    
    &:hover {
        box-shadow: var(--shadow-large);
    }
}
 
.my-button {
    background: var(--accent);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border05);
    font-size: var(--p);
    
    &:hover {
        background: var(--accent-600);
    }
}
 
.my-text {
    color: var(--text-muted);
    font-size: var(--small);
    line-height: var(--line-height);
}

Additional Variables

Hover/Focus


:root {
    --focus-ring: 0 0 0 3px var(--accent-200);
}
 
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

Blur Effect for Header


:root {
    --blurred-background: rgba(255, 255, 255, 0.8);
}
 
:root[data-theme=dark] {
    --blurred-background: rgba(15, 15, 15, 0.8);
}
 
.header {
    background: var(--blurred-background);
    backdrop-filter: blur(20px);
}