Dark theme by default?

Hey, I was wondering how to make 'dark' as default theme

export default function useColorMode() {
  const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');

  useEffect(() => {
    const className = 'dark';
    const bodyClass = window.document.body.classList;

    colorMode === 'dark'
      ? bodyClass.add(className)
      : bodyClass.remove(className);
  }, [colorMode]);

  return [colorMode, setColorMode];

export default function useColorMode() {
  const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');

  useEffect(() => {
    const className = 'dark';
    const bodyClass = window.document.body.classList;

    colorMode === 'dark'
      ? bodyClass.add(className)
      : bodyClass.remove(className);
  }, [colorMode]);

  return [colorMode, setColorMode];

I thought that this is is where its getting set initially but after changing

useLocalStorage('color-theme', 'dark');

useLocalStorage('color-theme', 'dark');

it is still the same

Wasp•2y ago•

5 replies

fustuk.

Dark theme by default?

Hey, I was wondering how to make 'dark' as default theme

export default function useColorMode() {
  const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');

  useEffect(() => {
    const className = 'dark';
    const bodyClass = window.document.body.classList;

    colorMode === 'dark'
      ? bodyClass.add(className)
      : bodyClass.remove(className);
  }, [colorMode]);

  return [colorMode, setColorMode];

export default function useColorMode() {
  const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');

  useEffect(() => {
    const className = 'dark';
    const bodyClass = window.document.body.classList;

    colorMode === 'dark'
      ? bodyClass.add(className)
      : bodyClass.remove(className);
  }, [colorMode]);

  return [colorMode, setColorMode];

I thought that this is is where its getting set initially but after changing

useLocalStorage('color-theme', 'dark');

useLocalStorage('color-theme', 'dark');

it is still the same

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Wasp

Rails-like framework for React, Node.js and Prisma. Build your app in a day and deploy it with a single CLI command.

4,603 Members

Join

Dark theme by default?

Dark theme by default?

Continue the conversation

Wasp

Continue the conversation

Wasp

Similar Threads