skip to navigation skip to content

style switching: creating user-selectable themes for your website

posted on 06.29.25

before we start

i want to thank dynamicdrive for the amount of code it hosted as early as my highschool years, around a decade ago as of posting. it went down in september 2024 with no real fuss (according to an article by Alex Blackie).

the site had a lot of really cute widgets and codes, but the only one i have left is the style switcher, which has been pretty invaluable to me. here is a capture of the website as late as i could find with a functioning site layout, circa april 2024.

i've gone ahead and sent an email out to the former webmaster, we'll see if he sees it, but i hope he knows how much he's done for novice webmasters worldwide!

with that out of the way, we can get right into it!

what you'll need

the things you will require for this:

  • basic html comprehension (you have this or will have it)
  • the styleswitcher javascript (save this as a .js file)
  • a text editor
  • a website

how to 'install'

the best practice is to make a 'js' file in your root folder for the website and save this file to it. for example, as you can tell from the url, i've saved it there so i can call it with /js/styleswitch.js.

there are some options you can configure that i actually haven't touched at all, so they are otherwise untested. you generally will have it on 'manual' setting, meaning the user has to pick it themself, but it does provide a 'random' setting, which i want to dissuade from using just for the purpose of accessibility. that said, i can't really stop you...

next, in the head tags of your website, you'll have to embed it between your head tags like this:

<head>
    <script src="/js/styleswitch.js" type="text/javascript">
    /*********************************************** 
    * Style Sheet Switcher v1.1- (c) Dynamic Drive DHTML code library
    * Please keep this notice intact
    ***********************************************/
    </script>
</head>

(Notably, I have removed the link to dynamic drive since it's defunct, but if you want to link to an older version you could always use latest the link via the wayback machine.

next, create your stylesheets. you want one 'master' stylesheet that sets sizing and similar options you want to have 'universally' between themes, and then you want a default theme and its alternate versions. for this example, that means i have 'master', 'dark', 'light', and 'dim', so four total stylesheets. i save those to my /css folder.

now you can add these lines to your site's head tag, which now looks like this:

<head>
	<link rel="stylesheet" type="text/css" href="/css/master.css" />
    <link rel="stylesheet" type="text/css" media="screen" title="dark" href="/css/dark.css" />
    <link rel="alternate stylesheet" type="text/css" media="screen" title="light" href="/css/light.css" />
    <link rel="alternate stylesheet" type="text/css" media="screen" title="dim" href="/css/dim.css" />
    <script src="/js/styleswitch.js" type="text/javascript">
    /*********************************************** 
    * Style Sheet Switcher v1.1- (c) Dynamic Drive DHTML code library
    * Please keep this notice intact
    ***********************************************/
    </script>
</head>

notice here that the dark theme is called as 'stylesheet', while the following alternates are called as 'alternate stylesheet'. that's because the dark one is called by default, and then the others are loaded in on top of it.

each stylesheet also has an ID title - i made these match the filenames, but you can differ them from the filename if you want. they should probably be one word for simplicity.

then, in the area you want the dropdown for your theme to be, you'll want to input this code:

<form id="switchform" aria-label="styleswitcher">
	<select name="switchcontrol" id="siteswitcher" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
		<option value="dark">dark</option>
		<option value="light">light</option>
		<option value="dim">dim</option>
	</select>
</form>

this is a "form" that acts as a dropdown menu that allows you to pick between three options: dark, light, and dim. the option value is whatever that theme's ID title name is in the header. i also have a dummy 'select style...' option since i still don't know how to make it display the actual selected style. (the code implies it SHOULD be doing that though!!!) shoutouts to @lektor_@mastodon.social and @keeri@pawb.fun, an edit to the code now causes this to work correctly as of 6/30/25!

how does this work, anyway??

one word: cookies! i know, i know - people hate cookies, and rightfully so, when so many of them are used to track activity. rest assured that this one's strictly for the theme option, and isn't stored serverside at all. you can check the code itself and see it doesn't transmit any data at all.

okay how do i add new stylesheets after this?

simply add a new 'option value' line identical to the pattern of the others, as well as another "alternate stylesheet" line like the others in your head tag. there's no other changes needed - the size of its array is auto-calculated and doesn't need to be changed in the code or anything weird like that. you can remove them in the same way too!

tags... webdev guide