Theo's Typesafe Cult•2y ago

Is next-themes worth using?

I've been trying to implement dark/light mode in my app and most of the tutorials I found use next-themes. However, 35kb seems kind of a lot. So my question is, is it worth using or is it better to implement yourself?

10 Replies

royanger•2y ago

If you don't need all the features from the package, you could write your own context pretty easily to handle it. I wrote up one that saves the selection to localStorage. Whole thing was about 50 or 60 LOC.

JulieCezar•2y ago

Wrote something similar too, but I didn't test it well enough, so I'm not sure how it reacts... E.g. if my theme is set to white by default will it first be set to white each time the user opens the page and then go to dark (if they have dark mode enabled) or is it smooth? Something like this...

JulieCezar•2y ago

JulieCezar•2y ago

Although it is an older post The question was

JulieCezar•2y ago

royanger•2y ago

There in lies the issues with light/dark mode. You can build it to avoid the flash of the wrong theme, but how you build it depends on how you build the site/app. IE, SSR, SSG, neither. Each have their own hurdles.

JulieCezar•2y ago

I know I will have SSR... I will try and see Saving it in the db seems like kind of a waste though

royanger•2y ago

This seems like a good write up with another option. https://www.infoxicator.com/en/dark-mode-is-dead-here-is-an-alternative

Dark Mode Is Not Enough! Here is an alternative…

These days most websites have an option to toggle Dark mode, but what if I wanted more?

royanger•2y ago

Actually that links to the post I was trying to find from Josh Comeau. https://www.joshwcomeau.com/react/dark-mode/

The Quest for the Perfect Dark Mode

Dark Mode has become common enough that it's a user expectation. And yet, creating the perfect dark mode with a statically-built site/app is deceptively tricky. In this in-depth tutorial, we'll see how to build the perfect, flicker-free, customizable theming solution for React and Gatsby apps.

JulieCezar•2y ago

Ty for your help In the end I decided to go with just a simple version

import { createContext } from "react";
import { useLocalStorage } from "usehooks-ts";

type Themes = "light" | "dark"
type ThemeOptions = {
  toggle: () => void
}

export const ThemeContext = createContext<ThemeOptions>({
  toggle: () => { return }
});

export const ThemeProvider = ({ children }: { children: JSX.Element }) => {
  const [theme, setTheme] = useLocalStorage<Themes>("theme", "light")

  const switchTheme = () => {
    const body = document.body
    theme === "dark" ? body.classList.replace("dark", "light") : body.classList.replace("light", "dark")
    setTheme(theme === "dark" ? "light" : "dark")
  }

  return (
    <ThemeContext.Provider value={{
      toggle: () => switchTheme()
    }}>
      {children}
    </ThemeContext.Provider>
  )
};

import { createContext } from "react";
import { useLocalStorage } from "usehooks-ts";

type Themes = "light" | "dark"
type ThemeOptions = {
  toggle: () => void
}

export const ThemeContext = createContext<ThemeOptions>({
  toggle: () => { return }
});

export const ThemeProvider = ({ children }: { children: JSX.Element }) => {
  const [theme, setTheme] = useLocalStorage<Themes>("theme", "light")

  const switchTheme = () => {
    const body = document.body
    theme === "dark" ? body.classList.replace("dark", "light") : body.classList.replace("light", "dark")
    setTheme(theme === "dark" ? "light" : "dark")
  }

  return (
    <ThemeContext.Provider value={{
      toggle: () => switchTheme()
    }}>
      {children}
    </ThemeContext.Provider>
  )
};

Gaming

Programming

Is next-themes worth using?