Dark Mode and CSS Variables


by Jeremy Caudle
code

I haven't done a light and dark theme with CSS variables yet, so I thought I would give it a try.

Prefers-Color-Scheme

View the code:

HTML and JS 
<section class="code-block">
<h1>Prefers-<em>Color</em>-Scheme</h1>
		</section>
CSS 
:root {
		    	--bg-main: white;
		    	--text-color: gray;
		    	--accent-color: blue;
		    }
			section.code-block {
				display: grid;
				place-items: center;
				width: clamp(16em, 90vw, 60em);
				background: var(--bg-main);
				color: var(--text-color);
				min-height: 50vh;
				margin: 3rem auto;
			}
			.code-block > h1 {
font-size: 1.5rem;
}
			em {
				color: var(--accent-color);
			}
			
			@media (prefers-color-scheme:dark) {
		    	:root {
		    	--bg-main: black;
		    	--text-color: gray;
		    	--accent-color: yellow;
		    	}
		}

Tags