FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dark theme via DarkReader (#595)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

59
static/js/darkmode-darkreader.js Normal file
View file

@ -0,0 +1,59 @@
const DARK = "dark";
const LIGHT = "light";
const SYSTEM = "system";
const COLOR_THEME = "color-theme";
const DARK_OPTIONS = {
brightness: 100,
contrast: 100,
sepia: 0
};
const SVG_INVERT = {invert: ['img[src$=".svg"]']};
const NAVBAR_ICON_ID = "navbar-theme-icon-svg";
const DARK_ICON = "/icons/moon-svgrepo-com.svg";
const LIGHT_ICON = "/icons/sun-svgrepo-com.svg";
const SYSTEM_ICON = "/icons/computer-svgrepo-com.svg";
function enableDarkTheme() {
localStorage.setItem(COLOR_THEME, DARK);
DarkReader.enable(DARK_OPTIONS, SVG_INVERT);
document.getElementById(NAVBAR_ICON_ID).src = DARK_ICON;
}
function enableLightTheme() {
localStorage.setItem(COLOR_THEME, LIGHT);
DarkReader.disable();
document.getElementById(NAVBAR_ICON_ID).src = LIGHT_ICON;
}
function useSystemTheme() {
localStorage.setItem(COLOR_THEME, SYSTEM);
DarkReader.auto(DARK_OPTIONS, SVG_INVERT);
document.getElementById(NAVBAR_ICON_ID).src = SYSTEM_ICON;
}
function initializeColorTheme() {
// We're using the themeInitialization attributes as a 'hack' for setting up
// the default color scheme because we don't want to complicate this further
// by creating custom javascript output in Hugo.
let themeInitialization = document.getElementById("theme-initialization");
let defaultColorScheme = themeInitialization.getAttribute('default-theme');
// If the user has already selected a preferred theme then use that instead
// of the default theme. Also, the default theme gets loaded to localStorage
// on the first visit.
let colorTheme = localStorage.getItem(COLOR_THEME);
if (colorTheme == null || colorTheme.length == 0) {
colorTheme = defaultColorScheme;
}
// Enable the color theme
if (colorTheme == DARK) {
enableDarkTheme();
} else if (colorTheme == SYSTEM) {
useSystemTheme();
} else {
// We use light theme for the two conditions below.
// 1. the selected theme is light
// 2. no default theme is found - fall back to original behavior
enableLightTheme();
}
}
initializeColorTheme()

5488
static/js/darkreader.js Normal file
View file

File diff suppressed because it is too large Load diff

6
static/js/navbar.js
View file

@ -8,6 +8,9 @@ const updateNavBar = () => {
$('#navbar-toggler').removeClass('navbar-dark');
$('#navbar-toggler').addClass('navbar-light');
// color theme selector a.k.a. dark mode
$('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
// get the main logo from hidden img tag
let mainLogo = document.getElementById("main-logo")
if (mainLogo !== null) {
@ -22,6 +25,9 @@ const updateNavBar = () => {
$('#navbar-toggler').removeClass('navbar-light');
$('#navbar-toggler').addClass('navbar-dark');
// color theme selector a.k.a. dark mode
$('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
// get the inverted logo from hidden img tag
let invertedLogo = document.getElementById("inverted-logo")
if (invertedLogo !== null) {