Custom Theme Switcher for Web Apps

Creating a Custom Theme Switcher for Your Web App

Introduction

Imagine you’ve just stepped into a room painted in your favorite color. It’s vibrant, comfortable, and speaks to your taste. Now, imagine being able to change that room’s color to suit your mood or time of day with a simple switch. This is precisely what a theme switcher does for your web application - it allows users to customize their experience by changing the visual style of your site. In this guide, we'll walk through creating a custom theme switcher, breaking down the code into manageable steps, and explaining how each part contributes to the final functionality.

Prerequisites

And of course, before diving in, make sure you have the following:

Basic HTML/CSS/JavaScript knowledge
Code editor (e.g., Visual Studio Code)
Local web server (optional, for testing)

Step 1: Setting Up Your HTML Structure

We'll begin by establishing the HTML framework for our theme switcher. This includes creating a header with clickable theme switches and a container to display content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Theme Switcher</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" id="theme-link" href="">
</head>
<body>
    <header>
        <h1>Custom Theme Switcher</h1>
        <div class="theme-switches">
            <div data-theme="bright" class="switch" id="switch-bright"></div>
            <div data-theme="blue-sky" class="switch" id="switch-blue-sky"></div>
            <div data-theme="rose" class="switch" id="switch-rose"></div>
            <div data-theme="midnight" class="switch" id="switch-midnight"></div>
        </div>
    </header>

    <div class="container">
        <div class="box">
            <img src="https://images.unsplash.com/photo-1597926588114-2d9c1190b5c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=923&q=80" alt="Placeholder" class="image">
            <div class="text">
                <h3>A Sweet Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </div>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

Explanation:

The <link rel="stylesheet" id="theme-link" href="> tag is a placeholder for dynamically changing the theme. We’ll update this link through JavaScript to apply different stylesheets based on user selection.

Step 2: Crafting Your CSS Files

Next, let’s define the styles for our themes. Each CSS file will describe a unique visual style.

bright.css: A clean, light theme.

:root {
  --back-color: #f4f4f4;
  --primary-color: #333;
  --header-back: #ddd;
  --header-text: #333;
}

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

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}

blue-sky.css: A refreshing blue theme.

:root {
  --back-color: #c3dafe;
  --primary-color: #3c366b;
  --header-back: #5f718d;
  --header-text: #eee;
}

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

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}

rose.css: A vibrant rose theme.

:root {
  --back-color: #f4c4c4;
  --primary-color: #a82a6f;
  --header-back: #c14f6a;
  --header-text: #ffffff;
}

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

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}

midnight.css: A dark, soothing theme.

:root {
  --back-color: #2e2e2e;
  --primary-color: #e0e0e0;
  --header-back: #1f1f1f;
  --header-text: #cfcfcf;
}

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

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}

Explanation:

Each CSS file defines a set of custom properties (variables) for colors and applies them to the body, header, and other elements. This makes it easy to switch between different themes by changing the stylesheet.

Step 3: Implementing the JavaScript

Finally, let’s add functionality to dynamically switch themes and remember the user’s preference using JavaScript.

let switches = document.getElementsByClassName('switch');
let style = localStorage.getItem('style');

if (style == null) {
  setTheme('bright'); // Default theme
} else {
  setTheme(style);
}

for (let i of switches) {
  i.addEventListener('click', function () {
    let them = this.dataset.theme;
    setTheme(theme);
  });
}

function setTheme(theme) {
  if (theme == 'bright') {
    document.getElementById('theme-link').href = './themes/bright.css';
  } else if (theme == 'blue-sky') {
    document.getElementById('theme-link').href = './themes/blue-sky.css';
  } else if (theme == 'rose') {
    document.getElementById('theme-link').href = './themes/rose.css';
  } else if (theme == 'midnight') {
    document.getElementById('theme-link').href = './themes/midnight.css';
  }
  localStorage.setItem('style', theme);
}

What does the chunk of code entail:

Initialize Theme: Retrieves the saved theme from localStorage and sets it as the current theme. If none is found, defaults to 'bright'.
Event Listeners: Each switch element listens for clicks and updates the theme accordingly.
Set Theme Function: Updates the stylesheet based on the selected theme and saves the choice to localStorage.

Moving Forward

You now have a functional theme switcher that allows users to personalize their experience and have their choice remembered across sessions. The difficulty here is managing multiple stylesheets and ensuring they switch seamlessly, but don’t worry—the way about it is to keep your code organized and use localStorage to persist user preferences.

Conclusion

Adding a custom theme switcher makes your app feel more personal and user-friendly. By following these steps, you can set up a cool feature that lets users pick their favorite look and feel. Just keep your code tidy and well-commented so it’s easy to manage and expand later on.

"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

Creating a Custom Theme Switcher for Your Web App

Table of contents

Creating a Custom Theme Switcher for Your Web App