Auto dark theme for the website

I don’t want to prove, that you need a dark theme, just look:

1. Apple: dark theme in iOS
2. Apple: dark theme in macOS
3. Google: dark theme in Material Design
4. Microsoft: dark theme in Windows

Now we have a dark theme on the web. Safari, Chrome, Firefox and other browsers are support dark theme for websites.

Use it. Now I’ll explain how to make a good dark theme.

Start point — this website. Look and scroll. If you see it in light mode, try to switch themes in your settings. There’s dark mode support, but I’ll go back to the development process.

The blog was in light colors with contrast blocks — links on articles. It’s easy to start because I am using not a colored background. Let’s define the logic, to understand, how we’ll build the dark mode.

Logic

Have: a light theme\
Will have: fundament for the dark mode

The visitor doesn’t expect theme toggle, he wants to set mode once in system settings and forget about it. If the user left the light mode, he doesn’t want to see our blog in dark mode. If the user sets the dark mode — light blog especially not that he needs. So we need to give a task to the website to define the user’s color theme and set the same on the website.

CSS

Have: a common CSS code\
Will have: CSS variables to define all in one place

Going to CSS and understand, that we need to use variables. Write rules with variables and next use it:

:root {
  /* Defining variables */
  --background-color: #fafafa;
  --foreground-color: #121212;
  --accent-color: #ff5252;
}

div {
  color: var(--foreground-color);
  background-color: var(--background-color);
}

a:hover {
  color: var(--accent-color);
}

Google:

«Use dark grey — rather than black — to express elevation and space in an environment with a wider range of depth. Apply limited color…»

— told, that using black (#000000) for a dark theme is bad — using dark grey is better. Setting color for a dark theme. If there are more than three colors: background, text and accent color — inverting colors are bad, you need to analyze colors and how they work.

@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Redefining color variables for dark theme */
    --background-color: #121212;
    --foreground-color: #fafafa;
  }
}

Work with colors

Have: common colors invert\
Will have: replacing one color with others

Accent colors should be lighter, to save contrast. But the dark theme isn’t just about replacing colors. Google is giving advice, that blocks, that on the top, more near to the user, should be lighter. To place a block with the same color as a background, you should add a border.

Don’t make large areas to bright and contrast. Change design that way, so there will be more dark colors. In my blog, I am using one scheme: light theme — bright colored blocks (links to article), dark theme — dark blocks with colored text. Colors replaced with lighter variants.

To check colors contrast, Chrome has a cool tool in dev tools: open dev tools (Ctrl|Cmd + Shift + I) and enable cursor (Ctrl|Cmd + Shift + C), hover text and see little window with contrast number and checkmarks. If you click on the color in styles, you’ll see contrast ration and lines, which help you to choose proper colors.

Use this tool, here you can find cool colors and define yours to get additional colors for different themes.

Summing up: variables, proper colors, media-styles for the dark theme.

My blog, where you can see this dark theme: davidkistauri.ru/blog