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

Detailed explanation of how to easily switch CSS themes

Use of Linux sed command

Solution to the garbled code problem in MySQL 5.x

MySQL merge and split by specified characters example tutorial

Solution to "No input file specified" in nginx+php

Build a Docker private warehouse (self-signed method)

Nginx installation detailed tutorial

How to use html2canvas to convert HTML code into images

Tomcat first deployment web project process diagram

Web interview Vue custom components and calling methods

JavaScript common statements loop, judgment, string to number

Recommend

Native JS realizes compound motion of various motions

Summary of common optimization operations of MySQL database (experience sharing)

MySQL scheduled task example tutorial

MySQL Basic Tutorial Part 1 MySQL5.7.18 Installation and Connection Tutorial

Install Percona Server+MySQL on CentOS 7

The final solution to Chrome's minimum font size limit of 12px

Analysis and opinions on the design structure of the large picture on the homepage of Taobao Mall (picture)

Detailed explanation of the relationship between image format and design in web design

How to write memory-efficient applications with Node.js

MySQL partitions existing tables in the data table

Share 5 helpful CSS selectors to enrich your CSS experience

Docker builds python Flask+ nginx+uwsgi container

Web Design Experience: Self-righteous Web Designers

Use Docker to build a Git image using the clone repository

SQL Optimization Tutorial: IN and RANGE Queries