CSS Variables - Dev Showcase

Overview

The Dev Showcase portfolio uses CSS custom properties (CSS variables) defined in base.css for consistent theming and easy customization. Location: wwwroot/css/base.css

Root Variables

All CSS variables are defined in the :root selector, making them globally available:

:root {
    /* Background colors */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #111111;
    --color-bg-tertiary: #1a1a1a;
    
    /* Text colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-tertiary: rgba(255, 255, 255, 0.45);
    
    /* Accent colors */
    --color-accent-red: #ff1744;
    --color-accent-red-light: #ff4569;
    --color-accent-btn-hover: rgba(255, 255, 255, 0.08);
    
    /* Border colors */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: #404040;
    
    /* Transitions */
    --transition-speed: 0.3s;
    --transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Color Variables

Background Colors

—color-bg-primary

Value: #0a0a0a (near black) Usage: Main background color for the entire application.

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

Applied to:

Body background
Main content areas
Base layer elements

—color-bg-secondary

Value: #111111 (dark gray) Usage: Secondary background for elevated elements.

.card {
    background-color: var(--color-bg-secondary);
}

Applied to:

Cards and panels
Modal backgrounds
Sidebar elements
Language selector
Filter buttons (default state)

—color-bg-tertiary

Value: #1a1a1a (lighter dark gray) Usage: Tertiary background for interactive elements.

.filter button {
    background-color: var(--color-bg-tertiary);
}

Applied to:

Button default state
Hover states
Input fields
Nested containers

Text Colors

—color-text-primary

Value: #ffffff (white) Usage: Primary text color for headings and important content.

h1, h2, h3 {
    color: var(--color-text-primary);
}

Applied to:

All headings (h1-h6)
Active navigation items
Button active states
Emphasized text

—color-text-secondary

Value: rgba(255, 255, 255, 0.7) (70% opacity white) Usage: Secondary text for body content and descriptions.

p {
    color: var(--color-text-secondary);
}

Applied to:

Paragraph text
Button default text
Card descriptions
Subtitles

—color-text-tertiary

Value: rgba(255, 255, 255, 0.45) (45% opacity white) Usage: Tertiary text for less important content and placeholders.

.placeholder {
    color: var(--color-text-tertiary);
}

Applied to:

Placeholder text
Disabled states
Timestamps
Metadata

Accent Colors

—color-accent-red

Value: #ff1744 (bright red) Usage: Primary accent color for CTAs and active states.

.filter button.active {
    background-color: var(--color-accent-red);
}

a:hover {
    color: var(--color-accent-red);
}

Applied to:

Active filter buttons
Active language selector
Link hover states
Primary call-to-action buttons
Highlight elements

—color-accent-red-light

Value: #ff4569 (lighter red) Usage: Lighter variant of accent red for hover and focus states. Applied to:

Hover effects
Focus rings
Lighter accent variations

—color-accent-btn-hover

Value: rgba(255, 255, 255, 0.08) (8% opacity white) Usage: Subtle hover effect for buttons and interactive elements.

button:hover {
    background-color: var(--color-accent-btn-hover);
}

Applied to:

Button hover backgrounds
Interactive element hover states
Subtle highlights

Border Colors

—color-border

Value: rgba(255, 255, 255, 0.08) (8% opacity white) Usage: Default border color for subtle separations.

.card {
    border: 1px solid var(--color-border);
}

Applied to:

Card borders
Container borders
Language selector border
Dividers

—color-border-hover

Value: #404040 (medium gray) Usage: Border color for hover states.

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

Applied to:

Hover border effects
Active element borders
Focus borders

Transition Variables

—transition-speed

Value: 0.3s Usage: Standard transition duration across the application.

a {
    transition: color var(--transition-speed) var(--transition-easing);
}

Applied to:

Color transitions
Opacity changes
Transform animations
All interactive element transitions

—transition-easing

Value: cubic-bezier(0.25, 0.46, 0.45, 0.94) Usage: Standard easing function for smooth, natural animations.

button {
    transition: all var(--transition-speed) var(--transition-easing);
}

Characteristics:

Ease-out-like timing
Smooth acceleration/deceleration
Natural feeling motion

Applied to:

All transitions and animations
Hover effects
State changes
Transform animations

Usage Examples

Using Variables in CSS

.custom-element {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    transition: all var(--transition-speed) var(--transition-easing);
}

.custom-element:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-hover);
    color: var(--color-accent-red);
}

Overriding Variables

You can override variables for specific sections:

/* Override for specific component */
.dark-section {
    --color-bg-primary: #000000;
    --color-text-secondary: rgba(255, 255, 255, 0.6);
}

/* Override globally */
:root {
    --color-accent-red: #e91e63; /* Change accent color */
}

JavaScript Access

Access CSS variables from JavaScript:

// Get variable value
const accentColor = getComputedStyle(document.documentElement)
    .getPropertyValue('--color-accent-red');

// Set variable value
document.documentElement.style.setProperty('--color-accent-red', '#00ff00');

Theming with CSS Variables

Creating a Light Theme

Override variables to create a light theme:

[data-theme="light"] {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #eeeeee;
    --color-text-primary: #000000;
    --color-text-secondary: rgba(0, 0, 0, 0.7);
    --color-text-tertiary: rgba(0, 0, 0, 0.45);
    --color-border: rgba(0, 0, 0, 0.12);
    --color-border-hover: #cccccc;
}

Toggle theme with JavaScript:

document.documentElement.setAttribute('data-theme', 'light');

Creating Custom Color Schemes

Define custom accent colors:

/* Blue theme */
.theme-blue {
    --color-accent-red: #2196f3;
    --color-accent-red-light: #64b5f6;
}

/* Green theme */
.theme-green {
    --color-accent-red: #4caf50;
    --color-accent-red-light: #81c784;
}

/* Purple theme */
.theme-purple {
    --color-accent-red: #9c27b0;
    --color-accent-red-light: #ba68c8;
}

Variable Naming Convention

CSS variables follow a consistent naming pattern:

--{category}-{property}-{variant}

Examples:

--color-bg-primary: Color > Background > Primary
--color-text-secondary: Color > Text > Secondary
--color-accent-red-light: Color > Accent > Red (Light variant)
--transition-speed: Transition > Speed

Browser Support

CSS custom properties are supported in all modern browsers:

Chrome 49+
Firefox 31+
Safari 9.1+
Edge 15+

No fallbacks needed for modern deployments.

Benefits of CSS Variables

Maintainability

Change values in one place to update across entire application:

/* Change accent color globally */
:root {
    --color-accent-red: #ff5722; /* Orange red instead */
}

Consistency

Ensures consistent values across all components:

/* All transitions use same speed and easing */
transition: all var(--transition-speed) var(--transition-easing);

Dynamic Theming

Easy to implement theme switching:

function setTheme(theme) {
    const colors = themes[theme];
    Object.keys(colors).forEach(key => {
        document.documentElement.style.setProperty(key, colors[key]);
    });
}

Performance

CSS variables update efficiently without recalculating entire stylesheets.

Best Practices

Use Semantic Names

Prefer semantic names over descriptive:

/* Good */
--color-bg-primary: #0a0a0a;
--color-text-primary: #ffffff;

/* Avoid */
--color-black: #0a0a0a;
--color-white: #ffffff;

Organize variables by category:

:root {
    /* Backgrounds */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #111111;
    
    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
}

Document Variable Usage

Add comments for complex variables:

:root {
    /* Custom easing for smooth, natural motion */
    --transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

wwwroot/css/base.css: Variable definitions
wwwroot/css/site.css: Main stylesheet using variables
wwwroot/css/responsive.css: Responsive styles
All other CSS files inherit these variables

API

Frontend

Documentation Index

​Overview

​Root Variables

​Color Variables

​Background Colors

​—color-bg-primary

​—color-bg-secondary

​—color-bg-tertiary

​Text Colors

​—color-text-primary

​—color-text-secondary

​—color-text-tertiary

​Accent Colors

​—color-accent-red

​—color-accent-red-light

​—color-accent-btn-hover

​Border Colors

​—color-border

​—color-border-hover

​Transition Variables

​—transition-speed

​—transition-easing

​Usage Examples

​Using Variables in CSS

​Overriding Variables

​JavaScript Access

​Theming with CSS Variables

​Creating a Light Theme

​Creating Custom Color Schemes

​Variable Naming Convention

​Browser Support

​Benefits of CSS Variables

​Maintainability

​Consistency

​Dynamic Theming

​Performance

​Best Practices

​Use Semantic Names

​Group Related Variables

​Document Variable Usage

​Related Files

Build docs developers (and LLMs) love

Overview

Root Variables

Color Variables

Background Colors

—color-bg-primary

—color-bg-secondary

—color-bg-tertiary

Text Colors

—color-text-primary

—color-text-secondary

—color-text-tertiary

Accent Colors

—color-accent-red

—color-accent-red-light

—color-accent-btn-hover

Border Colors

—color-border

—color-border-hover

Transition Variables

—transition-speed

—transition-easing

Usage Examples

Using Variables in CSS

Overriding Variables

JavaScript Access

Theming with CSS Variables

Creating a Light Theme

Creating Custom Color Schemes

Variable Naming Convention

Browser Support

Benefits of CSS Variables

Maintainability

Consistency

Dynamic Theming

Performance

Best Practices

Use Semantic Names

Group Related Variables

Document Variable Usage

Related Files