Bits of .NET

Changing colors throughout CSS is tedious. CSS variables centralize values for easy updates.

Define Variables:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-base: 16px;
    --spacing-unit: 8px;
}

Use Variables:

button {
    background: var(--primary-color);
    font-size: var(--font-size-base);
    padding: calc(var(--spacing-unit) * 2);
}

Dynamic Theming:

/* Light theme (default) */
:root {
    --bg-color: white;
    --text-color: black;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

Change one variable, update entire site!