Theming
Getting started with ... is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.
Even branding can be responsive. You can adjust the presentation of your website to match the user's preference. But first, here's how to extend your website's branding to include the browser itself.
Customize the browser interface
Some browsers allow you to suggest a theme color based on your website's palette.
The browser's interface adapts to your suggested color. Add the color in a meta element named theme-color in the head of your pages.
<meta name="theme-color" content="#00D494">
You can update the value of theme-color using JavaScript. But use this power wisely.
It can be overwhelming for users if their browser's color scheme changes too often.
Think about subtle ways to adjust the theme color. If the changes are too jarring, users will leave in annoyance.
You can also specify a theme color in a web app manifest file. This is a JSON file with metadata about your website.
Link to the manifest file from the head of your documents. Use a link element with a rel value of manifest.
<link rel="manifest" href="/manifest.json">
In the manifest file, list your metadata using key/value pairs.
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
If a visitor decides to add your website to their home screen, the browser will use the information in your manifest file to display an appropriate shortcut.
Provide a dark mode
Many operating systems allow users to specify a preference for a light or a dark color palette,
which is a good idea to optimize your site to your user's theme preferences.
You can access this preference in a media feature called prefers-color-scheme.
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
Specify theme colors with the prefers-color-scheme media feature within the meta element.
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
You can also use the prefers-color-scheme media feature inside SVG.
If you use an SVG file for your favicon, it can be adjusted for dark mode.
Thomas Steiner wrote about
prefers-color-scheme in SVG favicons for dark mode icons.
Theming with custom properties
If you use the same color values in multiple places throughout your CSS, it could be quite tedious to repeat all your selectors within a prefers-color-scheme media query.
body {
background-color: white;
color: black;
}
input {
background-color: white;
color: black;
border-color: black;
}
button {
background-color: black;
color: white;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
input {
background-color: black;
color: white;
border-color: white;
}
button {
background-color: white;
color: black;
}
}
Use CSS custom properties to store your color values. Custom properties work like variables in a programming language. You can update the value of a variable without updating its name.
If you update the values of your custom properties within a prefers-color-scheme media query,
you won't have to write all your selectors twice.
html {
--page-color: white;
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
html {
--page-color: black;
--ink-color: white;
}
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
input {
background-color: var(--page-color);
color: var(--ink-color);
border-color: var(--ink-color);
}
button {
background-color: var(--ink-color);
color: var(--page-color);
}
See building a color scheme for more advanced examples of theming with custom properties.
Images
If you are using SVGs in your HTML, you can apply custom properties there too.
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
Now your icons will change their colors along with the other elements on your page.
If you want to tone down the brightness of your photographic images when displayed in dark mode, you can apply a filter in CSS.
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
For some images, you might want to swap them out completely in dark mode.
For example, you might want to show a map with a darker color scheme.
Use the <picture> element containing a <source> element with the prefers-color-scheme media query.
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
Forms
Browsers provide a default color palette for form fields. Let the browser know that your site offers both a dark and a light mode. That way, the browser can provide the appropriate default styling for forms.
Add this to your CSS:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
You can also use HTML. Add this in the head of your documents:
<meta name="supported-color-schemes" content="light dark">
Use the accent-color property in CSS to style checkboxes, radio buttons, and some other form fields.
html {
accent-color: red;
}
It's common for dark themes to have subdued brand colors. You can update the accent-color value for dark mode.
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
It makes sense to use a custom property for this so you can keep all your color declarations in one place.
html {
color-scheme: light;
--page-color: white;
--ink-color: black;
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
--page-color: black;
--ink-color: white;
--highlight-color: pink;
}
}
html {
accent-color: var(--highlight-color);
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
Providing a dark mode is just one example of adapting your site to suit your user's preferences. Next you'll learn how to make your site adaptable to all sorts of accessibility considerations.