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

Complete steps to quickly configure HugePages under Linux system

Recommend

Corporate website and column dictionary Chinese and English comparison Friends who make Chinese and English bilingual corporate websites need

name character name character information news te...

Detailed explanation of how to easily switch CSS themes

Complete steps to quickly configure HugePages under Linux system

CSS implementation code for drawing triangles (border method)

Sample code of uniapp vue and nvue carousel components

Linux operation and maintenance basic process management and environment composition analysis

Use of MySQL SHOW STATUS statement

How to set background blur with CSS

Detailed explanation of four solutions to floating problems in CSS layout

Common naming rules for CSS classes and ids

Explanation of MySQL's horizontal and vertical table partitioning

A look into tool-based websites: the definition of tool-based websites and typical case analysis (pictures and text)

Recommend

Corporate website and column dictionary Chinese and English comparison Friends who make Chinese and English bilingual corporate websites need

PyTorch development environment installation tutorial under Windows

Examples of optimization techniques for slow query efficiency in MySQL IN statements

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

A Deep Dive into the MySQL InnoDB Storage Engine

Full analysis of MySQL INT type

Docker configures the storage location of local images and containers

Detailed explanation of JS variable storage deep copy and shallow copy

Example of integrating Kafka with Nginx

Introduction to the role of HTML doctype

How to Use rsync in Linux

SQL group by to remove duplicates and sort by other fields

What to do if you forget your password in MySQL 5.7.17

Jenkins builds Docker images and pushes them to Harbor warehouse

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