Saturday, 1 February 2025

Lecture Notes Of Class 24: CSS Variables


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

Search This Blog

Powered by Blogger.