monks/color_scheme

The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. User agents change the following aspects of the UI chrome to match the used color scheme:

The color of the canvas surface.
The default colors of scrollbars and other interaction UI.
The default colors of form controls.
The default colors of other browser-provided UI, such as “spellcheck” underlines.

Component authors must use the prefers-color-scheme media feature to support the color schemes on the rest of the elements.

Common choices for operating system color schemes are “light” and “dark”, or “day mode” and “night mode”. When a user selects one of these color schemes, the operating system makes adjustments to the user interface. This includes form controls, scrollbars, and the used values of CSS system colors.

Values

dark

</>

pub const dark: #(String, String)

: Indicates that the element can be rendered using the operating system dark color scheme.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

light

</>

pub const light: #(String, String)

: Indicates that the element can be rendered using the operating system light color scheme.

normal

</>

pub const normal: #(String, String)

: Indicates that the element can be rendered using the page’s color scheme settings. If the page does not have a color scheme set, the element is rendered using the page’s default color settings.

only

</>

pub const only: #(String, String)

: Forbids the user agent from overriding the color scheme for the element. Can be used to turn off color overrides caused by Chrome’s Auto Dark Theme, by applying color-scheme: only light; on a specific element or :root.

raw

</>

pub fn raw(value: String) -> #(String, String)

Enter a raw string value for color-scheme

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

unset

</>

pub const unset: #(String, String)

var

</>

pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for color-scheme. It will be wrapped in var() and have -- prepended.