How do I ensure my dark mode persists with local storage? #1158

alexwhitmore · 2022-08-11T20:59:13Z

alexwhitmore
Aug 11, 2022

Hi there, I am attempting to enable dark mode with the help of local storage. I am able to actually toggle between the light and dark mode and I even see the root class change on the toggle. However, my issue is when I refresh the page, the theme is reset.

const ThemeToggler = () => {
  const [theme, setTheme] = createSignal<string>('dark');

  createEffect(() => {
    let theme: 'light' | 'dark';

    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
      theme = localStorage.getItem('theme') as 'light' | 'dark';
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      theme = 'dark';
    } else {
      theme = 'light';
    }

    if (theme === 'light') {
      setTheme('light');
    } else {
      setTheme('dark');
    }
  });

  const toggleTheme = () => {
    const root = document.documentElement;

    if (theme() === 'dark') {
      root.classList.remove('theme-dark');
      localStorage.setItem('theme', 'light');
      setTheme('light');
    } else {
      root.classList.add('theme-dark');
      localStorage.setItem('theme', 'dark');
      setTheme('dark');
    }
  };

  return <button onClick={() => toggleTheme()}>Click Me</button>;
};

export default ThemeToggler;

I recreated this set up in the Solid playground: https://playground.solidjs.com/?hash=282373262&version=1.4.1

Answered by ryansolid

Aug 11, 2022

Yeah it took me a min to follow but the issue here is that the logic that actually produces the effect is in the toggle. So it only changes when you press the button. That logic needs to be in an effect so that it runs when the page first loads. Whereas your current effect doesn't actually track values so it is only for initialization so it doesn't need to go in an effect at all.

So I changed it so that all things are derived from the signal and the event just toggles it:

const initializeTheme = () => {
  let theme;
  if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
    theme = localStorage.getItem("theme") as "light" | "dark";
  } else if (window.matchMedia("(p…

View full answer

ryansolid · 2022-08-11T22:33:05Z

ryansolid
Aug 11, 2022
Maintainer

Yeah it took me a min to follow but the issue here is that the logic that actually produces the effect is in the toggle. So it only changes when you press the button. That logic needs to be in an effect so that it runs when the page first loads. Whereas your current effect doesn't actually track values so it is only for initialization so it doesn't need to go in an effect at all.

So I changed it so that all things are derived from the signal and the event just toggles it:

const initializeTheme = () => {
  let theme;
  if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
    theme = localStorage.getItem("theme") as "light" | "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  } else {
    theme = "light";
  }
  return theme;
};

const ThemeToggler = () => {
  const [theme, setTheme] = createSignal<string>(initializeTheme());

  createEffect(() => {
    const root = document.documentElement;
    if (theme() === "light") {
      root.classList.remove("theme-dark");
      localStorage.setItem("theme", "light");
    } else {
      root.classList.add("theme-dark");
      localStorage.setItem("theme", "dark");
    }
  });

  return (
    <div>
      <button onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}>{theme()}</button>
    </div>
  );
};

render(() => <ThemeToggler />, document.getElementById("app")!);

I made a working example here: https://playground.solidjs.com/?hash=2047679767&version=1.4.1

4 replies

alexwhitmore Aug 11, 2022
Author

Ahh of course I had it backwards, that works beautifully. However, I'm using Astro.. would you know why I am getting a window is not defined error? No need to look into it, I'm just unsure of why it worked for Preact out of the box and not Solid too.

lxsmnsyc Aug 12, 2022

It's because of initializeTheme being accessed for createSignal's initial value. Since Astro performs SSR, window does not exist during that context (due to NodeJS). You can just check if window exists first before calling matchMedia

ryansolid Aug 12, 2022
Maintainer

Yeah createEffect only runs in the browser. So that was the one benefit of doing it that way. You could do this with 2 effects. Or with an onMount hook but I'd just check for window or if Astro exposes Vites server flag.

The thing is being server-rendered and only persisting this in local storage and not a database you have to choose one and it might not be what is in the browser. So between render and hydration it might flicker the wrong color. But sort of comes with the territory.

G3root Aug 12, 2022

Ahh of course I had it backwards, that works beautifully. However, I'm using Astro.. would you know why I am getting a window is not defined error? No need to look into it, I'm just unsure of why it worked for Preact out of the box and not Solid too.

here's how i did it in astro.js

// layout.astro

		<script is:inline>
			const theme = (() => {
				if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
					return localStorage.getItem('theme');
				}
				if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
					return 'dark';
				}
				return 'light';
			})();
			if (theme === 'light') {
				document.documentElement.classList.remove('dark-theme');
			} else {
				document.documentElement.classList.add('dark-theme');
			}
		</script>

import type { Accessor } from "solid-js";
import { persistentAtom } from "@nanostores/persistent";
import { useStore } from "@nanostores/solid";

const themeAtom = persistentAtom<"dark" | "light">("theme", "light");

setTheme(theme: Accessor<"dark" | "light">) {
  if (theme() === "light") {
    themeAtom.set("dark");
  } else {
    themeAtom.set("light");
  }
}


export const ThemeToggle = () => {
  const theme = useStore<any, "dark" | "light">(themeAtom);

  const isDark = () => (theme() === "dark" ? true : false);

  createEffect(
    on(
      theme,
      () => {
        const root = document.documentElement;
        if (theme() === "light") {
          root.classList.remove("dark-theme");
        } else {
          root.classList.add("dark-theme");
        }
      },
      { defer: true }
    )
  );
  return (
    <button
      type="button"
      class="flex items-center p-1 rounded-md theme-btn"
      onClick={() => {
        setTheme(theme);
      }}
    >
 toggle
    </button>
  );
};

klener89 · 2023-02-21T16:39:39Z

klener89
Feb 21, 2023

Hi @ryansolid, I have a follow up questions concerning this example.

When running your ThemeToggle in a fresh solid-start (bar + SSR + Typescript) environment:

the button always shows the value "light" after a hard refresh, no matter what is set in localStorage.
a console.log from inside the createEffect indicates that theme() is actually picking up the value from the localStorage, but the DOM node doesn't update
only after clicking the button, the DOM node updates
when deactivating SSR, everything works fine

Is there anything I need to account for in an SSR environment?

Thanks a lot for your help

0 replies

karpov-kir · 2025-03-08T17:04:22Z

karpov-kir
Mar 8, 2025

Hello! Sorry for posting in an old thread. 🙈

I've come across the same issue. There are a few problems actually:

How to set the data-theme attribute (or class) on the document before the first render so that the user sees the UI in the right colors without flickering
How to render the theme switcher in the right state before the first render, again without flickering
How to make it work with SSR + Solid.js start

Here is a demo of the problem (note that I reload the page a few times):

1.mp4

I tried to approach the problem with cookies and with some other workarounds, but I failed. Eventually, I hacked a solution (far from perfect, but hopefully someone could point me in the right direction):

import './app.css';

import { MetaProvider } from '@solidjs/meta';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { createSignal, onMount, Suspense } from 'solid-js';
import { twMerge } from 'tailwind-merge';

import { Switch } from './components/Switch';
import MoonIcon from './icons/moon.svg?component-solid';
import SunIcon from './icons/sun.svg?component-solid';

const persistIsLightModeEnabled = (isLightModeEnabled: boolean) => {
  window.localStorage.setItem('isLightModeEnabled', JSON.stringify(isLightModeEnabled));
};

const [isLightModeEnabled, setIsLightModeEnabled] = createSignal(false);

const updateDocumentDataTheme = (newIsLightModeEnabled: boolean) =>
  document.documentElement.setAttribute('data-theme', newIsLightModeEnabled ? 'light' : 'dark');

const addThemeAttributeScript = `
  (function() {
    window.getIsLightModeEnabledFromPersistence = () => {
      if (window.localStorage.getItem('isLightModeEnabled') === null) {
        return window.matchMedia('(prefers-color-scheme: dark)').matches;
      }

      return window.localStorage.getItem('isLightModeEnabled') === 'true';
    };

    document.documentElement.setAttribute('data-theme', window.getIsLightModeEnabledFromPersistence() ? 'light' : 'dark');
  })();
`;

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          {/* eslint-disable-next-line solid/no-innerhtml */}
          <script innerHTML={addThemeAttributeScript} />
          <Header />
          <main>
            <Suspense>{props.children}</Suspense>
          </main>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

/**
 * This script is used to toggle the theme switch when the page is loaded
 * and before the first render of the theme switch to workaround annoying flash of its UI state.
 * TODO: Is there no better way to do this?
 */
const toggleThemeSwitchScript = `
  (function() {
    const updateThemeSwitch = (addedNode) => {
      if (!(addedNode instanceof HTMLElement) || addedNode.id !== "theme-switch") {
        return false;
      }

      const isLightModeEnabled = window.getIsLightModeEnabledFromPersistence();
      addedNode.querySelector("input").checked = isLightModeEnabled;

      if (isLightModeEnabled) {
        addedNode.querySelector("#theme-switch-sun-icon").classList.remove("hidden");
      } else {
        addedNode.querySelector("#theme-switch-moon-icon").classList.remove("hidden");
      }

      return true;
    };

    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        for (addedNode of mutation.addedNodes) {
          if (!updateThemeSwitch(addedNode)) {
            continue;
          }

          observer.disconnect();
          return;
        }
      }

      console.error("Failed to find theme switch");
      observer.disconnect();
    })

    observer.observe(document.getElementById('theme-switch-container'), { childList: true, subtree: true });
  })();
`;

function Header() {
  const [isMounted, setIsMounted] = createSignal(false);

  onMount(() => {
    setIsMounted(true);
  });

  onMount(() => {
    // Sync the theme switch state with the persisted state
    setIsLightModeEnabled(
      (
        window as typeof window & { getIsLightModeEnabledFromPersistence: () => boolean }
      ).getIsLightModeEnabledFromPersistence(),
    );
  });
  return (
    <>
      <header>
        <div id="theme-switch-container">
          {/* eslint-disable-next-line solid/no-innerhtml */}
          <script innerHTML={toggleThemeSwitchScript} />
          <Switch
            id="theme-switch"
            thumbIcon={
              <>
                <SunIcon
                  id="theme-switch-sun-icon"
                  class={twMerge(
                    // Have Solid.js to alter the hidden class only after mounting and let the inline script
                    // to handle the initial state to avoid flickering.
                    (!isMounted() || !isLightModeEnabled()) && 'hidden',
                    'p-0.5 w-full bg-slate-100 rounded-full text-slate-600 transition-colors',
                  )}
                />
                <MoonIcon
                  id="theme-switch-moon-icon"
                  class={twMerge(
                    (!isMounted() || isLightModeEnabled()) && 'hidden',
                    'p-0.5 w-full bg-slate-950 rounded-full text-slate-100 transition-colors',
                  )}
                />
              </>
            }
            // aka onToggle
            onChange={(event) => {
              const target = event.target as HTMLInputElement;
              const isLightModeEnabled = target.checked;
              setIsLightModeEnabled(isLightModeEnabled);
              updateDocumentDataTheme(isLightModeEnabled);
              persistIsLightModeEnabled(isLightModeEnabled);
            }}
          />
        </div>
      </header>
    </>
  );
}

I use two inline scripts:

The first one to set the right data-theme attribute before the first render
The second one intercepts when the theme switcher is inserted into the DOM and changes its state before the first render

Result:

3.mp4

0 replies

atk · 2025-03-08T17:20:16Z

atk
Mar 8, 2025

We also have makePersisted in our @solid-primitives/storage package, which also supports cookieStorage.

0 replies

karpov-kir · 2025-03-08T19:19:06Z

karpov-kir
Mar 8, 2025

@atk, thank you! I tried to use this package among the first attempts to solve the problem.

Once I copy and paste the code from the NPM page right in the app.tsx:

import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { createSignal, Suspense } from "solid-js";
import "./app.css";

import { cookieStorage, makePersisted } from '@solid-primitives/storage';

const [state, setState] = makePersisted(createSignal(), {
  storage: cookieStorage.withOptions({ expires: new Date(+new Date() + 3e10) }),
});

export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

The project fails:

vinxi v0.5.3
vinxi starting dev server

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

11:09:20 PM [vite] (ssr) Error when evaluating SSR module $vinxi/handler/ssr: getNextContextId cannot be used under non-hydrating context
      at Object.getNextContextId (file:///Users/kirill/Documents/WP/kk/node_modules/solid-js/dist/server.js:385:13)
      at createUniqueId (file:///Users/kirill/Documents/WP/kk/node_modules/solid-js/dist/server.js:407:23)
      at makePersisted (file:///Users/kirill/Documents/WP/kk/node_modules/@solid-primitives/storage/dist/persisted.js:6:45)

It can be reproduced in a brand new Solid.js project created with npm init solid@latest. Am I missing something?

4 replies

atk Mar 8, 2025

Please define a name then using the option. I need to fix this issue when you're using makePersisted without a name out of a reactive context.

karpov-kir Mar 9, 2025

@atk,

Please define a name

If I understood correctly, then it should be this way:

import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { createEffect, createSignal, Suspense } from "solid-js";
import "./app.css";
import { cookieStorage, makePersisted } from "@solid-primitives/storage";

const [isLightModeEnabled, setIsLightModeEnabled] = makePersisted(createSignal<boolean | undefined>(), {
  storage: cookieStorage.withOptions({ expires: new Date(+new Date() + 3e10) }),
  name: "isLightModeEnabled",
});

export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>
            {props.children}
            <IsLightMode />
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

function IsLightMode() {
  createEffect(() => {
    console.log('current isLightModeEnabled', isLightModeEnabled());
  });
  return (
    <div>
      <hr />
      <label>
        <input
          type="checkbox"
          checked={isLightModeEnabled()}
          onChange={e => {
            setIsLightModeEnabled(e.target.checked);
          }}
        />
        Light mode
      </label>
    </div>
  );
}

If I reload the page, then the value is initialized correctly, but the initial render of the UI is always as if the value is false:

1.mp4

What I want to achieve is to have the Light mode checkbox checked initially if the isLightModeEnabled value is true on the first page load.

Could you advise?

karpov-kir Mar 9, 2025

If I add onMount to sync a local value this way:

function IsLightMode() {
  const [internalIsLightModeEnabled, setInternalIsLightModeEnabled] = createSignal<boolean | undefined>(undefined);

  createEffect(() => {
    console.log('current isLightModeEnabled', isLightModeEnabled());
    console.log('current internalIsLightModeEnabled', internalIsLightModeEnabled());
  });

  onMount(() => {
    setInternalIsLightModeEnabled(isLightModeEnabled());
  });

  return (
    <div>
      <hr />
      <label>
        <input
          type="checkbox"
          checked={internalIsLightModeEnabled()}
          onChange={e => {
            setIsLightModeEnabled(e.target.checked);
            setInternalIsLightModeEnabled(e.target.checked);
          }}
        />
        Light mode
      </label>
    </div>
  );
}

Then, the UI flickers:

2.mp4

atk Mar 10, 2025

Sorry, I only ever tested it inside of a reactive context. Not sure why this doesn't work outside of it.

How do I ensure my dark mode persists with local storage? #1158

Uh oh!

Replies: 5 comments · 8 replies

Uh oh!

Uh oh!

ryansolid Aug 11, 2022 Maintainer

Uh oh!

alexwhitmore Aug 11, 2022 Author

Uh oh!

Uh oh!

ryansolid Aug 12, 2022 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 8 replies

ryansolid
Aug 11, 2022
Maintainer

alexwhitmore Aug 11, 2022
Author

ryansolid Aug 12, 2022
Maintainer