Получение темы на Next.js

Question

Как получить тему, которая установлена у человека в браузере. Попытался сам сделать, но данный код ниже работает только в React а тут ошибка с window

'use client'
import {useEffect, useLayoutEffect, useState} from "react";

export const useTheme = () => {

        const idDarkTheme = window?.matchMedia('(prefers-color-scheme: dark)').matches
        const defaultTheme = idDarkTheme ? 'dark' : 'light'

        const [theme, setTheme] = useState(localStorage.getItem('app-theme') || defaultTheme)

        useLayoutEffect(() => {
            document.documentElement.setAttribute('data-theme', theme)
            localStorage.setItem('app-theme', theme)
        }, [theme]);

        return {theme, setTheme}
}

Answer 1

Страницы в nextjs рендерятся на сервере, там недоступно браузерное api: window, localStorage

Гарантированно на клиенте выполняется все, что указано в useEffect:

export const useTheme = () => {
    const [theme, setTheme] = useState('light')

    useEffect(()=>{
        const idDarkTheme = window?.matchMedia('(prefers-color-scheme: dark)').matches
        const defaultTheme = idDarkTheme ? 'dark' : 'light'

        setTheme(localStorage.getItem('app-theme') || defaultTheme);
    },[]);

    useLayoutEffect(() => {
        document.documentElement.setAttribute('data-theme', theme)
        localStorage.setItem('app-theme', theme);
    }, [theme]);

    return {theme, setTheme}
}

БЛОГ НА HUSL

Получение темы на Next.js

Ответы (1 шт):