How to Make a Custom Website Theme Changer!
This will definitely amaze your site's visitors!My website has gone through many theme changes over the past year (almost 2 years!) and I have painstakingly wrote a lot of CSS code. So I've seen some websites with theme selectors and I find them a good solution to my problem! So I'm gonna teach you how to make your own theme changer with many themes to choose from in CSS and JS! Here's a screenshot of my theme changer playground!
First you need to create a base CSS file and a CSS file for each theme you want. Add the following code in the <head> tags of your page once you created the CSS files.
Next, you need to add the dropdown selection to choose the theme and a script tag to add the CSS code.
You can add however many themes you like. But make sure whenever you add a new theme, in the dropdown, make the <option> tag's value attribute the same as the theme's CSS file without the .css. For example, If I were to add a blue theme, the blue theme CSS file would be named blue.css and I would add the following to the dropdown (<option> tag):
Notice how the option value is blue and the theme CSS file is named blue.css. Now that the HTML and CSS is out of the way, let's get to the JavaScript! So create a JavaScript file and add the following:
First, what you have to do is in the following line, replace "add default CSS file here" with what theme you want people who first visit your site to have.
And there you have it! You have a working theme selector in HTML, CSS, and JS! If you have any questions, email me at itsmeariu@gmail.com!
-ariu, 07/17/2023