Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-28 19:43:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge master

Browse Source
This commit is contained in:
Jimmy Cai 2020-12-22 23:15:48 +01:00
commit eee9db934a
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
6 changed files with 78 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/icons/brightness.svg Normal file
View File

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brightness" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="3" x2="12" y2="21" />
<path d="M12 9l4.65 -4.65" />
<path d="M12 14.3l7.37 -7.37" />
<path d="M12 19.6l8.85 -8.85" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 460 B

7
assets/icons/toggle-left.svg
View File

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="8" cy="12" r="2" />
<rect x="2" y="6" width="20" height="12" rx="6" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 369 B

7
assets/icons/toggle-right.svg
View File

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="16" cy="12" r="2" />
<rect x="2" y="6" width="20" height="12" rx="6" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 371 B

26
assets/scss/partials/menu.scss
View File

@ -214,28 +214,28 @@
}
[data-scheme="dark"] {
#dark-mode-toggle {
#schemeSelectItem {
color: var(--accent-color);
font-weight: 700;
.icon-tabler-toggle-left {
display: none;
}
.icon-tabler-toggle-right {
display: unset;
}
}
}
#dark-mode-toggle {
#schemeSelectItem {
margin-top: auto;
color: var(--body-text-color);
display: flex;
align-items: center;
cursor: pointer;
}
.icon-tabler-toggle-right {
display: none;
#schemeSelect {
background: transparent;
border: 0;
color: var(--body-text-color);
padding: 0;
appearance: none;
option {
color: var(--card-text-color-main);
background-color: var(--card-background);
}
}

83
assets/ts/darkmode.ts
View File

@ -1,53 +1,64 @@
export default () => {
const toggleDarkMode = document.getElementById('dark-mode-toggle');
const darkModeKey = 'StackDarkMode';
const darkModeItem = localStorage.getItem(darkModeKey);
const darkModeEnabled = localStorage.getItem(darkModeKey) === 'true';
const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
const mql = window.matchMedia('(prefers-color-scheme: dark)');
type colorScheme = 'light' | 'dark' | 'auto';
let darkMode = false;
const colorSchemeKey = 'StackColorScheme';
const mql = window.matchMedia('(prefers-color-scheme: dark)');
const schemeSelect = document.getElementById('schemeSelect') as HTMLSelectElement;
if (darkModeItem && darkModeEnabled || !darkModeItem && supportDarkMode) {
/**
* Enable dark mode if:
* 1. If dark mode is set already (in local storage)
* 2. No color scheme preference is set in localstorage, and user's browser indicates preference for dark mode
*/
darkMode = true;
}
const supportDarkMode = () => {
return window.matchMedia('(prefers-color-scheme: dark)').matches === true;
}
const setBodyClass = () => {
if (darkMode) {
const saveScheme = (scheme: colorScheme) => {
localStorage.setItem(colorSchemeKey, scheme);
}
const getScheme = () => {
return localStorage.getItem(colorSchemeKey) as colorScheme;
};
const setScheme = (scheme: colorScheme) => {
if (scheme === 'auto') {
if (supportDarkMode()) {
document.body.dataset.scheme = 'dark';
}
else {
document.body.dataset.scheme = 'light';
}
}
const mediaQueryListener = (e) => {
darkMode = e.matches;
setBodyClass();
}
let listening = false;
if (!darkModeItem) {
/**
* If no dark mode preference is set in local storage, listen to browser color preference change
*/
mql.addEventListener('change', mediaQueryListener);
listening = true;
else {
document.body.dataset.scheme = scheme;
}
}
const mediaQueryListener = (e) => {
setScheme('auto');
}
export default () => {
document.body.style.setProperty('transition', 'background-color .3s ease');
toggleDarkMode.addEventListener('click', (e) => {
darkMode = !darkMode;
setBodyClass();
localStorage.setItem(darkModeKey, darkMode.toString());
if (!getScheme()) {
/// First time visiting
setScheme('auto');
saveScheme('auto')
mql.addEventListener('change', mediaQueryListener);
}
else {
setScheme(getScheme());
}
if (listening) {
schemeSelect.value = getScheme();
schemeSelect.addEventListener('change', (e) => {
const value = schemeSelect.value as colorScheme;
setScheme(value);
saveScheme(value);
if (value === 'auto') {
mql.addEventListener('change', mediaQueryListener);
}
else {
/**
* Remove listener once user set color preference in website
*/

12
layouts/partials/sidebar/left.html
View File

@ -46,10 +46,14 @@
</li>
{{ end }}
<li id="dark-mode-toggle">
{{ (resources.Get "icons/toggle-left.svg").Content | safeHTML }}
{{ (resources.Get "icons/toggle-right.svg").Content | safeHTML }}
<span>{{ T "darkMode.toggle" }}</span>
<li id="schemeSelectItem">
{{ (resources.Get "icons/brightness.svg").Content | safeHTML }}
<select id="schemeSelect">
<option value="light">Light Theme</option>
<option value="dark">Dark Theme</option>
<option value="auto">Auto</option>
</select>
</li>
</ol>
</aside>