Search completed in 0.90 seconds.
8 results for "color-scheme":
prefers-color-scheme - CSS: Cascading Style Sheets
WebCSS@mediaprefers-color-scheme
if you have set privacy.resistfingerprinting to true, prefers-color-scheme preference is overridden to light.
...(any other value causes firefox to return light.) the prefers-color-scheme css media feature is used to detect if the user has requested the system use a light or dark color theme.
...eme">day (changes in light scheme)</div> <div class="day dark-scheme">day (changes in dark scheme)</div> <br> <div class="night">night (initial)</div> <div class="night light-scheme">night (changes in light scheme)</div> <div class="night dark-scheme">night (changes in dark scheme)</div> css .day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } } .day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; ...
...} result specifications specification status comment media queries level 5the definition of 'prefers-color-scheme' in that specification.
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
standard metadata names defined in other specifications the css color adjustment specification defines the following metadata name: color-scheme: specifies one or more color schemes with which the document is compatible.
...the primary use for <meta name="color-scheme"> is to indicate compatibility with—and order of preference for—light and dark color modes.
... the value of the content property for color-scheme may be one of the following: normal the document is unaware of color schemes and should simply be rendered using the default color palette.
...And 3 more matches
Examine and edit CSS - Firefox Developer Tools
ToolsPage InspectorHow toExamine and edit CSS
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules.
... view @media rules for color-scheme-preference as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature.
... if you have set privacy.resistfingerprinting to true, prefers-color-scheme preference is overridden to light.
...And 2 more matches
Web accessibility for seizures and physical reactions - Accessibility
WebAccessibilitySeizure disorders
button { animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { button { animation: none; } } prefers-color-scheme this can be useful if the ambient light api is not available.
... @media (prefers-color-scheme: dark) { /* adust styles for dark mode */ } window​.match​media() there is a powerful tool available to developers via window.matchmedia().
...the user will need to be made aware of this ability, and it will need to play nice with the appropriate value for the prefers-color-scheme media query.
Experimental features in Firefox
MozillaFirefoxExperimental features
color scheme simulation adds an option to simulate different color schemes allowing to test @prefers-color-scheme media queries.
... nightly 72 no developer edition 72 no beta 72 no release 72 no preference name devtools.inspector.color-scheme-simulation.enabled execution context selector this feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed.
@media - CSS: Cascading Style Sheets
WebCSS@media
prefers-color-scheme detect if the user prefers a light or dark color scheme added in media queries level 5.
... adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.
forced-colors - CSS: Cascading Style Sheets
WebCSS@mediaforced-colors
the browser provides the color palette to authors through the css system color keywords and, if appropriate, it triggers the appropriate value of prefers-color-scheme so that authors can adapt the page.
Using media queries - CSS: Cascading Style Sheets
WebCSSMedia QueriesUsing media queries
prefers-color-scheme detect if the user prefers a light or dark color scheme added in media queries level 5.