# All files / theme useColorSchemeProvider.ts

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

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

     import { useMemo } from "react";
    import { useLocalStorage } from "../useLocalStorage.js";
    import type { ColorSchemeMode } from "./ColorSchemeProvider.jsx";
    import type { ColorSchemeContext } from "./useColorScheme.js";
    import { usePrefersDarkTheme } from "./usePrefersColorScheme.js";

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

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

    /**
     * @remarks \@since 6.0.0
     */
    export function useColorSchemeProvider(
      options: ColorSchemeProviderOptions
    ): ColorSchemeContext {
      const { key = "", defaultMode = "light" } = options;

      const { value: colorSchemeMode, setValue: setColorSchemeMode } =
        useLocalStorage({
          key,
          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;

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