Responsive Pages and Color Themes With Minimal CSS
Building a responsive website with color themes? Better start at the root
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!
Catering to Color Preferences
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:
In this quick example, the
header element will now display your user’s preferred colors according to their browser settings!
You can test out
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.
Number value for the setting, then input a
1 for dark or
0 for light:
If you’re using Brave, find the color theme settings in Settings > Appearance > Brave colors:
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
max to create ranges.
min-width: _px to match anything over
_ pixels and
max-width: _px to match anything up to
Use these queries to set a custom property on the
:root to create a ratio:
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:
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!