Interface DarkModeOptions

interface DarkModeOptions {
    SSR?: boolean;
    defaultTheme?: "dark" | "light";
    persistStateInLocalStorage?: boolean;
    updateOnPreferredSchemeChange?: boolean;
}

Properties

SSR?: boolean

This parameter which is true by default determines if the hook should take the necessary steps to avoid hydration errors when using SSR. This results in the initial state being null on the first render even if there is a value in local storage. On consecutive renders the correct value will be returned. Note that components with "use client" in Next.js are still pre-rendered on the server. Only set this variable to false, if you are rendering on the client only. What this will do, it will return the correct value from local storage on the first render. This can lead to hydration errors when using SSR because local storage doesn't exist on the server.

defaultTheme?: "dark" | "light"

Set a default theme. This overrides the user's preferred scheme but is overridden by the value saved in local storage if the hook is set to use local storage.

persistStateInLocalStorage?: boolean

If set to true, uses the browsers local storage to persist the selected theme between page reloads.

updateOnPreferredSchemeChange?: boolean

If set to true, updates the theme when the user's preferred scheme changes