How to Add Theme Switcher in Web Apps (Light, Dark & Custom Colors)

Introduction

In modern web design, offering theme customization is essential for creating personalized user experiences. One common feature is providing users the option to switch between different theme colors for a more aesthetically pleasing or comfortable browsing experience. In this article, we will explore the concept of Column Themes, where users can select different color schemes that modify the background of a page or section, offering themes such as default white, black, light pink, sky blue, and light yellow.

What is a Column Theme?

A Column Theme is a customizable visual style applied to different sections of a website or web application. These themes adjust the background color of the entire page or specific sections, making the design more dynamic and user-friendly. Themes are often selected by the user based on their preferences, or they can be applied automatically based on the system or device settings.

For instance, users might prefer a light theme (white background) during the day and a dark theme (black or dark background) at night. Similarly, some users may choose specific colors that suit their tastes, such as light pink, sky blue, or light yellow.

Benefits of Column Themes

User Customization: Allowing users to select themes provides them with the ability to personalize their browsing experience. This can help increase engagement and satisfaction.
Enhanced Accessibility: Different color themes help accommodate users with various visual preferences or needs (e.g., light backgrounds for those with low vision, dark themes for reduced eye strain).
Aesthetics & Brand Identity: The right theme can align with the branding of a website or application, creating a cohesive and professional look.

How to Implement Column Themes

1. Defining the Default Theme and Other Theme Options

Let’s define the following themes:

Default White Theme: A clean, light background (traditional design).
Black Theme: A dark background that’s easy on the eyes for night-time use.
Light Pink Theme: A soft, pastel theme with a calm vibe.
Sky Blue Theme: A refreshing, light blue theme for a cool and clean look.
Light Yellow Theme: A warm, pleasant yellow theme for a friendly, inviting atmosphere.

These themes will change the background color of the page (or any section you specify) when the user selects a new theme.

2. Setting Up HTML Structure

Here’s a basic HTML structure where users can select a theme, and the background color of the page will change accordingly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Column Themes</title>
    <style>
        /* Default white background theme */
        body.default {
            background-color: white;
            color: black;
        }

        /* Black theme */
        body.black {
            background-color: black;
            color: white;
        }

        /* Light pink theme */
        body.light-pink {
            background-color: #f8d7da;
            color: #333;
        }

        /* Sky blue theme */
        body.sky-blue {
            background-color: #b3e0ff;
            color: #333;
        }

        /* Light yellow theme */
        body.light-yellow {
            background-color: #fff9c4;
            color: #333;
        }

        .theme-selector {
            margin: 20px;
        }

        button {
            margin: 5px;
            padding: 10px;
            cursor: pointer;
            font-size: 16px;
        }
    </style>
</head>
<body class="default">

    <h1>Welcome to Theme Customization</h1>
    <p>Select a theme below:</p>

    <div class="theme-selector">
        <button onclick="changeTheme('default')">Default White</button>
        <button onclick="changeTheme('black')">Black</button>
        <button onclick="changeTheme('light-pink')">Light Pink</button>
        <button onclick="changeTheme('sky-blue')">Sky Blue</button>
        <button onclick="changeTheme('light-yellow')">Light Yellow</button>
    </div>

    <script>
        // Function to change theme
        function changeTheme(theme) {
            // Remove current theme class from body
            document.body.className = theme;
        }
    </script>

</body>
</html>

Explanation of the Example:

HTML Structure:

A simple page with a heading, description, and buttons for each theme option.

CSS Themes:

Each theme is defined in the style section. When a button is clicked, the background color of the page changes according to the theme selected (e.g., white, black, light-pink, etc.).

The body tag starts with the default class, applying the white background by default.

JavaScript Functionality:

The changeTheme function changes the className of the tag to the selected theme. This action updates the background color and text color dynamically.

User Experience and Benefits of Theme Switching

The ability for users to switch between themes provides several benefits:

Personalization:
Users can change the website's look to match their personal preferences. Whether they prefer a light, neutral, or dark theme, they can create a comfortable and engaging experience.
Accessibility:
High-contrast themes like black and white ensure readability for users with visual impairments.
The use of light pastel colors such as light pink or sky blue can be soothing to the eyes, especially in longer sessions.
For users who experience eye strain in dark environments, the dark theme (black) can be an ideal solution.
Aesthetic Appeal:
The availability of multiple colors gives the page a modern and adaptable aesthetic. This can be tailored for different times of day, like using a darker theme at night and a lighter one during the day.
Branding and Theming:
If you are developing a website or application for a specific brand, the color schemes can reflect the brand’s identity. For instance, you can integrate your company's signature colors into the theme options, providing users with a more consistent brand experience.

Implementing User Preferences (Persistent Theme)

To make the theme persist even when the user navigates to a new page or reloads the site, you can store the selected theme in the localStorage or cookies. This will ensure that the theme remains consistent across sessions.

Here’s an example of how to do that:

// Save selected theme to localStorage
function changeTheme(theme) {
    document.body.className = theme;
    localStorage.setItem("selectedTheme", theme); // Save theme to localStorage
}

// Apply saved theme on page load
window.onload = function() {
    let savedTheme = localStorage.getItem("selectedTheme");
    if (savedTheme) {
        document.body.className = savedTheme;
    }
}

Conclusion

Column themes are an excellent way to enhance user experience by allowing users to customize the look and feel of a website according to their preferences. By offering options like default white, black, light pink, sky blue, and light yellow, users can choose a theme that best suits their needs. This flexibility contributes to accessibility, personalization, and aesthetic appeal, making your website more engaging and user-friendly.

Moreover, saving the selected theme to localStorage ensures that the user’s preferences are respected across sessions, creating a seamless browsing experience. By implementing customizable themes, you’re not just improving the appearance of your site, but also boosting the overall satisfaction and engagement of your users.