color-scheme: dark light; and user enabled theme change with JS

Hi, I want to ask what the best way to do the following is: 1. I want to use

color-scheme: dark light;

color-scheme: dark light;

, 2. have JS recognize which scheme the user has enabled 3. based on which scheme the user has, a button would be used to change to the opposite theme. 4. I do not want to additionally define what dark/light theme would be like, like we would usually do without color-scheme in CSS. so I have this code

html {
  color-scheme: dark light;
}

html {
  color-scheme: dark light;
}

ChatGPT says I should have additionally defined what dark/light theme would be like, like we would usually do without color-scheme in CSS - which I do not want.

        html[data-theme="light"] {
            background-color: white;
            color: black;
        }

        html[data-theme="dark"] {
            background-color: black;
            color: white;
        }

        html[data-theme="light"] {
            background-color: white;
            color: black;
        }

        html[data-theme="dark"] {
            background-color: black;
            color: white;
        }

so with JS , I would detect their scheme and change the theme, but now it is made by calling to "data-theme" (which I don't know what it is) and calling on the additionally CSS definitions of dark and light (which I do not want to use).

// Detect the user's preferred color scheme
        var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;

        // Set the initial theme
        var currentTheme = prefersDarkScheme ? "dark" : "light";
        document.html.setAttribute("data-theme", currentTheme);

        // Add a listener for the button click
        document.getElementById("theme-switcher").addEventListener("click", function() {
            // Toggle the color scheme
            currentTheme = currentTheme === "dark" ? "light" : "dark";
            document.html.setAttribute("data-theme", currentTheme);
        });

// Detect the user's preferred color scheme
        var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;

        // Set the initial theme
        var currentTheme = prefersDarkScheme ? "dark" : "light";
        document.html.setAttribute("data-theme", currentTheme);

        // Add a listener for the button click
        document.getElementById("theme-switcher").addEventListener("click", function() {
            // Toggle the color scheme
            currentTheme = currentTheme === "dark" ? "light" : "dark";
            document.html.setAttribute("data-theme", currentTheme);
        });

4 Replies

Caps-look•11mo ago

I recommend changing the listener into function and giving the button onclick attribute with the name of the function in HTML. also change the setAttribute into "dataset.theme=currentTheme" you kinda already have working code(atleast from what I see cause I can't test it because I am on mobile)

Skriti možOP•11mo ago

the thing is, I don't want to use additional CSS I think I found the solution:

// Detect if the user has a preference for dark mode
let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

// Set the initial theme icon
document.getElementById('theme-icon').src = isDarkMode ? 'img/sun.png' : 'img/moon.png';

// Add an event listener to the theme switcher button
document.getElementById('theme-switcher').addEventListener('click', function() {
  // Toggle the dark mode variable
  isDarkMode = !isDarkMode;

  // Update the theme icon
  document.getElementById('theme-icon').src = isDarkMode ? 'img/sun.png' : 'img/moon.png';

  // Update the color scheme
  document.documentElement.style.colorScheme = isDarkMode ? 'dark' : 'light';
});

// Detect if the user has a preference for dark mode
let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

// Set the initial theme icon
document.getElementById('theme-icon').src = isDarkMode ? 'img/sun.png' : 'img/moon.png';

// Add an event listener to the theme switcher button
document.getElementById('theme-switcher').addEventListener('click', function() {
  // Toggle the dark mode variable
  isDarkMode = !isDarkMode;

  // Update the theme icon
  document.getElementById('theme-icon').src = isDarkMode ? 'img/sun.png' : 'img/moon.png';

  // Update the color scheme
  document.documentElement.style.colorScheme = isDarkMode ? 'dark' : 'light';
});

Caps-look•11mo ago

okay. BTW if you don't want to use the default browser color scheme, you will need to write something like this:

:root{
    --lightTheme-text: black;
    --lightTheme-background: white;
    /* etc... */
    --darkTheme-text: white;
    --darkTheme-background: black;
    /* etc... */
    /* Below are defaults */
    --text: var(--darkTheme-text);
    --background: var(--darkTheme-background);
    /* etc... */
}

/* The second color scheme*/
@media (prefers-color-scheme: light){
    :root{
        --text: var(--lightTheme-text);
        --background: var(--lightTheme-background);
        /* etc... */
    }
}

/* Your css */
/* Example: h3 will always have inversed colors */
h3{
    background: var(--text);
    color: var(--background);
}

:root{
    --lightTheme-text: black;
    --lightTheme-background: white;
    /* etc... */
    --darkTheme-text: white;
    --darkTheme-background: black;
    /* etc... */
    /* Below are defaults */
    --text: var(--darkTheme-text);
    --background: var(--darkTheme-background);
    /* etc... */
}

/* The second color scheme*/
@media (prefers-color-scheme: light){
    :root{
        --text: var(--lightTheme-text);
        --background: var(--lightTheme-background);
        /* etc... */
    }
}

/* Your css */
/* Example: h3 will always have inversed colors */
h3{
    background: var(--text);
    color: var(--background);
}

Skriti možOP•11mo ago

thank you!!

Gaming

Programming

color-scheme: dark light; and user enabled theme change with JS