Responsive Pages and Color Themes With Minimal CSS

Building a responsive website with color themes? Better start at the root

Victoria Drake
Nov 24, 2020 · 3 min read
Laptop with design software
Laptop with design software
Photo by NordWood Themes on Unsplash.

If you happen to visit my website, you may notice I’ve spruced it up a bit. Victoria.dev can now better respond to your devices and preferences!

Here’s how to use CSS media queries and custom properties to improve your visitor’s browsing experience with just a few lines of CSS.

Catering to Color Preferences

The prefers-color-scheme media feature can be queried to serve up your user’s color scheme of choice. The light option is the go-to version if no active preference is set, and it has decent support across modern browsers.

Additionally, users reading on certain devices can also set light and dark color themes based on a schedule. For example, my phone uses light colors throughout its UI during the daytime and dark colors at night. You can make your website follow suit!

Avoid repeating a lot of CSS by setting custom properties for your color themes on your :root pseudo-class. Create a version for each theme you wish to support. Here’s a quick example you can build on:

As you can see, you can use custom properties to set all kinds of values. To use these as variables with other CSS elements, use the var() function:

header {
color: var(--text-primary);
background-color: var(--background);
box-shadow: var(--shadow);
}

In this quick example, the header element will now display your user’s preferred colors according to their browser settings!

Firefox

You can test out light and dark modes in Firefox by typing about:config into the address bar. Accept the warning if it pops up, then type ui.systemUsesDarkTheme into the search.

Choose a Number value for the setting, then input a 1 for dark or 0 for light:

A screenshot of setting the color theme in Firefox
A screenshot of setting the color theme in Firefox

Brave

If you’re using Brave, find the color theme settings in Settings > Appearance > Brave colors:

A screenshot of setting the color theme in Brave
A screenshot of setting the color theme in Brave

Variable Scaling

You can also use a custom property to effortlessly adjust the size of text or other elements depending on your user’s screen size. The width media feature tests the width of the viewport. While width: _px will match an exact size, you can also use min and max to create ranges.

Query with min-width: _px to match anything over _ pixels and max-width: _px to match anything up to _ pixels.

Use these queries to set a custom property on the :root to create a ratio:

Then make an element responsive by using the calc() function. Here are a few examples:

In this example, multiplying an initial value by your --scale custom property allows the size of headings and images to magically adjust to your user’s device width.

The relative unit rem will have a similar effect. You can use it to define sizes for elements relative to the font size declared at the root element:

Of course, you can also multiply two custom properties. For example, setting the --max-img as a custom property on the :root can help to save you time later on by not having to update a pixel value in multiple places:

img {
max-width: calc(var(--max-img) * var(--scale));
}

Raise Your Responsiveness Game

Try out these easy wins for a website that caters to your visitor’s devices and preferences. I’ve put them to good use now on victoria.dev. Let me know how you like it!

Thanks for reading!

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Zack Shapiro

Victoria Drake

Written by

Director of Engineering. Core maintainer, OWASP Web Security Testing Guide. Only a slice of my posts are here. Get the full pie 👉 https://victoria.dev

Better Programming

Advice for programmers.

Victoria Drake

Written by

Director of Engineering. Core maintainer, OWASP Web Security Testing Guide. Only a slice of my posts are here. Get the full pie 👉 https://victoria.dev

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store