Dark theme via DarkReader (#595)

* Initial commit for dark theme.

* Use DarkReader.auto() to watch for system theme.

* Tunning default parameters.

* Allow configurable number of recent posts.

* Added invisible element to hack theme initialization.

* Added default value.

* Use Darkreader CDN.

* Cleanup to keep darkreader in as few files as possible.

* Renamed darkmode.js to darkmode-darkreader.js.

* Bring back the initialization.

* Added provider property.

* Added theme selector to the posts navbar.

* Removed extra line breaks.

* Changed darkreader CDN to local copy.

* Renamed to darkMode.

* Fixed CodeQL failures.

* Added icons.

* Renamed function.

* Added SVG inversion.

* Used icons for selection.

* Toggle initial dark only in the dynamic navbar.

Co-authored-by: donfiguerres <donfiguerres@github.com>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
donfiguerres 2022-06-10 23:18:49 +08:00 committed by GitHub
parent 869eba97a2
commit 65049cfbb7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 5791 additions and 1 deletions

View file

@ -0,0 +1,20 @@
/* Note: No need to invert when the screen is small because the navbar is
collapsed to a hamburger menu. */
@media only screen and (min-width: 1200px) {
.dynamic-navbar .navbar-icon-svg-dark {
filter: invert(1);
};
}
@media only screen and (min-width: 1200px) {
.dropdown-menu-icons-only {
width: 25px;
min-width: 3rem;
}
}
.menu-icon-center {
display: block;
margin-left: auto;
margin-right: auto;
}