CSS: Dark Theme

By Xah Lee. Date: . Last updated: .

here's how to make your website support dark theme.

Essentially, use CSS: Media Query on prefers-color-scheme:dark. Then, set text color to white, and background color to black. Also, you might to add black background color to image tag, figure tag, or SVG files. 

@media (prefers-color-scheme:dark) {
 body {
color:white;
background-color:black;
}

 a:visited,a:link {
color:dodgerblue;
}

}

Shade of Dark for Dark Theme Background Color

three shades for dark theme 2022-01-10
three shades for dark. left: xah site 100% black. middle youtube, right discord. as of 2022-01-10

Discord is the worst.

Black Border Problem

you need to change black border to grey or so

dark theme invisible black border
dark theme invisible black border

Add White Background to Img Tag

Another major problem is png files with transparent background. You need to check all images that supports transparent (aka alpha channel) on your site. E.g. Png, webp, .heic . (gif does not supports transparency)

you want them to have white background. One easy fix is to use CSS to make all images white background. 

@media (prefers-color-scheme: dark) {
img {
background-color:white;
}
}

in the following, the right image is desired. The left got screwed. Even if you remove alpha channel. Meaning, when removing alpha channel of png, you have to make sure, it uses a white background .

dark theme png remove alpha problem
dark theme png remove alpha problem

Check Pages with Image Background

If you are using a image for background, and if the image has background color white, then white text disappears.

dark theme disappearing white text 2022-01-10
dark theme disappearing white text 2022-01-10

Text is white, on a white image background. And there are 93 such img background CSS i have to look at case by case.

dark theme white bg img prob 9Ktt
dark theme white background image problem

Problem. Embedded SVG

Embedded SVG that has transparent background needs to have a solid color. [see Practical SVG Tutorial]

dark theme invisible svg jb4q
dark theme invisible svg

programing code syntax coloring problem

Also, programing code syntax coloring is also a problem. Simply invert color or switch black/white create ugly coloring, e.g.

dark theme syntax coloring problem HJ6G
dark theme syntax coloring problem HJ6G

other problems

the following is the thought flow while i was making my website to support dark theme .

My site is pretty simple. Bascially just 5 lines of CSS will turn it to support dark theme. But there are about 200 SVG files and lots more PNG i need to manual change. In theory, they can be fixed with backdrop-filter CSS, probably. But the problem is, it's really a case by case nasty problem. Because depending on how the image is used.

The heart of the issue is, with images, sometimes u wan white background , sometimes transparent. Making them all explicit white doesn't work 100%. And they are not just all img tags. For example, img files are used as background CSS. Yeah, so i think the problem really blows up.

Add Text Shadows as Workaround

one of the hack fix is to add text shadows when you do dark theme, like this 

body {
background-color:black;
color:white;
text-shadow:2px 2px 2px black;
}

so that, page like this

dark theme white bg img prob 6fSz
dark theme with white background image problem, using CSS: Text Shadow as solution.

which had white img bg, now at least works. else the white text disappears in ether

Search All CSS Code, on Color Value of Black or White, background, background-color, border

Check all CSS, on color value of black or white, and on property of color and background-color

CSS: Media Query

Dark Theme