
# Tema escuro con Nextjs

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

<GoogleAdsense />

Hai moitas formas de facer a xestión de temas de estilos en React e Nextjs, pero todas elas pasan por ter un array/obxeto con todos os estilos de cada un dos distintos temas, tamén
outra das formas é usar variables de css ou scss _estas últimas están en cada vez en máis deshuso_. Eu, en particular vou usar variables de css e fixar un tema por defecto no meu \_document . Por que aquí ?

Por que \_document execútase en servidor non como \_app que o fai en cliente e se usas un useEffect para setear o teu tema por defecto ou detectar o que ten o usuario no seu sistema operativo,
no tempo que se tarda en facer esta comprobación e engadilo, pode darse un parpadeo nos estilos da paxina. Iso pode resultar estraño.

Eu fíxeno así:

## 1 - Variables do 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 - Fixar 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 pra cambiar o 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 o 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 facer a proba en vivo, podes cambiar o tema no teu sistema operativo e verás que o meu sitio web actualízase automaticamente ou tamén podes ir ao meu pagina de configuración e cambiar o tema.

> Todo o código no meu repositorio de github, se che gusta este proxecto, ou se o contido axudouche en algo podes recompensarme cunha ⭐️, Grazas!
