# All files / src/theme useColorSchemeMetaTag.ts

100% Statements 53/53
100% Branches 6/6
100% Functions 1/1
100% Lines 53/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
    541x
    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
    7x
    7x
    7x
    7x
    1x
    1x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    7x
    7x
     "use client";
    import { useEffect } from "react";
    import { type ColorScheme } from "./useColorScheme.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface ColorSchemeMetaTagOptions {
      /**
       * @defaultValue `"false"`
       */
      disabled?: boolean;
      colorScheme: ColorScheme;
    }

    /**
     * Adds a `<meta name="color-scheme" content="light">` or
     * `<meta name="color-scheme" content="dark">` into the head element. This
     * should not be used if you are using the `useColorSchemeProvider` since it is
     * already built in.
     *
     * @remarks \@since 6.0.0
     */
    export function useColorSchemeMetaTag(
      options: ColorSchemeMetaTagOptions
    ): void {
      const { disabled, colorScheme } = options;

      useEffect(() => {
        if (disabled || document.querySelector('meta[name="color-scheme"]')) {
          return;
        }

        // Adding the meta tag allows the default browser styles for form inputs to
        // be updated as well.
        //
        // Chrome and Firefox:
        // - the input type="number"'s spinner color will update from grey to white
        // - native `<select>` background color updates from grey/white to a dark color
        //
        // Chrome:
        // - the date/time/datetime icons will change from black to white
        // - the date/time/datetime pickers will use a darker theme instead of white
        const meta = document.createElement("meta");
        meta.name = "color-scheme";
        meta.content = colorScheme;
        document.head.appendChild(meta);

        return () => {
          document.head.removeChild(meta);
        };
      }, [disabled, colorScheme]);
    }