Module 35 : CSS Mode Design – Implementing Mode with CSS Variables
Learning Objectives:
By the end of this module, learners will be able to:
Understand what CSS variables are and how they relate to mode.
Design a color system for light and dark themes using CSS custom properties.
Implement theme switching with minimal code.
Use JavaScript to toggle themes dynamically.
Build a fully functional mode switcher.
1. Introduction to CSS Variables
CSS variables (also known as custom properties) let you define reusable values directly in CSS.
Syntax:
css code
:root { --primary-bg: #ffffff; --primary-text: #000000; } body { background-color: var(--primary-bg); color: var(--primary-text); }
Explanation:
:root is the top-level element, like a global scope.
Variables begin with --.
Use var(--variable-name) to apply them.
2. Designing Light and Dark Theme with Variables
We define all theme colors inside :root (for light) and a class .dark-theme (for dark).
Example:
css code
/* Light Theme */ :root { --bg-color: #ffffff; --text-color: #1a1a1a; --link-color: #007bff; } /* Dark Theme */ .dark-theme { --bg-color: #121212; --text-color: #e0e0e0; --link-color: #90caf9; }
Applying the theme:
css
Copy code
body { background-color: var(--bg-color); color: var(--text-color); } a { color: var(--link-color); }
3. Switching Themes Using JavaScript
You can add or remove the .dark-theme class from <html> or <body> to toggle mode.
Example JavaScript:
html code
<button id="toggle-theme">Toggle Mode </button> <script> const toggleBtn = document.getElementById('toggle-theme'); toggleBtn.addEventListener('click', () => { document.documentElement.classList.toggle('dark-theme'); }); </script>
4. Saving User Preference with Local Storage
To remember user preference:
javascript code
const toggleBtn = document.getElementById('toggle-theme'); const root = document.documentElement; // Check saved theme if (localStorage.getItem('theme') === 'dark') { root.classList.add('dark-theme'); } toggleBtn.addEventListener('click', () => { root.classList.toggle('dark-theme'); const currentTheme = root.classList.contains('dark-theme') ? 'dark' : 'light'; localStorage.setItem('theme', currentTheme); });
5. Practical Exercise 1: Basic Theme Toggle
Task:
Create a webpage with text and links.
Implement a dark mode toggle button.
Use CSS variables and JavaScript for theme switching.
Deliverables:
HTML page
CSS with light and dark variables
JavaScript for theme toggle
6. Practical Exercise 2: Advanced Theme System
Challenge:
Add transitions for smooth theme switching.
Extend variables for buttons, cards, and headers.
Add system preference detection.
Bonus JS:
javascript code
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark && !localStorage.getItem('theme')) { document.documentElement.classList.add('dark-theme'); }
7. Build a Dark Mode Portfolio Page
Objective:
Build a personal portfolio website with light/dark themes using only CSS variables and JavaScript.
Requirements:
3 sections: About, Projects, Contact
Theme toggle button
Remember user preference
Responsive design
Smooth transitions
Steps:
Setup HTML structure
Create base CSS with :root variables
Define .dark-theme class
Bind JS toggle logic
Test with different devices and browsers
8. Best Practices
Keep color variables organized (backgrounds, texts, borders, UI components).
Use semantic naming: --card-bg, --button-text, etc.
Transition properties like background-color and color.
Don’t hardcode colors outside of variables.
9. Accessibility Tips
Ensure enough contrast in both modes.
Allow keyboard navigation for toggle button.
Use ARIA labels and accessible icons for mode.
10. Module Summary
You’ve learned how to:
Use CSS variables for theme-based design.
Switch themes dynamically using JS.
Store user preferences in local storage.
Create practical, accessible dark mode interfaces.
Assignment:
Create a responsive blog homepage with dark mode.
Must include:
Header, article cards, footer
Theme switcher with localStorage
CSS-only theme styling with variables
Smooth transitions
No comments:
Post a Comment