color-scheme dark/light Values Lookup
Supported color-scheme declarations influence UA native surfaces, not set authored foreground/background colors automatically. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Color-scheme declares rendering schemes an element can support.
Color-scheme declares rendering schemes an element can support.1
It differs from a media query that reports user preference. Use color-scheme dark/light Values Lookup to look up a supported term.
When to use color-scheme dark/light Values Lookup
Use color-scheme dark/light Values Lookup to look up a supported term. Choose the exact supported token from the table; preserve its punctuation and capitalization.
How to use color-scheme dark/light Values Lookup and understand its results
- Choose the exact supported token from the table; preserve its punctuation and capitalization.
- Enter Color scheme using the field table and validation rules below, then run the tool.
- Read Meaning and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| colorScheme | Color scheme | string | Required; constraints below |
Enter one of the exact supported colorScheme tokens in the table below. The implementation performs a case-sensitive lookup and returns the stored meaning without interpreting a stylesheet, audio recording or performance. Unsupported tokens, added whitespace and alternate capitalization are input errors. The entries describe a bounded vocabulary rather than every valid value in the wider topic.
meaning = storedTable[exactSupportedToken] Field order, units and branch conditions follow the implementation explanation above.
| Exact supported token | Stored meaning |
|---|---|
| normal | no supported schemes asserted by this value |
| light | supports light color-scheme rendering |
| dark | supports dark color-scheme rendering |
| light dark | supports both in declared preference order |
| only light | supports light and forbids UA overriding the scheme |
| Output field | Meaning | Value type |
|---|---|---|
| meaning | Stored explanation for the exact supported token. | string |
{
"input": {
"colorScheme": "light dark"
},
"output": {
"meaning": "supports both in declared preference order"
}
}Limitations and assumptions
It differs from a media query that reports user preference. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use prefers-color-scheme Query Pattern for a related task: Preferred color-scheme queries express a reported light or dark preference.
Use inverted-colors Media Lookup for a related task: An inverted-colors query concerns display color inversion.
References
-
color-scheme dark/light Values Lookup — tool.io
Similar or alternative tools
- prefers-color-scheme Query Pattern
Preferred color-scheme queries express a reported light or dark preference.
- inverted-colors Media Lookup
An inverted-colors query concerns display color inversion.