LIGHT COLOR FOR DARK MODE

Drab Dolphin answered on September 3, 2022 Popularity 10/10 Helpfulness 2/10

answer LIGHT COLOR FOR DARK MODE

LIGHT COLOR FOR DARK MODE

Comment

root {
	--primary-hs: 250 30%;
	--secondary-hs: 190 40%;

	--l-0: 0%;
	--l-30: 30%;
	--l-40: 40%;
	--l-50: 50%;
	--l-90: 90%;
	--l-100: 100%;
}

@media (prefers-color-scheme: dark) {
	:root {
		--l-0: 100%;
		--l-30: 70%;
		--l-40: 60%;
		--l-90: 10%;
		--l-100: 0%;
	}
}


body {
	background: hsl(0 0% var(--l-100));
	color: hsl(0 0% var(--l-0));
}

h1 {
	color: hsl(var(--primary-hs) var(--l-30));
}

article {
	background: hsl(var(--primary-hs) var(--l-90));
}

article h2 {
	background: hsl(var(--primary-hs) 40%);
	color: white;
}

footer {
	color: hsl(0 0% var(--l-40));
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: lea.verou.me

Tags: css light mode

Link to this answer
Share Copy Link

Contributed on Sep 03 2022

Drab Dolphin

0 Answers Avg Quality 2/10

LIGHT COLOR FOR DARK MODE

Contents

More Related Answers

LIGHT COLOR FOR DARK MODE

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.