# All files / src/theme LocalStorageColorSchemeProvider.tsx

100% Statements 130/130
100% Branches 6/6
100% Functions 2/2
100% Lines 130/130

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
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    1311x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    2x
    1x
    1x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
     "use client";
    import { type ReactElement, type ReactNode } from "react";
    import { useLocalStorage } from "../useLocalStorage.js";
    import { ColorSchemeProvider, type ColorSchemeMode } from "./useColorScheme.js";
    import { useColorSchemeProvider } from "./useColorSchemeProvider.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface LocalStorageColorSchemeProviderProps {
      /**
       * Set this to `true` to prevent a `<meta name="color-scheme" content="{COLOR_SCHEME}">`
       * from being added to the `document.head`.
       *
       * @defaultValue `false`
       */
      disableMetaTag?: boolean;

      /**
       * Set this to a string like `"colorScheme"` if you want to store the user's
       * color scheme preference in local storage.
       *
       * @defaultValue `""`
       */
      localStorageKey?: string;

      /**
       * The current color scheme mode that is being used by your app. This should
       * match the `$color-scheme` SCSS variable.
       *
       * @defaultValue `"light"`
       */
      defaultColorSchemeMode?: ColorSchemeMode;

      children: ReactNode;
    }

    /**
     * An optional implementation of the {@link ColorSchemeProvider} that supports
     * storing the value in local storage if the
     * {@link LocalStorageColorSchemeProviderProps.localStorageKey} is provided.
     *
     * @example
     * ```tsx
     * import {
     *   LocalStorageColorSchemeProvider,
     *   SegmentedButtonContainer,
     *   SegmentedButton,
     *   useColorScheme,
     * } from "@react-md/core";
     * import { createRoot } from "react-dom/client";
     *
     * function MyComponent(): ReactElement {
     *   const { colorScheme, colorSchemeMode, setColorSchemeMode } = useColorScheme();
     *   // colorScheme: "light" | "dark"
     *   // colorSchemeMode: "light" | "dark" | "system"
     *
     *   return (
     *     <>
     *       The current color scheme is {colorScheme}
     *       <SegmentedButtonContainer>
     *         <SegmentedButton
     *           selected={colorSchemeMode === "light"}
     *           onClick={() => {
     *             setColorSchemeMode("light")
     *           }}
     *         >
     *           Light
     *         </SegmentedButton>
     *         <SegmentedButton
     *           selected={colorSchemeMode === "dark"}
     *           onClick={() => {
     *             setColorSchemeMode("dark")
     *           }}
     *         >
     *           Dark
     *         </SegmentedButton>
     *         <SegmentedButton
     *           selected={colorSchemeMode === "system"}
     *           onClick={() => {
     *             setColorSchemeMode("system")
     *           }}
     *         >
     *           System
     *         </SegmentedButton>
     *       </SegmentedButtonContainer>
     *     </>
     *   )l
     * }
     *
     * const container = document.getElementById("root");
     * const root = createRoot(container);
     *
     * root.render(
     *   <LocalStorageColorSchemeProvider defaultColorSchemeMode="system">
     *     <MyComponent />
     *   </LocalStorageColorSchemeProvider>
     * );
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function LocalStorageColorSchemeProvider(
      props: LocalStorageColorSchemeProviderProps
    ): ReactElement {
      const {
        localStorageKey = "",
        defaultColorSchemeMode = "light",
        disableMetaTag,
        children,
      } = props;

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

      const value = useColorSchemeProvider({
        disableMetaTag,
        colorSchemeMode,
        setColorSchemeMode,
      });

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