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

How to use translate and transition in CSS3

Detailed explanation of how to easily switch CSS themes

How to use translate and transition in CSS3

Detailed steps for Linux firewall configuration (based on yum warehouse configuration)

Solution to the problem that VC6.0 cannot be used when installed on WIN10

Windows CVE-2019-0708 Remote Desktop Code Execution Vulnerability Reproduction Issue

In-depth explanation of Set and WeakSet collections in ES6

Linux kernel device driver address mapping notes

JavaScript Document Object Model DOM

An example of using Lvs+Nginx cluster to build a high-concurrency architecture

Best Practices for Deploying ELK7.3.0 Log Collection Service with Docker

JS realizes special effects of web page navigation bar

Recommend

Summary of Vue's cross-domain problem handling and solutions

Analysis of how to create a stored procedure in MySQL to add new fields to a data table

Modification of time zone problem of MySQL container in Docker

How to handle super large form examples with Vue+ElementUI

WeChat applet to obtain mobile phone number step record

MySQL can actually implement distributed locks

HTML+CSS to achieve layered pyramid example

Solution to nginx-ingress-controller log persistence solution

HTML left and right layout example code

Solve the problem that PhpStorm fails to connect to VirtualBox

Summary of Common Terms in CSS (Cascading Style Sheet)

Solution to the ineffective margin of div nested in HTML

How to solve the problem that MySQL cannot start because it cannot create PID

Detailed explanation of using CSS3's var() to change scss variable values at runtime

Mysql 8.0.18 hash join test (recommended)