Back to Snippets

CSS Custom Properties for Theme Colors

CSS CSS & Tailwind April 6, 2026

Set up CSS custom properties for a complete dark theme — brand colors, neutrals, typography, and spacing with clamp() for fluid sections.

Snippet Stats

Lines 33
Characters 769
Read 1 min
css • 33 lines
Report 
:root {
    /* Brand colors */
    --color-primary:   #4B9EFF;
    --color-secondary: #00D9A0;
    --color-accent:    #FF6B35;

    /* Neutrals */
    --color-bg:     #0A1628;
    --color-surface: rgba(255, 255, 255, 0.05);
    --color-border:  rgba(75, 158, 255, 0.15);
    --color-text:    #F0F4FF;
    --color-muted:   #8B9AB5;

    /* Typography */
    --font-heading: 'JetBrains Mono', monospace;
    --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
    --font-size-base: 1rem;

    /* Spacing */
    --space-section: clamp(4rem, 8vw, 8rem);
}

/* Usage */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.card:hover {
    border-color: var(--color-primary);
}

Found an issue with this snippet? Help us improve by reporting it. Report it →

Related Snippets

View all
HTML
Responsive 3-column card grid with Tailwind CSS — dark theme, hover effects, icon badges, and smooth transitions.

Responsive Tailwind Card Grid