
# Tema oscuro con Nextjs

<Date date="02-03-2023" />

<GoogleAdsense />

Hay muchas formas de hacer la gestión de temas de estilos en React y Nextjs, pero todas ellas pasan por tener un array/objecto con todos los estilos de cada uno de los distintos temas, también
otra de las formas es usar variables de css o scss _estas últimas están en cada vez en más deshuso_. Yo, en particular voy a usar variables de css y fijar un tema por defecto en mi \_document . ¿ Por qué aquí ?

Por que \_document se ejecuta en servidor no como \_app que lo hace en cliente y si usas un useEffect para setear tu tema por defecto o detectar el que tiene el usuario en su sistema operativo,
en el tiempo que se tarda en hacer esta comprobación y añadirlo, puede darse un parpadeo en los estilos de la pagina. Eso puede resultar extraño.

Yo lo hice así:

## 1 - Variables de css

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```css globals.css
:root {
    /* commons */
    --white-color: 255, 255, 255;
    --color-available-arrow: 95, 91 98;
    ...;
}

[data-theme='dark'] {
    --blog-nav: 48, 41, 51;
    --blog-header: 53, 45, 55;
    ...;
}

[data-theme='light'] {
    --blog-nav: 204, 202, 219;
    --blog-header: 255, 255, 255;
    ...;
}
```

</CH.Code>

## 2 - Fijar tema por defecto

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx _document.tsx mark=4

const Document = (props: Props) => {
    return (
        <Html lang={props.__NEXT_DATA__.locale} data-theme="light">
    )
}

```

</CH.Code>

## 3 - Custom hook para cambiar el tema

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts useDarkMode.ts
import React from 'react';

const scheme = {
    light: 'light' as const,
    dark: 'dark' as const,
};

const useDarkMode = (): { theme: null | 'dark' | 'light'; toggleTheme: () => void; scheme: typeof scheme } => {
    const [theme, setTheme] = React.useState<null | 'dark' | 'light'>(null);

    React.useEffect(() => {
        if (typeof window !== 'undefined' && window.matchMedia) {
            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
            const handler = (event: MediaQueryListEvent) => {
                setTheme(event.matches ? scheme.dark : scheme.light);
            };
            mediaQuery.addEventListener('change', handler);
            return () => mediaQuery.removeEventListener('change', handler);
        }
    }, []);

    React.useEffect(() => {
        if (typeof window !== 'undefined' && theme) {
            document.documentElement.setAttribute('data-theme', theme);
        }
    }, [theme]);

    const toggleTheme = () => {
        setTheme(theme === scheme.dark ? scheme.light : scheme.dark);
    };

    return { theme, scheme, toggleTheme };
};

export default useDarkMode;
```

</CH.Code>

## 4 - Usar el hook

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx settings.tsx mark=3,4,5,6,15,16
const Content = () => {
    const { formatMessage: f } = useIntl();
    const {
        theme,
        scheme: { dark },
        toggleTheme,
    } = useDarkMode();

    return (
        <div className={styles.container}>
            <section className={styles.confg}>
                <IconWithName
                    icon="/theme.png"
                    alt={f({ id: 'settings.langAlt' })}
                    name={f({ id: theme === dark ? 'settings.dark' : 'settings.light' })}
                    onClick={toggleTheme}
                />
            </section>
            <section className={styles.confg}></section>
        </div>
    );
};
```

</CH.Code>

Para hacer la prueba en vivo, puedes cambiar el tema en tu sistema operativo y verás que mi sitio web se actualiza automáticamente o también puedes ir a mi pagina de configuración y cambiar el tema.

> Todo el código en mi repositorio de github, si te gusta este proyecto, o si el contenido te ha ayudado en algo puedes recompensarme con una ⭐️, Gracias!
