Support for prefers-color-scheme

[Weishaupt]

I'm still a big fan of the theme.

I was wondering if you would consider adding support for a dark theme using the prefers-color-scheme media query.

I've grown very fond of sites that support a dark theme when reading in low light environments.

[yous]

It'll be nice if whiteglass supports prefers-color-scheme. I've just tried applying CSS code mentiond on this article to get some quick preview, and it looks quite good.

diff --git a/_sass/whiteglass.scss b/_sass/whiteglass.scss
index c4d9def..a7512b7 100644
--- a/_sass/whiteglass.scss
+++ b/_sass/whiteglass.scss
@@ -39,6 +39,20 @@ $on-laptop:        800px !default;

+// Dark mode
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: invert($background-color);
+    filter: invert(100%) hue-rotate(180deg);
+  }
+
+  iframe, img, video {
+    filter: invert(100%) hue-rotate(180deg);
+  }
+}
+
+
+
 // Import partials.
 @import
   "whiteglass/base",
diff --git a/assets/main.scss b/assets/main.scss
index 6d15a85..e6f1432 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -45,5 +45,19 @@ $on-laptop:        800px;

+// Dark mode
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: invert($background-color);
+    filter: invert(100%) hue-rotate(180deg);
+  }
+
+  iframe, img, video {
+    filter: invert(100%) hue-rotate(180deg);
+  }
+}
+
+
+
 // Import partials from the `whiteglass` theme.
 @import "whiteglass";

But this generates an inverted thumbnail when an image is dragged, so I think we should declare CSS for dark mode for each element.

[Weishaupt]

Jup, I would also argue that you might not want to provide a pitch-black dark mode, so a more delicate approach would be required. Also if you insert images in any of the pages / posts they would be inverted which wouldn't be desirable.

Will you take a further look into this? I'm happy to review/test any pulls.

[Dorson]

Inverting colors is a neat trick, but could fail in some exception cases, where the colors were gray or in the middle of the color spectrum.

Made my own version for the night and evening time.

See live demo on GitHub page:

https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

Have fun, feel free to fork, copy, adopt, port, etc...

[taoky]

I tried using Darkreader browser extension to generate a dark color CSS for my blog using whiteglass theme, and it seems very well: just put its contents inside @media (prefers-color-scheme: dark) and it works.

[Weishaupt]

@taoky why don't you at least paste the generated CSS here so we can have a look and maybe use it as the base of a pull request to integrate it into the theme?

[taoky]

why don't you at least paste the generated CSS here so we can have a look and maybe use it as the base of a pull request to integrate it into the theme?

My own website has some modification upon whiteglass style so I guess it's not suitable to directly paste mine here. I will generate another CSS and put it as a gist.

[taoky]

@Weishaupt https://gist.github.com/taoky/acd2d4a8b9b9db3c3d7b368a53162b1c