use­Browser­Preferences

const ScreenContext = React.createContext({
  prefersReducedMotion: false,
  prefersColorScheme: "light",
  forcedColors: false,
});

const BrowserPreferencesExample = () => {
  const { prefersReducedMotion, prefersColorScheme, forcedColors } =
    React.useContext(ScreenContext);

  return (
    <section className="hooks-example key-listener-example jkl-spacing-2xl--bottom">
      <h2 className="jkl-h2 jkl-spacing-xl--bottom">
        Preferanser fra nettleseren din
      </h2>
      <DescriptionList>
        <DescriptionTerm>Redusert bevegelse</DescriptionTerm>
        <DescriptionDetail>
          {prefersReducedMotion ? "Ja" : "Ingen preferanse"}
        </DescriptionDetail>
        <DescriptionTerm>Fargetema</DescriptionTerm>
        <DescriptionDetail>
          {prefersColorScheme === "light" ? "Lyst" : "Mørkt"}
        </DescriptionDetail>
        <DescriptionTerm>Høykontrast</DescriptionTerm>
        <DescriptionDetail>{forcedColors ? "Ja" : "Nei"}</DescriptionDetail>
      </DescriptionList>
    </section>
  );
};

const Provider = () => {
  const { prefersColorScheme, prefersReducedMotion, forcedColors } =
    useBrowserPreferences();

  return (
    <ScreenContext.Provider
      value={{ prefersReducedMotion, prefersColorScheme, forcedColors }}
    >
      <BrowserPreferencesExample />
    </ScreenContext.Provider>
  );
};

render(<Provider />);