# All files / src/theme useColorScheme.ts

100% Statements 135/135
100% Branches 2/2
100% Functions 2/2
100% Lines 135/135

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
    131
    132
    133
    134
    135
    1361x
    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
    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
    7x
    7x
     "use client";
    import { createContext, useContext } from "react";
    import type { UseStateSetter } from "../types.js";

    /** @remarks \@since 6.0.0 */
    export type ColorScheme = "light" | "dark";

    /** @remarks \@since 6.0.0 */
    export type ColorSchemeMode = ColorScheme | "system";

    /**
     * @remarks \@since 6.0.0
     */
    export interface ColorSchemeModeBehavior {
      /**
       * The current color scheme mode that is being used by your app that should
       * default to the `$color-scheme` SCSS variable. If the
       * {@link setColorSchemeMode} is called, this will update to that new value.
       *
       * TODO: Figure out how to document this
       *
       * - `colorScheme` - only `light` or `dark` -- only useful when the `colorSchemeMode` is set to `system`
       * - `colorSchemeMode` - current **user** defined color scheme behavior? should default to `$color-scheme`, but will change based on `setColorSchemeMode`
       */
      colorSchemeMode: ColorSchemeMode;

      /**
       * A function to update the color scheme.
       *
       * @see {@link useColorScheme} for an example usage
       */
      setColorSchemeMode: UseStateSetter<ColorSchemeMode>;
    }

    /** @remarks \@since 6.0.0 */
    export interface ColorSchemeContext extends ColorSchemeModeBehavior {
      /**
       * The current color scheme that is being used. This is only useful when the
       * {@link colorSchemeMode} is set to `"system"`.
       */
      colorScheme: ColorScheme;
    }

    const context = createContext<ColorSchemeContext>({
      colorScheme: "light",
      colorSchemeMode: "light",
      setColorSchemeMode() {
        if (process.env.NODE_ENV !== "production") {
          throw new Error("The `ColorSchemeProvider` has not been initialized.");
        }
      },
    });
    context.displayName = "ColorScheme";
    export const { Provider: ColorSchemeProvider } = context;

    /**
     * @example
     * Lazy Load Configurable Themes
     * ```tsx
     * import type { ChangeEvent, ReactElement } from "react";
     * import { lazy } from "react";
     * import { createRoot } from "react-doc/client";
     * import { Checkbox, ColorSchemeProvider, useColorScheme } from "@react-md/core";
     *
     * const DarkTheme = lazy(() => import("./DarkTheme"));
     * const SystemTheme = lazy(() => import("./SystemTheme"));
     *
     * function App(): ReactElement {
     *   const { colorScheme, colorSchemeMode, setColorSchemeMode } =
     *     useColorScheme();
     *
     *   const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
     *     const { value } = event.currentTarget;
     *     if (value === "light" || value === "dark" || value === "system") {
     *       setColorSchemeMode(value);
     *     }
     *   };
     *
     *   return (
     *     <>
     *       {colorSchemeMode === "dark" && <DarkTheme />}
     *       {colorSchemeMode === "system" && <SystemTheme />}
     *       <Checkbox
     *         label="Light"
     *         value="light"
     *         checked={colorSchemeMode === "light"}
     *         onChange={onChange}
     *       />
     *       <Checkbox
     *         label="Dark"
     *         value="dark"
     *         checked={colorSchemeMode === "dark"}
     *         onChange={onChange}
     *       />
     *       <Checkbox
     *         label="System"
     *         value="system"
     *         checked={colorSchemeMode === "system"}
     *         onChange={onChange}
     *       />
     *     </>
     *   );
     * }
     *
     *
     * const root = createRoot(document.getElementById("root"));
     * root.render(
     *   <ColorSchemeProvider>
     *     <App />
     *   </ColorSchemeProvider>
     * );
     *
     * // DarkTheme.tsx
     * import { useHtmlClassName } from "@react-md/core";
     *
     * import styles from "./DarkTheme.module.scss";
     *
     * export default function DarkTheme(): null {
     *   useHtmlClassName(styles.theme);
     *   return null
     * }
     *
     * // DarkTheme.module.scss
     * @use "@react-md/core";
     *
     * .theme {
     *   @include core.use-dark-theme;
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function useColorScheme(): Readonly<ColorSchemeContext> {
      return useContext(context);
    }