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
This article example shares the specific code of ...
This is a pretty cool feature that makes web page...
Application scenarios: One of the new requirement...
Table of contents The creation and confusion of n...
Here is a Vue single sign-on demo for your refere...
ins and del were introduced in HTML 4.0 to help au...
Table of contents 1. Introduction to SELinux 2. B...
v-model is a Vue directive that provides two-way...
The implementation of custom carousel chart using...
Generally speaking, the background color of a web ...
Table of contents accomplish: Summarize: Not much...
Online shopping mall database-product category da...
Table of contents Stabilization Throttling: Anti-...
Let me summarize a problem that I have encountere...
rep / egrep Syntax: grep [-cinvABC] 'word'...