# All files / theme LocalStorageColorSchemeProvider.tsx

0% Statements 0/61
0% Branches 0/1
0% Functions 0/1
0% Lines 0/61

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62

     "use client";
    import { useMemo, type ReactElement, type ReactNode } from "react";
    import { useLocalStorage } from "../useLocalStorage.js";
    import {
      ColorSchemeProvider,
      type ColorSchemeContext,
      type ColorSchemeMode,
    } from "./useColorScheme.js";
    import { usePrefersDarkTheme } from "./usePrefersColorScheme.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface LocalStorageColorSchemeProviderProps {
      /**
       * @defaultValue `""`
       */
      localStorageKey?: string;

      /**
       * @defaultValue `"light"`
       */
      defaultMode?: ColorSchemeMode;

      children: ReactNode;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function LocalStorageColorSchemeProvider(
      props: LocalStorageColorSchemeProviderProps
    ): ReactElement {
      const { localStorageKey = "", defaultMode = "light", children } = props;

      const { value: colorSchemeMode, setValue: setColorSchemeMode } =
        useLocalStorage({
          key: localStorageKey,
          defaultValue: defaultMode,
          deserializer: (item) =>
            item === "light" || item === "dark" || item === "system"
              ? item
              : defaultMode,
        });

      const prefersDarkTheme = usePrefersDarkTheme(colorSchemeMode !== "system");
      const derivedColorScheme = prefersDarkTheme ? "dark" : "light";
      const colorScheme =
        colorSchemeMode === "system" ? derivedColorScheme : colorSchemeMode;

      const value = useMemo<ColorSchemeContext>(
        () => ({
          colorScheme,
          colorSchemeMode,
          setColorSchemeMode,
        }),
        [colorScheme, colorSchemeMode, setColorSchemeMode]
      );

      return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;
    }