Dark Mode For Your Website
With Cookies to Track Your Preference
Scroll down to learn how to do it!
Adding Dark Mode to Your Website
By using custom CSS and a few lines of JavaScript you can easily switch your website between predefined dark and light themes. First, you'll need to set your default theme by defining a whole page id, as is accomplished by the div block defined as 'light' on this page, with an id of 'main'. This will need to be done on every page within your site, for your alternate theme to work properly this id also needs to apply to all other page content
Embedding Toggle Switches
Toggle switches are checkboxes, so using an embed element you can add a switch to your webpage and style it however you'd like! Don't forget that you'll have to add this code to each page as well.
Custom CSS
Once you've defined your main theme, you can set your default and alternate theme colors by adding CSS code to the head tag of your website (just like the code found in this project's settings). Here you can define color attributes for any and all elements that you want to change with your theme. Only elements specified in this code will be affected by theme changes.
Adding JavaScript
Using JavaScript in your site's footer code you can add cookies that track a user's theme preference. When implemented, this will allow your site to remember the theme a user has chosen as they navigate between different pages of your site! You can find example code for this function in this project's settings.