Color scheme examples

Color Modes in Bootstrap

Setting the color scheme in Bootstrap (as of 5.3) is super easy. You can either add data-bs-theme="dark|light" to the html attibute:

<html lang="en" data-bs-theme="dark">

Or you can add it to individual elements:

Like:

<div class="dropdown" data-bs-theme="dark"></div>

With color-scheme CSS

Change your system preferences or use your browser dev tools to light or dark to see the light and dark examples update. Normal should always stay the same.

Color scheme example - normal

Cat ipsum dolor sit amet, claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?. Bathe private parts with tongue then lick owner's face scream for no reason at 4 am. Licks your face i show my fluffy belly but it's a trap! if you pet it i will tear up your hand, when owners are asleep, cry for no apparent reason or meow meow so friends are not food purr scratch at the door then walk away. Annoy kitten brother with poking sleep over your phone and make cute snoring noises.

Color scheme example - dark

Cat ipsum dolor sit amet, claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?. Bathe private parts with tongue then lick owner's face scream for no reason at 4 am. Licks your face i show my fluffy belly but it's a trap! if you pet it i will tear up your hand, when owners are asleep, cry for no apparent reason or meow meow so friends are not food purr scratch at the door then walk away. Annoy kitten brother with poking sleep over your phone and make cute snoring noises.

Color scheme example - light

Cat ipsum dolor sit amet, claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?. Bathe private parts with tongue then lick owner's face scream for no reason at 4 am. Licks your face i show my fluffy belly but it's a trap! if you pet it i will tear up your hand, when owners are asleep, cry for no apparent reason or meow meow so friends are not food purr scratch at the door then walk away. Annoy kitten brother with poking sleep over your phone and make cute snoring noises.

You can either set the color-scheme on the :root element for the full page or on sections or individual elements. You can use media queries to target.

:root {
	color-scheme: dark light;
}
				
@media (prefers-color-scheme: dark) {
	.example.dark {
		background-color: #4b2e83;

		h3, p {
			color: #e8e3d3;
		}
	}
}

@media (prefers-color-scheme: light) {
	.example.light {
		background-color: #e8e3d3;

		h3, p {
			color: #4b2e83;
		}
	}
}