@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
Rotato
Tools
App
/ 

Rotato

10.24.24
Creative, SAAS, Portfolio, Assets
También Studio Courses
Learn
Course
/ 
Website

También Studio Courses

$99+
10.24.24
Creative, No-code, Education, Landing, Webflow, GSAP, Notion, También Studio
CSS Hamburgers
Tools
Component
/ 

CSS Hamburgers

10.24.24
Dev Tools, No-code, CSS, Components, Navigation, Webflow, Timothy Ricks
X Shack
Inspo
Website
/ 

X Shack

10.24.24
Health & Wellness, Community, Landing, Scrollytelling, Webflow
AI/ML API
Tools
Utility
/ 
Website

AI/ML API

10.24.24
AI, API, Landing, Webflow
Featured
Preview
↗

Osmo

Start building websites people remember.
View item
Angel & Anchor
Inspo
Website
/ 

Angel & Anchor

10.22.24
Creative, Agency, Portfolio, Webflow
Uplink
Inspo
Website
/ 

Uplink

10.22.24
SAAS, Marketing, Webflow, Off Brand
Gev Design
Inspo
Website
/ 

Gev Design

10.22.24
Creative, Personal, Portfolio, Webflow
August Health
Inspo
Website
/ 

August Health

10.22.24
Health & Wellness, SAAS, Marketing, Webflow
ShopiFrame
Tools
Utility
/ 
Website

ShopiFrame

10.21.24
No-code, Ecommerce, Extending, Landing, Framer, Shopify
Juno
Inspo
Website
/ 

Juno

10.21.24
HR, Health & Wellness, Landing, Webflow
Live Near Friends
Inspo
Website
/ 

Live Near Friends

10.21.24
Housing, Real Estate, SAAS, Gallery, Marketing, Framer
The Real Hotels
Inspo
Website
/ 

The Real Hotels

10.18.24
Travel, Entertainment, Real Estate, Gallery, Webflow, GSAP, Jordon Gilroy
GSAP is Joining Webflow
Learn
Article
/ 
Library

GSAP is Joining Webflow

10.18.24
Dev Tools, Javascript, Animation, GSAP, Webflow
Goodnight
Inspo
Website
/ 

Goodnight

10.17.24
Events, Agency, Portfolio, Webflow, Somefolk
Bookselects
Inspo
Website
/ 

Bookselects

10.17.24
Writing, Education, Gallery, Webflow
Veloce Media Group
Inspo
Website
/ 

Veloce Media Group

10.17.24
Creative, Agency, Portfolio, Webflow, Ethan Suero
Origin IQ
Inspo
Website
/ 

Origin IQ

10.17.24
Financial, Landing, Webflow, Ethan Suero
Kick
Inspo
Website
/ 

Kick

10.17.24
Financial, SAAS, Marketing, Webflow
Feta
Inspo
Website
/ 

Feta

10.17.24
Collaboration , SAAS, Marketing, Webflow
Ghost
Inspo
Website
/ 

Ghost

10.17.24
SAAS, Ecommerce, Marketing, Framer
Port
Inspo
Website
/ 

Port

10.17.24
Dev Tools, Marketing, Webflow
Rapid301
Tools
Utility
/ 

Rapid301

10.16.24
No-code, Dev Tools, SEO, Workflow, Webflow
Carthagos
Inspo
Website
/ 

Carthagos

10.15.24
Creative, Agency, Portfolio, Webflow
VisualDX
Code
Library
/ 
Website

VisualDX

10.15.24
No-code, Javascript, Extending, Workflow, Tabs, Count, Webflow
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.