JayMGurav/ThemeContext.tsx

## _document.tsx
import NextDocument, { Html, Head, Main, NextScript } from 'next/document';
import React from 'react';

import {
  COLORS,
  COLOR_MODE_KEY,
  INITIAL_COLOR_MODE_CSS_PROPERTY,
} from '@/styles/themeConfig';
/**
 * COLORS = theme colors
 * COLOR_MODE = Key for localstorage
 * "INITIAL_COLOR_MODE_CSS_PROPERTY" property for colorMode
 */

function setColorByTheme() {
  const COLORS = '🌈';
  const COLOR_MODE_KEY = '🔑';
  const INITIAL_COLOR_MODE_CSS_PROPERTY = '🏺';

  const prefersDarkModeFromMeadiaQuery = window.matchMedia(
    '(prefers-color-scheme: dark)'
  ).matches;
  const userPersistedPreference = window.localStorage.getItem(COLOR_MODE_KEY);
  let colorMode = 'light';
  const userHasUsedToggle = typeof userPersistedPreference === 'string';
  if (userHasUsedToggle) {
    colorMode = userPersistedPreference;
  } else {
    colorMode = prefersDarkModeFromMeadiaQuery ? 'dark' : 'light';
    window.localStorage.setItem(COLOR_MODE_KEY, colorMode);
  }
  const root = document.documentElement;
  root.style.setProperty(INITIAL_COLOR_MODE_CSS_PROPERTY, colorMode);

  Object.entries(COLORS).forEach(([value, colorByTheme]) => {
    const cssVarName = `--color-${value}`;

    root.style.setProperty(cssVarName, colorByTheme[colorMode]);
  });
}

const minifiedCorrectedSetColorByTheme = () => {
  const corrected = String(setColorByTheme)
    .replace("'🌈'", JSON.stringify(COLORS))
    .replace('🔑', COLOR_MODE_KEY)
    .replace('🏺', INITIAL_COLOR_MODE_CSS_PROPERTY);

  const called = `(${corrected})()`;

  return called;
};

class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <script
            dangerouslySetInnerHTML={{
              __html: minifiedCorrectedSetColorByTheme(),
            }}></script>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default Document;

## themeConfig.ts
export const COLORS = {
  background: {
    light: 'hsl(207, 100%, 99%)',
    dark: 'hsl(0, 0%, 2%)',
  },
  text: {
    light: 'hsl(0, 0%, 2%)',
    dark: 'hsl(207, 100%, 99%)',
  },
  gray1: {
    light: 'hsl(204, 15%, 94%)',
    dark: 'hsl(0,0%, 6%)',
  },
  gray2: {
    light: 'hsl(0, 0%, 88%)',
    dark: 'hsl(0,0%, 12%)',
  },
  gray3: {
    light: 'hsl(0, 0%, 82%)',
    dark: 'hsl(0,0%, 18%)',
  },
};

export const COLOR_MODE_KEY = 'color-mode';
export const INITIAL_COLOR_MODE_CSS_PROPERTY = '--initial-color-mode';

## ThemeContext.tsx
import {
  COLORS,
  COLOR_MODE_KEY,
  INITIAL_COLOR_MODE_CSS_PROPERTY,
} from '@/styles/themeConfig';
import { createContext, useEffect, useMemo, useState } from 'react';

import { ChildrenOnlyProps, ColorMode } from '@/types/index';

export const ThemeContext = createContext<{
  colorMode?: 'dark' | 'light';
  changeColorMode?: (mode: ColorMode) => void;
}>({});

function ThemeProvider(props: ChildrenOnlyProps) {
  const [colorMode, setColorMode] = useState<ColorMode | null>(null);

  useEffect(() => {
    const root = window.document.documentElement;

    const initiallySetColorMode: ColorMode = root.style.getPropertyValue(
      INITIAL_COLOR_MODE_CSS_PROPERTY
    ) as ColorMode;

    setColorMode(initiallySetColorMode);
  }, []);

  function themeContextValue() {
    function setColors(mode: ColorMode) {
      console.log(mode);
      const root = window.document.documentElement;
      window.localStorage.setItem(COLOR_MODE_KEY, mode);
      Object.entries(COLORS).forEach(([value, colorByMode]) => {
        const cssVarName = `--color-${value}`;

        root.style.setProperty(cssVarName, colorByMode[mode]);
        setColorMode(mode);
      });
    }

    return { colorMode, changeColorMode: setColors };
  }

  const memorizedThemeContextValue = useMemo(themeContextValue, [
    colorMode,
    themeContextValue,
  ]);

  return (
    <ThemeContext.Provider value={memorizedThemeContextValue}>
      {props.children}
    </ThemeContext.Provider>
  );
}

export default ThemeProvider;
	import NextDocument, { Html, Head, Main, NextScript } from 'next/document';
	import React from 'react';

	import {
	COLORS,
	COLOR_MODE_KEY,
	INITIAL_COLOR_MODE_CSS_PROPERTY,
	} from '@/styles/themeConfig';
	/**
	* COLORS = theme colors
	* COLOR_MODE = Key for localstorage
	* "INITIAL_COLOR_MODE_CSS_PROPERTY" property for colorMode
	*/

	function setColorByTheme() {
	const COLORS = '🌈';
	const COLOR_MODE_KEY = '🔑';
	const INITIAL_COLOR_MODE_CSS_PROPERTY = '🏺';

	const prefersDarkModeFromMeadiaQuery = window.matchMedia(
	'(prefers-color-scheme: dark)'
	).matches;
	const userPersistedPreference = window.localStorage.getItem(COLOR_MODE_KEY);
	let colorMode = 'light';
	const userHasUsedToggle = typeof userPersistedPreference === 'string';
	if (userHasUsedToggle) {
	colorMode = userPersistedPreference;
	} else {
	colorMode = prefersDarkModeFromMeadiaQuery ? 'dark' : 'light';
	window.localStorage.setItem(COLOR_MODE_KEY, colorMode);
	}
	const root = document.documentElement;
	root.style.setProperty(INITIAL_COLOR_MODE_CSS_PROPERTY, colorMode);

	Object.entries(COLORS).forEach(([value, colorByTheme]) => {
	const cssVarName = `--color-${value}`;

	root.style.setProperty(cssVarName, colorByTheme[colorMode]);
	});
	}

	const minifiedCorrectedSetColorByTheme = () => {
	const corrected = String(setColorByTheme)
	.replace("'🌈'", JSON.stringify(COLORS))
	.replace('🔑', COLOR_MODE_KEY)
	.replace('🏺', INITIAL_COLOR_MODE_CSS_PROPERTY);

	const called = `(${corrected})()`;

	return called;
	};

	class Document extends NextDocument {
	render() {
	return (
	<Html>
	<Head />
	<body>
	<script
	dangerouslySetInnerHTML={{
	__html: minifiedCorrectedSetColorByTheme(),
	}}></script>
	<Main />
	<NextScript />
	</body>
	</Html>
	);
	}
	}

	export default Document;
	export const COLORS = {
	background: {
	light: 'hsl(207, 100%, 99%)',
	dark: 'hsl(0, 0%, 2%)',
	},
	text: {
	light: 'hsl(0, 0%, 2%)',
	dark: 'hsl(207, 100%, 99%)',
	},
	gray1: {
	light: 'hsl(204, 15%, 94%)',
	dark: 'hsl(0,0%, 6%)',
	},
	gray2: {
	light: 'hsl(0, 0%, 88%)',
	dark: 'hsl(0,0%, 12%)',
	},
	gray3: {
	light: 'hsl(0, 0%, 82%)',
	dark: 'hsl(0,0%, 18%)',
	},
	};

	export const COLOR_MODE_KEY = 'color-mode';
	export const INITIAL_COLOR_MODE_CSS_PROPERTY = '--initial-color-mode';