#useVisionMode

#Import

1import { useVisionMode } from "alepha/react/ui";

#Overview

Read and update the vision mode: "cvd" (colour vision deficiency) turns on the colour-blind-safe palette, "normal" turns it off. Independent of the color mode and of the theme palette, so it combines with both.

The preference lives in the alepha-ui cookie with the others. What it changes is CSS only: the class cvd on <html> (and data-vision, always set), which a stylesheet keys its token overrides on, .cvd for light and .cvd.dark for dark. @alepha/ui ships those blocks for its own tokens.

The server and the hydration pass see "normal", never the visitor's cookie (see useUiState); the boot script paints the cvd class before that, and ColorScheme keeps it in step afterwards.

#Examples

const { vision, setVision, toggle } = useVisionMode(); setVision("cvd");