JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>Some Text</p>
    <button onclick="toggle_theme();">Change Theme!</button>
    <button onclick="remove_theme();">Remove Theme!</button>

CSS

:root {
  --main-background: white;
  --text-color: black;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --main-background: black;
    --text-color: white;
  }
}

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

* {
  color: var(--text-color);
}

JavaScript

/*
    JS file for managing light / dark themes
    The toggle_theme(); function toggles the saved theme and updates the screen accordingly
    The remove_theme(); function removes the theme from localstorage and only updates the screen if it doesn't match the system settings
    The window.matchMedia(); function call watches for updates to system settings to keep localstorage settings accurate
*/

function get_system_theme() {
    /*
        Function for getting the system color scheme
    */

    theme = "dark";
    if (window.matchMedia("(prefers-color-scheme: light)").matches) {
        theme = "light";
    }

    return theme;
}

function toggle_saved_theme() {
    /*
        Function for toggling between the two themes saved to local storage
        Returns:
            Value stored in local storage
    */

    // Gets Current Value
    if (localStorage.getItem("theme")) {
        theme = localStorage.getItem("theme");
    }
    else {
        theme = get_system_theme();
    }

    // Sets the stored value as the opposite
    if (theme === "light") {
        localStorage.setItem("theme", "dark");
    }
    else {
        localStorage.setItem("theme", "light");
    }

    return localStorage.getItem("theme");
}

function switch_theme_rules() {
    /*
        Function for switching the rules for perfers-color-scheme
        Goes through each style sheet file, then each rule within each stylesheet
        and looks for any rules that require a prefered colorscheme, 
        if it finds one that requires light theme then it makes it require dark theme / vise
        versa. The idea is that it will feel as though the themes switched even if they haven't. 
    */

    for (var sheet_file = 0; sheet_file < document.styleSheets.length; sheet_file++) {
        try {
            for (var sheet_rule = 0; sheet_rule < document.styleSheets[sheet_file].cssRules.length; sheet_rule++) {
                rule = document.styleSheets[sheet_file].cssRules[sheet_rule];

        ...