Light Mode by default

[Dublinscope]

Hi,

I would like to use Light mode by default.
I know that I can remove the "dark" from the classes, but I would have to do that for each page.
Is there a way to configure it by default and it would be applied on all pages.

Thank you for your help.

[prototypa]

Hi @Dublinscope

In the template, for now, there are no specific settings related to the dark mode. I'll think about it.

Anyway, to solve your problem temporally, It depends on what you want to do:

1. Light mode by default:

Go to this file and add the highlighted code:

https://github.com/onwidget/astrowind/blob/main/src/components/core/BasicScripts.astro#L5

<script is:inline>
+ if (!localStorage.theme) {
+   localStorage.theme = "light";
+ }

  if (
    localStorage.theme === "dark" ||
    (!("theme" in localStorage) &&
      window.matchMedia("(prefers-color-scheme: dark)").matches)
  ) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }

// ...

2. Only light mode:

You can go to the following file and remove or comment out all the highlighted lines.

https://github.com/onwidget/astrowind/blob/main/src/components/core/BasicScripts.astro#L6-L14

<script is:inline>
- if (
-   localStorage.theme === "dark" ||
-   (!("theme" in localStorage) &&
-     window.matchMedia("(prefers-color-scheme: dark)").matches)
- ) {
-   document.documentElement.classList.add("dark");
- } else {
-   document.documentElement.classList.remove("dark");
- }

// ...

Also, go to the Header component and remove the code associated with the toggle dark mode button (highlighted lines).

https://github.com/onwidget/astrowind/blob/main/src/components/widgets/Header.astro#L17-L21
https://github.com/onwidget/astrowind/blob/main/src/components/widgets/Header.astro#L57-L61

[Dublinscope]

I used "Light mode by default" and it worked.

Thank you.