Lecture Notes Of Class 24: CSS Variables
Objective:
By the end of this class,
students will understand how to define and use CSS variables (custom
properties) to create reusable and dynamic styles in web development. They will
also implement a theme switcher using CSS variables.
Introduction to CSS
Variables
CSS variables, also known
as custom properties, allow developers to store and reuse values
throughout a stylesheet. This makes it easier to manage styles, improve
consistency, and create dynamic themes without modifying multiple CSS rules.
Why Use CSS Variables?
1.
Reusability
– Define a value once and reuse it throughout the CSS file.
2.
Maintainability
– Make global changes easily without modifying multiple rules.
3.
Dynamic Updates
– Change values using JavaScript or different class selectors.
4.
Theming
– Create light and dark mode themes with ease.
Defining and Using CSS
Variables
1. Declaring a CSS
Variable
CSS variables are defined
using the -- prefix and are typically placed inside the :root pseudo-class to
make them globally accessible.
Example: Defining
Variables
css
CopyEdit
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--font-size: 16px;
}
2. Using CSS Variables
To use a variable, the var()
function is applied inside a CSS property.
Example: Applying
Variables
css
CopyEdit
body {
background-color: var(--primary-color);
color: var(--text-color);
font-size: var(--font-size);
}
button {
background-color: var(--secondary-color);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
3. Overriding CSS
Variables
CSS variables can be
modified inside specific elements.
Example: Overriding a
Variable in a Class
css
CopyEdit
.dark-theme {
--primary-color: #2c3e50;
--secondary-color: #16a085;
--text-color: #ecf0f1;
}
Now, if we apply the .dark-theme
class to the <body>, the styles will change accordingly.
Lab Exercise: Create a
Theme Switcher using CSS Variables
Objective:
Implement a simple
light/dark theme switcher using CSS variables and JavaScript.
Steps to Follow:
1.
Define CSS variables
for colors in :root.
2.
Create a button
to toggle themes.
3.
Use JavaScript
to switch themes dynamically.
1. HTML Structure
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Theme Switcher</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>CSS Variables Theme Switcher</h1>
<button id="theme-button">Switch
Theme</button>
<script src="script.js"></script>
</body>
</html>
2. CSS Styling
(styles.css)
css
CopyEdit
:root {
--background-color: white;
--text-color: black;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: black;
color: white;
}
/* Dark theme */
.dark-theme {
--background-color: black;
--text-color: white;
}
3. JavaScript to Switch
Themes (script.js)
js
CopyEdit
document.getElementById("theme-button").addEventListener("click",
function() {
document.body.classList.toggle("dark-theme");
});
How It Works:
1.
The default theme is defined in :root.
2.
When the button is clicked, JavaScript
toggles the .dark-theme class on the <body>.
3.
The CSS variables inside .dark-theme
override the default styles, creating a dark mode effect.
Conclusion
- CSS
variables provide a flexible and maintainable
way to manage styles.
- Using
var(), we can apply variables throughout the
stylesheet.
- CSS
variables can be updated dynamically using
JavaScript, making them perfect for interactive features like theme
switching.
Assignment
1.
Modify the theme switcher to include more
themes (e.g., a blue theme, a green theme).
2.
Add an animation effect when switching
themes for a smoother transition.
Would you like me to
include additional exercises or variations on the theme switcher? 😊
2/2
You said:
answer this...Modify the
theme switcher to include more themes (e.g., a blue theme, a green theme). Add
an animation effect when switching themes for a smoother transition.
ChatGPT said:
ChatGPT
Here’s how you can modify
the theme switcher to include multiple themes (light, dark, blue, and green)
and add a smooth transition effect.
Modifications to the
Theme Switcher
1. Updated CSS (styles.css)
css
CopyEdit
:root {
--background-color: white;
--text-color: black;
--button-bg: black;
--button-text: white;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
transition: background-color 0.5s ease,
color 0.5s ease; /* Smooth transition */
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: var(--button-bg);
color: var(--button-text);
transition: background-color 0.3s ease,
color 0.3s ease; /* Button transition */
}
/* Dark Theme */
.dark-theme {
--background-color: black;
--text-color: white;
--button-bg: white;
--button-text: black;
}
/* Blue Theme */
.blue-theme {
--background-color: #3498db;
--text-color: white;
--button-bg: #1e3799;
--button-text: white;
}
/* Green Theme */
.green-theme {
--background-color: #2ecc71;
--text-color: white;
--button-bg: #27ae60;
--button-text: white;
}
2. Updated JavaScript (script.js)
js
CopyEdit
const themes = ["light",
"dark", "blue", "green"];
let currentThemeIndex = 0;
document.getElementById("theme-button").addEventListener("click",
function() {
// Remove existing theme classes
document.body.classList.remove(...themes.map(theme
=> `${theme}-theme`));
// Select the next theme
currentThemeIndex = (currentThemeIndex + 1)
% themes.length;
const newTheme = themes[currentThemeIndex];
// Apply the new theme class
if (newTheme !== "light") {
document.body.classList.add(`${newTheme}-theme`);
}
});
3. Updated HTML (index.html)
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Multi-Theme Switcher</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Multi-Theme Switcher</h1>
<button id="theme-button">Switch
Theme</button>
<script src="script.js"></script>
</body>
</html>
How It Works
1.
We define four themes: light (default),
dark, blue, and green.
2.
The JavaScript script cycles through the
themes in order when the button is clicked.
3.
The smooth transition effect makes the
theme change visually appealing.
4.
Each theme changes background color,
text color, and button styling.
Bonus: Add a Dropdown
Instead of a Button (Optional)
If you want users to
select a theme instead of cycling through them, replace the button with a
dropdown:
Updated HTML:
html
CopyEdit
<select id="theme-selector">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
Updated JavaScript:
js
CopyEdit
document.getElementById("theme-selector").addEventListener("change",
function(event) {
document.body.classList.remove(...themes.map(theme
=> `${theme}-theme`));
const selectedTheme = event.target.value;
if (selectedTheme !== "light") {
document.body.classList.add(`${selectedTheme}-theme`);
}
});
No comments:
Post a Comment