Module 45 : CSS variables (custom properties)
Objectives
Understand what CSS variables (custom properties) are and how they work.
Create dynamic and themeable web designs using CSS variables.
Implement light and dark themes using CSS variables.
Apply variables in layouts, typography, and colors.
Switch themes using JavaScript.
1. Introduction to CSS Variables (Custom Properties)
What Are CSS Variables?
CSS variables (also called custom properties) allow you to store values in one place and reuse them throughout a stylesheet.
Syntax:
css
code
:root { --primary-color: #3498db; --text-color: #333; }
You can use them like this:
css
code
body { color: var(--text-color); background-color: var(--primary-color); }
Why Use CSS Variables for Theming?
Centralize design values.
Easily switch themes (dark/light, high-contrast, etc.).
Make your CSS more readable and maintainable.
Create dynamic themes using JavaScript or prefers-color-scheme.
2. Creating a Basic Theme
Step-by-Step Example:
html
code
<!DOCTYPE html> <html lang="en"> <head> <style> :root { --bg-color: #ffffff; --text-color: #000000; --primary-color: #3498db; } body { background-color: var(--bg-color); color: var(--text-color); font-family: Arial, sans-serif; padding: 20px; } .button { background-color: var(--primary-color); color: var(--bg-color); padding: 10px 20px; border: none; cursor: pointer; } </style> </head> <body> <h1>Hello, Theme!</h1> <button class="button">Click Me</button> </body> </html>
Explanation:
:root defines the global scope.
All colors are stored in variables.
Can change theme by changing variable values only.
3. Adding Dark Mode Theme
CSS Setup:
css
code
body.dark-theme { --bg-color: #121212; --text-color: #f0f0f0; --primary-color: #bb86fc; }
JavaScript Toggle:
html
code
<script> function toggleTheme() { document.body.classList.toggle('dark-theme'); } </script>
Add a Theme Switch Button:
html
code
<button onclick="toggleTheme()" class="button">Toggle Theme</button>
Explanation:
Adds or removes dark-theme class on the body.
CSS variables change based on the theme class.
All styles update automatically without redefining every rule.
4. Using prefers-color-scheme for Auto Detection
css
code
@media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --text-color: #ffffff; --primary-color: #bb86fc; } }
Explanation:
Automatically applies dark theme if user system is set to dark mode.
Improves accessibility and UX.
5. Practical Exercise
Exercise 1: Create a Themed Card Component
Goal: Build a card with themeable styles.
HTML:
html
code
<div class="card"> <h2>Themeable Card</h2> <p> This card adjusts based on the theme.</p> </div>
CSS:
css
code
.card { background: var(--bg-color); color: var(--text-color); border: 1px solid var(--primary-color); padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
Task:
Create both light and dark themes.
Add a toggle button to switch between them.
Ensure all elements use CSS variables.
Expected Output: Card appearance should fully adapt to light or dark mode with no change in HTML.
6. Dynamic Theme Switcher
Objective:
Build a theme switcher that allows selecting between light, dark, and solarized themes using a dropdown.
HTML:
html
code
<select onchange="switchTheme(this.value)"> <option value="light">Light</option> <option value="dark">Dark</option> <option value="solarized">Solarized</option> </select> <div class="content"> <h1>CSS Variable Theming</h1> <p>This is a live theme example.</p> </div>
CSS:
css
code
:root { --bg-color: #fff; --text-color: #000; --primary-color: #3498db; } body.light { --bg-color: #ffffff; --text-color: #000000; --primary-color: #3498db; } body.dark { --bg-color: #121212; --text-color: #ffffff; --primary-color: #bb86fc; } body.solarized { --bg-color: #fdf6e3; --text-color: #657b83; --primary-color: #b58900; } body { background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s ease; } .content { padding: 20px; }
JavaScript:
javascript
code
function switchTheme(theme) { document.body.className = theme; }
Goals:
Apply three different visual styles via CSS variables.
Switch instantly without reloading.
Use transitions to animate theme changes.
7. Best Practices and Tips
Always define fallbacks if needed: color: var(--my-var, black);
Keep all theme variables in :root or specific theme classes.
Avoid hardcoded values in component styles; use variables instead.
Document all variable names and purposes in a CSS comment block.
8. Summary
CSS Variables are a powerful tool for creating themeable and scalable designs.
Variables reduce duplication and simplify global design changes.
Dynamic theming is possible using classes, media queries, or JavaScript.
You can build robust theme systems for modern web apps using only native CSS and minimal JS.
No comments:
Post a Comment