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'); it is still the same

3 Replies

kapa.ai•4mo ago

Hi @fustuk.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, there isn't specific information about setting a default theme in Wasp. However, looking at your code, it seems like you're using the useLocalStorage hook to store the theme preference ('light' or 'dark') in the local storage of the browser. If changing the default value in useLocalStorage('color-theme', 'dark') doesn't affect the theme, it might be because the theme value is already set in the local storage and it's not being overwritten by the default value. You could try to clear your browser's local storage and then refresh the page to see if the default theme is now 'dark'. If that doesn't work, there might be other parts of your code that are affecting the theme setting. Unfortunately, without more specific information or code related to Wasp and theming, it's hard to provide a more detailed answer. I would recommend checking the Wasp documentation (https://wasp-lang.dev/docs) or their Github issues (https://github.com/wasp-lang/wasp/issues) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @fustuk., I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

fustuk.OP•4mo ago

Oh yeah if I delete from local storage and refresh it seems to set it up properly.Solved

Filip•4mo ago

Good bot!

Gaming

Programming

Dark theme by default?