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 <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 <html class="theme-default"> CSS Next, we need to style the two 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 // 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
name character name character information news te...
Anaconda Installation Anaconda is a software pack...
The table structure is as follows. There are only...
Table of contents Preface Optional Chaining Nulli...
Preface In MySQL, InnoDB belongs to the storage e...
Preface: Integer is one of the most commonly used...
Use the find command to find files larger than a ...
Table of contents Variable type and storage space...
background nginx-kafka-module is a plug-in for ng...
Document mode has the following two functions: 1. ...
Table of contents 1. Introduction 2. Installation...
need: Merge identical items of one field and sort...
1. Add skip-grant-tables to the my.ini file and r...
Table of contents Dockerfile pom.xml Jenkins Conf...
We know that when using HTML on NetEase Blog, we ...