feat: implement listener to detect dark mode in the browser

@types/styled.d.ts

@@ -1,9 +1,9 @@
 /* eslint @typescript-eslint/no-empty-interface: "off" */
 import 'styled-components';
 
-import { dark, light } from 'styles/theme/colors';
+import { light as defaultTheme } from 'styles/theme/colors';
 
-export type Theme = typeof light & typeof dark;
+export type Theme = typeof defaultTheme;
 
 declare module 'styled-components' {
   export interface DefaultTheme extends Theme {}

components/Layout/Header/index.tsx

@@ -1,20 +1,17 @@
 import { LocaleSwitcher } from 'components/LocaleSwitcher';
 import { ToggleTheme } from 'components/ToggleTheme';
-import {
-  useStylesDispatch,
-  useStylesState,
-} from 'contexts/styles/StylesContext';
+import { useThemeDispatch, useThemeState } from 'contexts/theme/ThemeContext';
 
 import * as S from 'styles/components/Layout/Header';
 
 export function Header() {
-  const { theme } = useStylesState();
-  const { switchTheme } = useStylesDispatch();
+  const { mode } = useThemeState();
+  const { onSelectMode } = useThemeDispatch();
 
   return (
     <S.Wrapper>
       <LocaleSwitcher />
-      <ToggleTheme toggleTheme={() => switchTheme(theme)} />
+      <ToggleTheme toggleTheme={() => onSelectMode(mode)} />
     </S.Wrapper>
   );
 }

components/Logo/index.tsx

@@ -1,13 +1,13 @@
 import Image from 'next/image';
 
-import { useStylesState } from 'contexts/styles/StylesContext';
+import { useThemeState } from 'contexts/theme/ThemeContext';
 import { useI18nState } from 'contexts/i18n/I18Context';
 
 export function Logo() {
-  const { theme } = useStylesState();
+  const { mode } = useThemeState();
   const { t } = useI18nState();
 
-  return theme === 'light' ? (
+  return mode === 'light' ? (
     <Image
       src="/static/light-logo.svg"
       alt={t.heading.meme_generator_description}

components/ToggleTheme/index.tsx

@@ -1,25 +1,23 @@
 import Switch from 'react-switch';
-import { shade } from 'polished';
-
-import { colors } from 'styles/theme';
-import { useStylesState } from 'contexts/styles/StylesContext';
 
+import { theme } from 'styles/theme';
+import { useThemeState } from 'contexts/theme/ThemeContext';
 import { ToggleThemeProps } from './types';
 
 export function ToggleTheme({ toggleTheme }: ToggleThemeProps) {
-  const { theme } = useStylesState();
+  const { mode } = useThemeState();
 
   return (
     <Switch
       onChange={toggleTheme}
-      checked={theme === 'dark'}
+      checked={mode === 'dark'}
       checkedIcon={false}
       uncheckedIcon={false}
       height={10}
       width={40}
       handleDiameter={20}
-      offColor={colors.light.alto}
-      onColor={colors.light.alto}
+      offColor={theme.light.alto}
+      onColor={theme.light.alto}
     />
   );
 }

contexts/index.tsx

@@ -12,7 +12,7 @@ const DynamicStylesProvider = dynamic(
 );
 
 const DynamicStylesContainer = dynamic(
-  () => import('./styles/StylesProvider').then(mod => mod.StylesContainer),
+  () => import('./theme/ThemeProvider').then(mod => mod.ThemeContainer),
   {
     ssr: false,
   },

contexts/styles.tsx

@@ -1,16 +1,16 @@
 import { PropsWithChildren } from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { colors } from 'styles/theme';
 import GlobalStyle from 'styles/global';
-
-import { useStylesState } from './styles/StylesContext';
+import { theme } from 'styles/theme';
+import { useThemeState } from './theme/ThemeContext';
 
 export function StylesProvider({ children }: PropsWithChildren<unknown>) {
-  const { theme } = useStylesState();
+  const { mode } = useThemeState();
+  const costumTheme = theme[mode];
 
   return (
-    <ThemeProvider theme={colors[theme]}>
+    <ThemeProvider theme={costumTheme}>
       <GlobalStyle />
       {children}
     </ThemeProvider>

contexts/theme/ThemeContext.ts

@@ -0,0 +1,33 @@
+import { useContext, createContext } from 'react';
+import { ThemeDispatchContextData, ThemeStateContextData } from './types';
+
+export const ThemeStateContext = createContext<
+  ThemeStateContextData | undefined
+>(undefined);
+
+export const ThemeDispatchContext = createContext<
+  ThemeDispatchContextData | undefined
+>(undefined);
+
+export const ThemeStateProvider = ThemeStateContext.Provider;
+export const ThemeDispatchProvider = ThemeDispatchContext.Provider;
+
+export function useThemeState() {
+  const context = useContext(ThemeStateContext);
+
+  if (!context) {
+    throw new Error('useThemeState must be used within a ThemeProvider');
+  }
+
+  return context;
+}
+
+export function useThemeDispatch() {
+  const context = useContext(ThemeDispatchContext);
+
+  if (!context) {
+    throw new Error('useThemeDispatch must be used within ThemeProvider');
+  }
+
+  return context;
+}

contexts/theme/ThemeProvider.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
+
+import { THEME_STORAGE_KEY } from 'constants/localStorage';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { ThemeDispatchProvider, ThemeStateProvider } from './ThemeContext';
+import { Theme } from './types';
+
+export function ThemeContainer({ children }: PropsWithChildren<unknown>) {
+  const [mode, setMode] = usePersistedState<Theme>(THEME_STORAGE_KEY, 'light');
+
+  const onSelectMode = useCallback((mode: Theme) => {
+    setMode(mode === 'light' ? 'dark' : 'light');
+  }, []);
+
+  useEffect(() => {
+    window
+      .matchMedia('(prefers-color-scheme: light)')
+      .addEventListener('change', e =>
+        onSelectMode(e.matches ? 'dark' : 'light'),
+      );
+
+    onSelectMode(
+      window.matchMedia('(prefers-color-scheme: light)').matches
+        ? 'dark'
+        : 'light',
+    );
+  }, []);
+
+  const themeState = useMemo(() => ({ mode }), [mode]);
+
+  const themeDispatch = useMemo(() => ({ onSelectMode }), [onSelectMode]);
+
+  return (
+    <ThemeStateProvider value={themeState}>
+      <ThemeDispatchProvider value={themeDispatch}>
+        {children}
+      </ThemeDispatchProvider>
+    </ThemeStateProvider>
+  );
+}

contexts/theme/types.ts

@@ -0,0 +1,11 @@
+import { theme } from 'styles/theme';
+
+export type Theme = keyof typeof theme;
+
+export type ThemeStateContextData = {
+  mode: Theme;
+};
+
+export type ThemeDispatchContextData = {
+  onSelectMode: (mode: Theme) => void;
+};

styles/theme/colors.ts

@@ -9,14 +9,18 @@ export const light = {
     background: '#f5f6fA',
   },
   text: '#ffffff',
+  orange: '#ff9000',
+  danger: '#c53030',
+  disabled: '#666360',
   loading: '#2e384d',
   button: {
     background: '#4395D8',
     color: '#ffffff',
   },
 };
 
-export const dark = {
+export const dark: typeof light = {
+  ...light,
   background: '#171717',
   modal: '#444444',
   alto: '#dbdbdb',
@@ -26,10 +30,5 @@ export const dark = {
     borderColor: '#5a5a5a',
     background: '#404040',
   },
-  text: '#ffffff',
   loading: '#ffffff',
-  button: {
-    background: '#4395D8',
-    color: '#ffffff',
-  },
 };

styles/theme/index.ts

@@ -1,6 +1,6 @@
 import { light, dark } from './colors';
 
-export const colors = {
+export const theme = {
   light,
   dark,
 };