Theme changer test Page
This is the main page

Color 1

Color 2

  1. Before using this code make your target website's colors all be dependent on CSS :root vars. CSS root: vars tutorial

  2. Change all icons in the website to font awesome icons which you can change color with css

  3. From index.html take the div with id="themeContainer" along with all contents and put it wherever you want the theme changer on your website

  4. Link the script "themechanger.js" right before the end of the body element in all documents that will use the theme changer

  5. Link the styles located in theme.css to all documents that will use the theme changer or copy and paste the styles into your own existing style document

  6. Make sure to style the theme changer to work where you put it in your website. Some styling and display work has intententionally been left out of this document so it is easier to embed in your own website.

  7. Check out a integrated and styled version at the bottom of every page on johnfoxweb.com

Color 4