Skip to content

A simple javascript to toggle your website between [ πŸ–₯ system theme | πŸŒ™ dark mode | β˜€οΈ light mode ]

License

Notifications You must be signed in to change notification settings

avinashjoshi/color-scheme-toggle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

2 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Color Scheme Toggle [ πŸ–₯ | πŸŒ™ | β˜€οΈ ]

A simple javascript to toggle your website between [ πŸ–₯ system theme | πŸŒ™ dark mode | β˜€οΈ light mode ]

  • Defaults to system theme
  • Your preference is saved to local storage

Usage

  1. Add your custom button for the toggle followed by the color-scheme-toggle.js script:
<button id="color-scheme-toggle"></button>
<script src="color-scheme-toggle.js"></script>

The script could even go before the closing body tag, but not before the button

  1. Follow color-scheme-toggle.css as an example (or the sample css provided below) and adapt in your stylesheet.

Under the hood

The script adds data-theme="dark" to the html tag. You can use css like this:

:root {
    --body-bg: white;
    --body-color: black;
}

:root[data-theme='dark'] {
    --body-bg: black;
    --body-color: white;
}

body {
    background-color: var(--body-bg);
    color: var(--body-color);
}

Demo

Visit the Demo page to see this in action!

Browser compatibility

Sticky footer

I simply followed the recipe laid out by Mozilla. This does not seem to work on Firefox.