diff --git a/.github/workflows/autoprefixer.yml b/.github/workflows/autoprefixer.yml index 8295ccf..c164f71 100644 --- a/.github/workflows/autoprefixer.yml +++ b/.github/workflows/autoprefixer.yml @@ -21,7 +21,7 @@ jobs: npm run autoprefixer - name: Create Pull Request - uses: peter-evans/create-pull-request@v6 + uses: peter-evans/create-pull-request@v7 with: branch: autoprefixer branch-suffix: timestamp diff --git a/assets/scripts/features/index.js b/assets/scripts/features/index.js index a8f2fc7..8065251 100644 --- a/assets/scripts/features/index.js +++ b/assets/scripts/features/index.js @@ -10,6 +10,10 @@ if (process.env.FEATURE_DARKMODE === '1') { import('./darkmode') } +if (process.env.FEATURE_THEME === '1') { + import('./theme') +} + if (process.env.FEATURE_FLOWCHART === '1') { import('./flowchart') } diff --git a/assets/scripts/features/theme/index.js b/assets/scripts/features/theme/index.js new file mode 100644 index 0000000..3d7ae08 --- /dev/null +++ b/assets/scripts/features/theme/index.js @@ -0,0 +1,88 @@ +import * as params from '@params'; +const PERSISTENCE_KEY = 'theme-scheme' + +const themeOptions = params.theme || {} +const THEME_DARK = typeof themeOptions.dark === 'undefined' ? true : themeOptions.dark; +const THEME_LIGHT = typeof themeOptions.light === 'undefined' ? true : themeOptions.light; +const THEME_DEFAULT = typeof themeOptions.default === 'undefined' ? "system" : themeOptions.default; + +window.addEventListener('load', async () => { + const menu = document.getElementById('themeMenu') + const $icon = document.getElementById('navbar-theme-icon-svg') + if (menu == null || $icon == null) return + + const btns = menu.getElementsByTagName('a') + const iconMap = Array.from(btns).reduce((map, btn) => { + const $img = btn.getElementsByTagName('img')[0] + map[btn.dataset.scheme] = $img.src + return map + }, {}) + + + function checkScheme(scheme) { + if (THEME_LIGHT === false) return "dark" + if (THEME_DARK === false) return "light" + return scheme + } + + function loadScheme() { + return localStorage.getItem(PERSISTENCE_KEY) || loadDefaultScheme() + } + + function loadDefaultScheme() { + return THEME_DEFAULT || "system" + } + + function saveScheme(scheme) { + localStorage.setItem(PERSISTENCE_KEY, scheme) + } + + 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] + + // save preference to local storage + saveScheme(newScheme) + + setImages(theme) + } + + const checkedScheme = checkScheme(loadScheme()) + setScheme(checkedScheme) + + Array.from(menu.getElementsByTagName('a')).forEach((btn) => { + btn.addEventListener('click', () => { + const { scheme } = btn.dataset + setScheme(scheme) + }) + }) +}) + +function setImages(newScheme) { + const els = Array.from(document.getElementsByClassName('logo-holder')); + for (const el of els) { + const light = el.querySelector('.light-logo'); + const dark = el.querySelector('.dark-logo'); + + if (newScheme === "dark" && dark !== null) { + if (light !== null) light.style.display = 'none' + dark.style.display = 'inline' + } + else { + if (light !== null) light.style.display = 'inline' + if (dark !== null) dark.style.display = 'none' + } + } +} \ No newline at end of file diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index 61ef497..a962ecc 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -97,7 +97,20 @@ params: # Enable dark theme darkMode: + + # [Deprecated] Enable dark theme + # This is a deprecated setting, but has not been removed to maintain backward compatibility + # If `theme` is set, the `darkMode` setting will be discarded. + # darkMode: + # enable: true + + # Configure theme color settings + theme: enable: true + services: + light: true # enable light theme. default "true" + dark: true # enable dark theme. default "true" + default: system # can be either light, dark or system. default "system" # Enable and configure portfolio portfolio: diff --git a/go.sum b/go.sum new file mode 100644 index 0000000..9837fd0 --- /dev/null +++ b/go.sum @@ -0,0 +1,2 @@ +github.com/hugo-toha/hugo-toha.github.io v0.0.0-20240730212302-83b19f7bd3b7 h1:RRonNzaf6/Ou9PqfXeKiRywkd+9KY7SVgfGBQXqXshM= +github.com/hugo-toha/hugo-toha.github.io v0.0.0-20240730212302-83b19f7bd3b7/go.mod h1:yWw1t3trnfzv4t1lA9zh5pSsI0+kqqyg58ir8/kt6zk= diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 65f6364..dc1850a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -12,7 +12,7 @@ {{- partial "analytics.html" . -}}