Skip to content

adds dark mode

Michael Thomas Voity requested to merge github/fork/mtzfederico/master into master

Created by: mtzfederico

This PR adds CSS for dark mode, it is controlled by the visitor's browser with the prefers-color-scheme media query

Here is the can I use page for it. It is supported in all the latest browser versions.

I was not able to run the server to test it, I just modified the CSS and used the firefox style editor to make sure that it looks good, I then modified the CSS templates.

The changes to CSS are:

  • removing hard-coded colors for many things and hard-coding the colors for others.
  • and Defining the dark and light colors in a new file called color-schemes.inc.

Here are some screenshots:

Screenshot with 10/10 Screen Shot 2022-01-30 at 12 47 07 a m

Screenshot with 0/10 Screen Shot 2022-01-30 at 12 47 54 a m

The IP addresses and ISP names are hidden for privacy.

The server setup docs look outdated and complicated, I would appreciate it if anyone could test the changes or give me more direct instructions on setting one up (I am familiar with Linux).

Once the page's CSS has the new dark-mode features, It can be tested by either changing your systems color-scheme to dark mode or with firefox's color-scheme simulator buttons in the developer tools.

The main issue that I noticed is that the loading animation's background is hard-coded to white. I don't know how to regenerate it with a transparent background and because it is only shown for a few seconds, I figured it didn't matter a lot.

Merge request reports