Set Dark/Light Mode Default?

[wbollock]

Hi all,

Apologize if the wrong place. Trying to set light mode the default but obviously still allow dark mode switching.

I was looking at this thread for a different theme but didn't seem to have a similar file structure.

Here is the code I was looking at in bundle.js:

{var e=document.getElementById("dark-mode-toggle"),t=document.getElementById("dark-mode-theme");function n(n){localStorage.setItem("dark-mode-storage",n),"dark"===n?(t.disabled=!1,e.className="fas fa-sun"):"light"===n&&(t.disabled=!0,e.className="fas fa-moon")}window.matchMedia("(prefers-color-scheme: light)").matches?n(localStorage.getItem("dark-mode-storage")||"dark"):n(localStorage.getItem("dark-mode-storage")||"light"),e.addEventListener("click",()=>{"fas fa-moon"===e.className?n("dark"):"fas fa-sun"===e.className&&n("light")})}}])

Something in here?

Love the theme btw

[wbollock]

Well, I think I did it. Files just took a second to load. Literally in the code I posted.

window.matchMedia("(prefers-color-scheme: light)")

Maybe helpful for someone googling it later. Ty for the great theme.

[wbollock]

Reopening because I'm not getting consistent behavior. Some devices light default, some dark.

[matsuyoshi30]

@wbollock Hi!

This theme uses prefers-color-scheme and localStorage API. prefers-color-scheme is used to detect if the user has requested the system use a light or dark color theme, so window.matchMedia('(prefers-color-scheme: dark)').matches returns whether your device chooses the dark mode or not. localStorage stored data with no expiration time. If you changed the theme from the footer, the change is stored in your browser. I think those are because of some devices light default, some dark.

If you want to set the light mode as the default, trying to delete static/src/theme.js and this line in your repository.

Sorry for my terrible English... If you want more help, please let me know!

[alicehua11]

Hi, not sure if this is resolved but if you go to data/themes/ you'll see your chosen .toml theme file. Open it and there should be an option to change it that reads something like this: # Is theme light or dark? light = false

[Scaranman]

I have the same issue. I have light = true but on when set to automatic the site still defaults to dark mode no matter the time of day.

[imirzadeh]

The way dark/light mode is chosen is based on this file: https://github.com/wowchemy/wowchemy-hugo-modules/blob/main/wowchemy/assets/js/wowchemy-theming.js

More specifically, this function

function getThemeMode() {
  return parseInt(localStorage.getItem('wcTheme') || 2);
}

By default, it returns 2 which is automatic, then wowchemy tries to find the user's preference based on the browser API:

let currentThemeMode = getThemeMode();
  console.debug(`User's theme variation: ${currentThemeMode}`);

  switch (currentThemeMode) {
    case 0:
      isDarkTheme = false;
      break;
    case 1:
      isDarkTheme = true;
      break;
    default:
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        // The visitor prefers dark themes and switching to the dark variation is allowed by admin.
        isDarkTheme = true;
      } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
        // The visitor prefers light themes and switching to the light variation is allowed by admin.
        isDarkTheme = false;
      } else {
        // Use the site's default theme variation based on `light` in the theme file.
        isDarkTheme = window.wc.isSiteThemeDark;
      }
      break;
  }

So I guess the fact that light=true doesn't prevent automatic selection of theme due to the order of conditions in the code above. You have to modify wcTheme variable.

Create a custom.js file according to this tutorial add this line if you want a light theme by default:

localStorage.setItem('wcTheme', 0);

or if you want a dark theme by default:

localStorage.setItem('wcTheme', 1);