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

Implement proper dark mode (#800)

Browse source 
* Implement proper dark mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix footer color in light mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
Emruz Hossain 2023-09-30 05:04:48 +06:00 • committed by GitHub
parent 6dc9d1d33d
commit 5f0aebcf68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1136 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

46
assets/scripts/features/darkmode/index.js
View file

@ -1,14 +1,6 @@
const PERSISTENCE_KEY = 'darkmode:color-scheme'
async function getService () {
if (process.env.FEATURE_DARKMODE_DARKREADER === '1') {
return await import('./darkreader')
}
throw Error(' No service defined for feature darkMode.')
}
window.addEventListener('DOMContentLoaded', async () => {
window.addEventListener('load', async () => {
const menu = document.getElementById('themeMenu')
const $icon = document.getElementById('navbar-theme-icon-svg')
if (menu == null || $icon == null) return
@ -20,32 +12,32 @@ window.addEventListener('DOMContentLoaded', async () => {
return map
}, {})
const {
setSchemeDark,
setSchemeLight,
setSchemeSystem,
defaultColorScheme
} = await getService()
function loadScheme () {
return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme
function loadScheme() {
return localStorage.getItem(PERSISTENCE_KEY) || "system"
}
function saveScheme (scheme) {
function saveScheme(scheme) {
localStorage.setItem(PERSISTENCE_KEY, scheme)
}
function setScheme (newScheme) {
function getPreferredColorScheme() {
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
return isDarkMode ? "dark" : "light";
}
function setScheme(newScheme) {
let theme = newScheme
if (newScheme === 'system') {
theme = getPreferredColorScheme()
}
// set data-theme attribute on html tag
document.querySelector("html").dataset.theme = theme;
// update icon
$icon.src = iconMap[newScheme]
if (newScheme === 'dark') {
setSchemeDark()
} else if (newScheme === 'system') {
setSchemeSystem()
} else {
setSchemeLight()
}
// save preference to local storage
saveScheme(newScheme)
}