--- title: My Theme Switcher with live favicon update! published: true description: tags: //cover_image: https://direct_url_to_image.jpg --- ## My Theme Switcher ### With live updating favicon, also! > View live here https://organizedfellow.github.io/my-theme-switcher/ It seems that now just about every website has a "Theme Switcher" ability. Well, here's my version of the same thing 😉 SVGs were created in https://designer.gravit.io/ - ![favicon.svg!](https://organizedfellow.github.io/my-theme-switcher/images/favicon.svg "favicon.svg") - ![dark.svg!](https://organizedfellow.github.io/my-theme-switcher/images/dark.svg "dark.svg") - ![light.svg!](https://organizedfellow.github.io/my-theme-switcher/images/light.svg "light.svg") - ![icon-moon.svg!](https://organizedfellow.github.io/my-theme-switcher/images/icon-moon.svg "icon-moon.svg") - ![icon-sun.svg!](https://organizedfellow.github.io/my-theme-switcher/images/icon-sun.svg "icon-sun.svg") SVGs have been optimized using https://jakearchibald.github.io/svgomg/. Original source for the theme switcher came from [Luke Lowrey](https://lukelowrey.com/css-variable-theme-switcher/). But I came up with the favicon switching by sourcing from Stackoverflow, CSS Tricks, and various other places. If you would rather use png to support older browsers, you can use https://convertio.co/svg-png/. > The one thing I could NOT figure out - _how to preload the appropriate favicon based on localStorage. That's why I have favicon.svg set as the default_. If someone could figure that out for me, that would be awesome! --- Here are the icons to make it easier to get started with in your project. > /images/favicon.svg ``` ``` --- > /images/dark.svg ``` ``` --- > /images/light.svg ``` ``` --- > /images/icon-moon.svg ``` ``` --- > /images/icon-sun.svg ``` ``` --- This is my first contribution to the community. Let me know if you like it and please tell me how else I could optimize the JavaScript. I am still learning :) Enjoy friends!

jjaimealeman

My Theme Switcher with live favicon update!

Join Our Newsletter. No Spam, Only the good stuff.