# All files / theme useColorSchemeMetaTag.ts

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

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

     import { useEffect } from "react";
    import { useColorScheme } from "./useColorScheme.js";

    export function useColorSchemeMetaTag(disabled = false): void {
      const { colorScheme, colorSchemeMode } = useColorScheme();
      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 = colorSchemeMode === "system" ? colorScheme : colorSchemeMode;
        document.head.appendChild(meta);

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