@Media Prefers Dark/Light [Snippet] <> No-Code Supply Co.
Code
Snippet
/ 

@Media Prefers Dark/Light

View 
 
Snippet
*
 ↗
View 
Snippet
 ↗
@Media Prefers Dark/Light
@media (prefers-color-scheme: dark) {
--lightness: 90%;
--text-1: hsl(200 10% var(--lightness));
}
/*Other uses:*/
@media (prefers-contrast: high) {...}
@media (prefers-reduce-transparency: reduce) {...}
@media (forced-colors: high) {...}
@media (light-level: dim) {...}
view raw prefers-dark-light.css hosted with ❤ by GitHub

Use CSS to adjust the default colors on a site based on the users color preferences in their OS. Try using the Chrome Dev Tools rendering tab to test this.

Tags

CSS
Accessibility
Aesthetic

Share this item

Twitter
Facebook
LinkedIn

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
11.21.19

Similar items

Items
53
Layout
Grid View
Row View
Shaga Odyssey
Inspo
Website
/ 

Shaga Odyssey

11.12.24
Gaming, Web3, Landing, Scrollytelling, Webflow
Flighty
Inspo
Website
/ 

Flighty

11.12.24
Travel, Mobile Apps, Landing, Framer
11x AI
Inspo
Website
/ 

11x AI

11.12.24
AI, SAAS, Marketing, Webflow
Travel Next Level
Inspo
Website
/ 

Travel Next Level

11.12.24
Travel, Gallery, Webflow, Memberstack
Lapz
Inspo
Website
/ 

Lapz

11.7.24
Transportation, Sports, Technology, Landing, Scrollytelling, 3D, Webflow
Featured
Preview
↗

Osmo

Start building websites people remember.
View item
Unblocked AI Figma Plugin
Tools
Utility
/ 

Unblocked AI Figma Plugin

11.7.24
Creative, AI, Assets, Workflow, Figma
Onx UI
Tools
Utility
/ 
Website

Onx UI

11.7.24
Creative, No-code, Components, Gallery, Workflow, Webflow, Mast
Webflow With Cloudflare Proxy On (My New Kickass Method!)
Learn
Article
/ 

Webflow With Cloudflare Proxy On (My New Kickass Method!)

10.30.24
No-code, Dev Tools, Proxy, Workflow, Hosting, Assets, Webflow, Using Webflow with Cloudflare
1-800-D2C
Inspo
Website
/ 
Directory

1-800-D2C

10.30.24
SAAS, App, Gallery, Shopify, Webflow
Perplexity Supply
Inspo
Website
/ 

Perplexity Supply

10.30.24
AI, Creative, Apparel, Ecommerce, Framer, Shopify
Glyphic
Inspo
Website
/ 

Glyphic

10.30.24
SAAS, AI, Marketing, Webflow
Wand
Inspo
Website
/ 
App

Wand

10.30.24
Creative, 3D, Workflow, Landing, Webflow
Check
Inspo
Website
/ 

Check

10.29.24
Financial, HR, SAAS, Marketing, Webflow
Flow Sparrow
Inspo
Website
/ 

Flow Sparrow

10.29.24
Creative, No-code, Agency, Portfolio, Webflow
FlowMapp
Tools
App
/ 
Website

FlowMapp

10.29.24
Creative, SAAS, Dev Tools, Website Builder, Agency, Workflow, Webflow
Popcorn
Inspo
Website
/ 

Popcorn

10.29.24
Technology, SAAS, Landing, Webflow, Moritz Petersen
Autopilot
Inspo
Website
/ 

Autopilot

10.29.24
Travel, SAAS, Landing, Webflow
ShareClub
Inspo
Website
/ 

ShareClub

10.29.24
Financial, Marketing, Webflow
Fitonist App
Inspo
Website
/ 

Fitonist App

10.29.24
Fitness, Mobile Apps, Landing, Scrollytelling, Webflow
Wayfinder Ventures
Inspo
Website
/ 

Wayfinder Ventures

10.29.24
Financial, Technology, Marketing, Webflow
Groteskly Yours Studio
Tools
Fonts
/ 

Groteskly Yours Studio

10.28.24
Creative, Fonts, Gallery
Reweb
Tools
App
/ 

Reweb

10.27.24
Dev Tools, Website Builder, Javascript, CSS
MINO
Inspo
Website
/ 

MINO

10.27.24
Creative, Architecture, Assets, Agency, Portfolio, Framer
Biograph
Inspo
Website
/ 

Biograph

10.27.24
Health & Wellness, Medical, Technology, Marketing, Framer
Bleed Design Studio
Inspo
Website
/ 

Bleed Design Studio

10.27.24
Creative, Agency, Portfolio, Framer
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.