Detailed explanation of how to easily switch CSS themes

Detailed explanation of how to easily switch CSS themes

I recently added a very simple color scheme (theme) switcher to my personal website. You can toggle this simple color switcher in your website’s footer to see it in action. In case anyone else is looking to add functionality like this to their own site/project, I thought I'd write a quick post explaining how to do it. Let’s get started.

HTML

First, we need to include the "buttons" that will trigger the theme to switch based on the theme selected. (Note: you could always make these as options in a select element if that's better for you)

<div class="color-select">
    <button onclick="toggleDefaultTheme()"></button>
    <button onclick="toggleSecondTheme()"></button>
    <button onclick="toggleThirdTheme()"></button>
</div>

That's it! Don't worry too much about the onclick parameter for now, we'll come back to this when we add the JavaScript. The only item left is to add the default theme class to html element like this:

<html class="theme-default">

CSS

Next, we need to style the two color-select buttons with the custom color scheme that will change throughout the site. We'll start with the color scheme.

To make switching between these themes seamless, we’ll set the changing color sets as CSS variables:

.theme-default {
   --accent-color: #72f1b8;
   --font-color: #34294f;
}

.theme-second {
    --accent-color: #FFBF00;
    --font-color: #59316B;
}

.theme-third {
    --accent-color: #d9455f;
    --font-color: #303960;
}

body {
    background-color: var(--accent-color);
    color: var(--font-color);
}

Finally, we style the user-facing color palette:

.color-select button {
    -moz-appearance: none;
    appearance: none;
    border: 2px solid;
    border-radius: 9999px;
    cursor: pointer;
    height: 20px;
    margin: 0 0.8rem 0.8rem 0;
    outline: 0;
    width: 20px;
}

/* Style each swatch to match the corresponding theme */
.color-select button:nth-child(1) { background: #72f1b8; border-color: #34294f; }
.color-select button:nth-child(2) { background: #FFBF00; border-color: #59316B; }
.color-select button:nth-child(3) { background: #d9455f; border-color: #303960; }

JavaScript

We need to make each of the swatch buttons trigger its corresponding theme and swap out theme-default class that we originally attached to the main html element. We also need to store what the user selected localStorage , so when they reload or navigate to a different page, their selection persists.

// Set a given theme/color-scheme
function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}

// Toggle between color themes
function toggleDefaultTheme() {
    if (localStorage.getItem('theme') !== 'theme-default'){
        setTheme('theme-default');
    }
}
function toggleSecondTheme() {
    if (localStorage.getItem('theme') !== 'theme-second'){
        setTheme('theme-second');
    }
}
function toggleThirdTheme() {
    if (localStorage.getItem('theme') !== 'theme-third'){
        setTheme('theme-third');
    }
}

// Immediately set the theme on initial load
(function () {
    if (localStorage.getItem('theme') === 'theme-default') {
        setTheme('theme-default');
    }
    if (localStorage.getItem('theme') === 'theme-second') {
        setTheme('theme-second');
    }
    if (localStorage.getItem('theme') === 'theme-third') {
        setTheme('theme-third');
    }
})();

That's it! Now, it just depends on how customized you want each theme style to be. The possibilities are endless!

This concludes this article on how to easily switch CSS themes. For more information about switching CSS themes, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  In-depth explanation of MySQL isolation level and locking mechanism

>>:  Implementing login page based on layui

Recommend

PyTorch development environment installation tutorial under Windows

Anaconda Installation Anaconda is a software pack...

A brief discussion of 3 new features worth noting in TypeScript 3.7

Table of contents Preface Optional Chaining Nulli...

A Deep Dive into the MySQL InnoDB Storage Engine

Preface In MySQL, InnoDB belongs to the storage e...

Full analysis of MySQL INT type

Preface: Integer is one of the most commonly used...

Docker configures the storage location of local images and containers

Use the find command to find files larger than a ...

Detailed explanation of JS variable storage deep copy and shallow copy

Table of contents Variable type and storage space...

Example of integrating Kafka with Nginx

background nginx-kafka-module is a plug-in for ng...

Introduction to the role of HTML doctype

Document mode has the following two functions: 1. ...

How to Use rsync in Linux

Table of contents 1. Introduction 2. Installation...

SQL group by to remove duplicates and sort by other fields

need: Merge identical items of one field and sort...

What to do if you forget your password in MySQL 5.7.17

1. Add skip-grant-tables to the my.ini file and r...

Jenkins builds Docker images and pushes them to Harbor warehouse

Table of contents Dockerfile pom.xml Jenkins Conf...

How to use html table (to show the visual effect of web page)

We know that when using HTML on NetEase Blog, we ...