@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
52
Layout
Grid View
Row View
Tempo Labs
Tools
App
/ 

Tempo Labs

1.27.25
AI, Dev Tools, Website Builder, Web Apps
Hishaam
Inspo
Website
/ 

Hishaam

1.27.25
Creative, Personal, Portfolio, Webflow, GSAP
Vellar Sound
Inspo
Website
/ 

Vellar Sound

1.27.25
Creative, Audio, Agency, Webflow
Studio Direction
Inspo
Website
/ 

Studio Direction

1.27.25
Creative, Agency, Portfolio, Webflow, GSAP
Digidop
Inspo
Website
/ 

Digidop

1.27.25
Creative, No-code, Agency, Portfolio, Webflow, GSAP
Onlook
Tools
App
/ 

Onlook

1.27.25
AI, Dev Tools, Website Builder, Cursor
Bulk edit SEO title and description in Webflow
Learn
Article
/ 

Bulk edit SEO title and description in Webflow

1.25.25
No-code, SEO, API, Workflow, Webflow
Val town
Tools
App
/ 

Val town

1.23.25
Dev Tools, Javascript, Backend, Automation, Webhooks, API, Authentication
Sygnal Attributes
Code
Library
/ 

Sygnal Attributes

1.23.25
No-code, Dev Tools, Javascript, Extending, Components, Sygnal
Dropbox Brand Guidelines
Inspo
Website
/ 

Dropbox Brand Guidelines

1.18.25
Creative, SAAS, Brand Guide, Webflow, Rive
SingleStore
Tools
App
/ 

SingleStore

1.14.25
Dev Tools, Database
Radius Calculator
Tools
Utility
/ 

Radius Calculator

1.14.25
Dev Tools, Creative, Components, CSS
Snowhouse Studio | Year in Review 2024
Inspo
Website
/ 

Snowhouse Studio | Year in Review 2024

1.14.25
Creative, No-code, Agency, Landing, Scrollytelling, Webflow, Snowhouse Studio
Framer Commerce
Tools
Utility
/ 
Website

Framer Commerce

1.11.25
No-code, Dev Tools, Ecommerce, Framer, Shopify
State of JavaScript 2024
Learn
Article
/ 

State of JavaScript 2024

1.8.25
Dev Tools, Javascript, Analytics, Workflow
Agent Pages
Tools
Directory
/ 
Website

Agent Pages

1.7.25
AI, SAAS, Gallery, Webflow
Bland AI
Inspo
Website
/ 
App

Bland AI

1.7.25
AI, SAAS, Automation, Webflow
Lindy.ai
Inspo
Website
/ 
App

Lindy.ai

1.7.25
AI, SAAS, Automation, Workflow, Webflow
E2B
Inspo
Website
/ 

E2B

1.7.25
AI, Dev Tools, Security, Workflow, Marketing, Webflow
Phidata
Inspo
Website
/ 

Phidata

1.7.25
AI, Dev Tools, Landing, Webflow
Greenlite
Inspo
Website
/ 

Greenlite

1.7.25
Financial, AI, Security, Marketing, Webflow
Relevance AI
Inspo
Website
/ 

Relevance AI

1.7.25
AI, Automation, Workflow, Webflow
HTMLtoflow Webflow App
Tools
Utility
/ 

HTMLtoflow Webflow App

1.6.25
No-code, HTML, Workflow, Webflow
NIKI Studio
Inspo
Website
/ 

NIKI Studio

1.6.25
Creative, Agency, Portfolio, Framer
Midday
Tools
App
/ 

Midday

1.6.25
Project Management, Workflow
Cursor Directory
Tools
Directory
/ 

Cursor Directory

1.6.25
AI, Dev Tools, Workflow, Cursor
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.