feat: option to follow the system-wide light/dark mode (#71)
This commit is contained in:
saica.go
GitHub
parent
34af98edec
commit
e8cbb7a829
|
|
@ -14,8 +14,8 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.5.9",
|
||||
"@astrojs/sitemap": "^3.1.2",
|
||||
"@astrojs/rss": "^4.0.5",
|
||||
"@astrojs/sitemap": "^3.1.2",
|
||||
"@astrojs/svelte": "^5.2.0",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@fontsource-variable/jetbrains-mono": "^5.0.20",
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
"@iconify-json/fa6-regular": "^1.1.18",
|
||||
"@iconify-json/fa6-solid": "^1.1.20",
|
||||
"@iconify-json/material-symbols": "^1.1.74",
|
||||
"@iconify/svelte": "^3.1.6",
|
||||
"@rollup/plugin-yaml": "^4.1.2",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@types/markdown-it": "^14.0.0",
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ dependencies:
|
|||
'@astrojs/check':
|
||||
specifier: ^0.5.9
|
||||
version: 0.5.9(typescript@5.4.2)
|
||||
'@astrojs/sitemap':
|
||||
specifier: ^3.1.2
|
||||
version: 3.1.2
|
||||
'@astrojs/rss':
|
||||
specifier: ^4.0.5
|
||||
version: 4.0.5
|
||||
'@astrojs/sitemap':
|
||||
specifier: ^3.1.2
|
||||
version: 3.1.2
|
||||
'@astrojs/svelte':
|
||||
specifier: ^5.2.0
|
||||
version: 5.2.0(astro@4.4.15)(svelte@4.2.12)(typescript@5.4.2)(vite@5.1.6)
|
||||
|
|
@ -103,6 +103,9 @@ devDependencies:
|
|||
'@iconify-json/material-symbols':
|
||||
specifier: ^1.1.74
|
||||
version: 1.1.75
|
||||
'@iconify/svelte':
|
||||
specifier: ^3.1.6
|
||||
version: 3.1.6(svelte@4.2.12)
|
||||
'@rollup/plugin-yaml':
|
||||
specifier: ^4.1.2
|
||||
version: 4.1.2(rollup@2.79.1)
|
||||
|
|
@ -134,7 +137,6 @@ packages:
|
|||
dependencies:
|
||||
'@jridgewell/gen-mapping': 0.3.5
|
||||
'@jridgewell/trace-mapping': 0.3.25
|
||||
dev: false
|
||||
|
||||
/@antfu/install-pkg@0.1.1:
|
||||
resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
|
||||
|
|
@ -231,12 +233,6 @@ packages:
|
|||
prismjs: 1.29.0
|
||||
dev: false
|
||||
|
||||
/@astrojs/sitemap@3.1.2:
|
||||
resolution: {integrity: sha512-FxOJldIl5ltZ5CNjocQxHkAO9orwHBjqtaU28o4smobp9vowS0nbGp+I9CrPxkzWdl1crSDm9vjL9tnvG1DSug==}
|
||||
dependencies:
|
||||
sitemap: 7.1.1
|
||||
zod: 3.22.4
|
||||
|
||||
/@astrojs/rss@4.0.5:
|
||||
resolution: {integrity: sha512-IyJVL6z09AQtxbgLaAwebT3T5YKe4oTHDesqydJv1KLHw+zEzzMCFuuNsEyxjiqu7df9+DDCpDXLj/WRiEUXvw==}
|
||||
dependencies:
|
||||
|
|
@ -244,6 +240,13 @@ packages:
|
|||
kleur: 4.1.5
|
||||
dev: false
|
||||
|
||||
/@astrojs/sitemap@3.1.2:
|
||||
resolution: {integrity: sha512-FxOJldIl5ltZ5CNjocQxHkAO9orwHBjqtaU28o4smobp9vowS0nbGp+I9CrPxkzWdl1crSDm9vjL9tnvG1DSug==}
|
||||
dependencies:
|
||||
sitemap: 7.1.1
|
||||
zod: 3.22.4
|
||||
dev: false
|
||||
|
||||
/@astrojs/svelte@5.2.0(astro@4.4.15)(svelte@4.2.12)(typescript@5.4.2)(vite@5.1.6):
|
||||
resolution: {integrity: sha512-GmwbXks2WMkmAfl0rlPM/2gA1RtmZzjGV2mOceV3g7QNyjIsSYBPKrlEnSFnuR+YMvlAtWdbMFBsb3gtGxnTTg==}
|
||||
engines: {node: '>=18.14.1'}
|
||||
|
|
@ -1948,6 +1951,15 @@ packages:
|
|||
'@iconify/types': 2.0.0
|
||||
dev: true
|
||||
|
||||
/@iconify/svelte@3.1.6(svelte@4.2.12):
|
||||
resolution: {integrity: sha512-yLSrlkOx5J6xXU5GDLPBV/MdVBVEZhd36onfqSbxQobp1XBoWQbMPLNZyCAmTKCPnmzXSowGy79agl8FQ3kj6A==}
|
||||
peerDependencies:
|
||||
svelte: '*'
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
svelte: 4.2.12
|
||||
dev: true
|
||||
|
||||
/@iconify/tools@3.0.7:
|
||||
resolution: {integrity: sha512-DxfhFLMnooS34dHelpGUnnYrxLZHs0czC1CgrBhAbuL8ddVzBb2VEQm8kh9qGh7A34qeXAB5iSHH3A72rAaFrg==}
|
||||
dependencies:
|
||||
|
|
@ -2905,18 +2917,18 @@ packages:
|
|||
'@types/node': 20.11.28
|
||||
dev: false
|
||||
|
||||
/@types/sax@1.2.7:
|
||||
resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
|
||||
dependencies:
|
||||
'@types/node': 20.11.28
|
||||
dev: false
|
||||
|
||||
/@types/sanitize-html@2.11.0:
|
||||
resolution: {integrity: sha512-7oxPGNQHXLHE48r/r/qjn7q0hlrs3kL7oZnGj0Wf/h9tj/6ibFyRkNbsDxaBBZ4XUZ0Dx5LGCyDJ04ytSofacQ==}
|
||||
dependencies:
|
||||
htmlparser2: 8.0.2
|
||||
dev: true
|
||||
|
||||
/@types/sax@1.2.7:
|
||||
resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
|
||||
dependencies:
|
||||
'@types/node': 20.11.28
|
||||
dev: false
|
||||
|
||||
/@types/tar@6.1.11:
|
||||
resolution: {integrity: sha512-ThA1WD8aDdVU4VLuyq5NEqriwXErF5gEIJeyT6gHBWU7JtSmW2a5qjNv3/vR82O20mW+1vhmeZJfBQPT3HCugg==}
|
||||
dependencies:
|
||||
|
|
@ -3027,7 +3039,6 @@ packages:
|
|||
resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
|
||||
engines: {node: '>=0.4.0'}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/ansi-align@3.0.1:
|
||||
resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
|
||||
|
|
@ -3096,7 +3107,6 @@ packages:
|
|||
resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
|
||||
dependencies:
|
||||
dequal: 2.0.3
|
||||
dev: false
|
||||
|
||||
/array-buffer-byte-length@1.0.1:
|
||||
resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
|
||||
|
|
@ -3267,7 +3277,6 @@ packages:
|
|||
resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
|
||||
dependencies:
|
||||
dequal: 2.0.3
|
||||
dev: false
|
||||
|
||||
/b4a@1.6.6:
|
||||
resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
|
||||
|
|
@ -3687,7 +3696,6 @@ packages:
|
|||
acorn: 8.11.3
|
||||
estree-walker: 3.0.3
|
||||
periscopic: 3.1.0
|
||||
dev: false
|
||||
|
||||
/color-convert@1.9.3:
|
||||
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
|
||||
|
|
@ -3860,7 +3868,6 @@ packages:
|
|||
dependencies:
|
||||
mdn-data: 2.0.30
|
||||
source-map-js: 1.0.2
|
||||
dev: false
|
||||
|
||||
/css-what@6.1.0:
|
||||
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
|
||||
|
|
@ -4024,7 +4031,6 @@ packages:
|
|||
/dequal@2.0.3:
|
||||
resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/detect-libc@1.0.3:
|
||||
resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
|
||||
|
|
@ -4337,7 +4343,6 @@ packages:
|
|||
resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
|
||||
dependencies:
|
||||
'@types/estree': 1.0.5
|
||||
dev: false
|
||||
|
||||
/esutils@2.0.3:
|
||||
resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
|
||||
|
|
@ -5188,7 +5193,6 @@ packages:
|
|||
resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
|
||||
dependencies:
|
||||
'@types/estree': 1.0.5
|
||||
dev: false
|
||||
|
||||
/is-regex@1.1.4:
|
||||
resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
|
||||
|
|
@ -5526,7 +5530,6 @@ packages:
|
|||
|
||||
/locate-character@3.0.0:
|
||||
resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
|
||||
dev: false
|
||||
|
||||
/locate-path@5.0.0:
|
||||
resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
|
||||
|
|
@ -5614,7 +5617,6 @@ packages:
|
|||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.4.15
|
||||
dev: false
|
||||
|
||||
/make-dir@3.1.0:
|
||||
resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
|
||||
|
|
@ -5831,7 +5833,6 @@ packages:
|
|||
|
||||
/mdn-data@2.0.30:
|
||||
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
|
||||
dev: false
|
||||
|
||||
/mdurl@2.0.0:
|
||||
resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
|
||||
|
|
@ -6641,7 +6642,6 @@ packages:
|
|||
'@types/estree': 1.0.5
|
||||
estree-walker: 3.0.3
|
||||
is-reference: 3.0.2
|
||||
dev: false
|
||||
|
||||
/picocolors@1.0.0:
|
||||
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
|
||||
|
|
@ -8173,7 +8173,6 @@ packages:
|
|||
locate-character: 3.0.0
|
||||
magic-string: 0.30.8
|
||||
periscopic: 3.1.0
|
||||
dev: false
|
||||
|
||||
/svgo@2.8.0:
|
||||
resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
|
||||
|
|
|
|||
|
|
@ -195,8 +195,8 @@ color_set({
|
|||
.float-panel {
|
||||
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
|
||||
}
|
||||
.float-panel.closed {
|
||||
@apply top-[4.75rem] opacity-0 pointer-events-none
|
||||
.float-panel-closed {
|
||||
@apply -translate-y-1 opacity-0 pointer-events-none
|
||||
}
|
||||
.search-panel mark {
|
||||
@apply bg-transparent text-[var(--primary)]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
<script lang="ts">
|
||||
|
||||
import Icon from "@iconify/svelte"
|
||||
import {i18n} from '@i18n/translation'
|
||||
import I18nKey from '@i18n/i18nKey'
|
||||
import {LIGHT_MODE, DARK_MODE, AUTO_MODE, setTheme, getStoredTheme} from '../utils/setting-utils.ts'
|
||||
import {onMount} from "svelte";
|
||||
|
||||
const seq = [LIGHT_MODE, DARK_MODE, AUTO_MODE]
|
||||
let mode = AUTO_MODE
|
||||
|
||||
onMount(() => {
|
||||
mode = getStoredTheme()
|
||||
})
|
||||
|
||||
function switchScheme(newMode: string) {
|
||||
mode = newMode
|
||||
setTheme(newMode)
|
||||
}
|
||||
|
||||
function toggleScheme() {
|
||||
let i = 0
|
||||
for (; i < seq.length; i++) {
|
||||
if (seq[i] === mode) {
|
||||
break
|
||||
}
|
||||
}
|
||||
switchScheme(seq[(i + 1) % seq.length])
|
||||
}
|
||||
|
||||
function showPanel() {
|
||||
const panel = document.querySelector('#light-dark-panel')
|
||||
panel.classList.remove('float-panel-closed')
|
||||
}
|
||||
|
||||
function hidePanel() {
|
||||
const panel = document.querySelector('#light-dark-panel')
|
||||
panel.classList.add('float-panel-closed')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- z-50 make the panel higher than other float panels -->
|
||||
<div class="relative z-50" role="menu" tabindex="-1" on:mouseleave={hidePanel}>
|
||||
<button aria-label="Light/Dark Mode" role="menuitem" class="relative btn-plain h-11 w-11 rounded-lg active:scale-90" id="scheme-switch" on:click={toggleScheme} on:mouseenter={showPanel}>
|
||||
<div class="absolute" class:opacity-0={mode !== LIGHT_MODE}>
|
||||
<Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem]"></Icon>
|
||||
</div>
|
||||
<div class="absolute" class:opacity-0={mode !== DARK_MODE}>
|
||||
<Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem]"></Icon>
|
||||
</div>
|
||||
<div class="absolute" class:opacity-0={mode !== AUTO_MODE}>
|
||||
<Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem]"></Icon>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div id="light-dark-panel" class="hidden lg:block absolute transition float-panel-closed top-11 -right-2 pt-5" >
|
||||
<div class="card-base float-panel p-2">
|
||||
<button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain h-9 rounded-lg px-3 font-medium active:scale-95 mb-0.5"
|
||||
class:current-setting={mode === LIGHT_MODE}
|
||||
on:click={() => switchScheme(LIGHT_MODE)}
|
||||
>
|
||||
<Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
|
||||
{i18n(I18nKey.lightMode)}
|
||||
</button>
|
||||
<button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain h-9 rounded-lg px-3 font-medium active:scale-95 mb-0.5"
|
||||
class:current-setting={mode === DARK_MODE}
|
||||
on:click={() => switchScheme(DARK_MODE)}
|
||||
>
|
||||
<Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
|
||||
{i18n(I18nKey.darkMode)}
|
||||
</button>
|
||||
<button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain h-9 rounded-lg px-3 font-medium active:scale-95"
|
||||
class:current-setting={mode === AUTO_MODE}
|
||||
on:click={() => switchScheme(AUTO_MODE)}
|
||||
>
|
||||
<Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem] mr-3"></Icon>
|
||||
{i18n(I18nKey.systemMode)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="css">
|
||||
.current-setting {
|
||||
background: var(--btn-plain-bg-hover);
|
||||
color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,6 +6,7 @@ import {navBarConfig, siteConfig} from "../config";
|
|||
import NavMenuPanel from "./widget/NavMenuPanel.astro";
|
||||
import Search from "./Search.svelte";
|
||||
import {LinkPresets} from "../constants/link-presets";
|
||||
import LightDarkSwitch from "./LightDarkSwitch.svelte";
|
||||
const className = Astro.props.class;
|
||||
|
||||
let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset): NavBarLink => {
|
||||
|
|
@ -48,10 +49,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
|
|||
<button aria-label="Display Settings" class="btn-plain h-11 w-11 rounded-lg active:scale-90" id="display-settings-switch">
|
||||
<Icon name="material-symbols:palette-outline" size={"1.25rem"}></Icon>
|
||||
</button>
|
||||
<button aria-label="Light/Dark Mode" class="btn-plain h-11 w-11 rounded-lg active:scale-90" id="scheme-switch">
|
||||
<Icon name="material-symbols:wb-sunny-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-light-icon)]"></Icon>
|
||||
<Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
|
||||
</button>
|
||||
<LightDarkSwitch client:load></LightDarkSwitch>
|
||||
<button aria-label="Menu" name="Nav Menu" class="btn-plain w-11 h-11 rounded-lg active:scale-90 md:hidden" id="nav-menu-switch">
|
||||
<Icon name="material-symbols:menu-rounded" size={"1.25rem"}></Icon>
|
||||
</button>
|
||||
|
|
@ -86,13 +84,13 @@ function loadButtonScript() {
|
|||
let settingBtn = document.getElementById("display-settings-switch");
|
||||
settingBtn.addEventListener("click", function () {
|
||||
let settingPanel = document.getElementById("display-setting");
|
||||
settingPanel.classList.toggle("closed");
|
||||
settingPanel.classList.toggle("float-panel-closed");
|
||||
});
|
||||
|
||||
let menuBtn = document.getElementById("nav-menu-switch");
|
||||
menuBtn.addEventListener("click", function () {
|
||||
let menuPanel = document.getElementById("nav-menu-panel");
|
||||
menuPanel.classList.toggle("closed");
|
||||
menuPanel.classList.toggle("float-panel-closed");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ onMount(() => {
|
|||
return
|
||||
|
||||
if (!keyword && isDesktop) {
|
||||
panel.classList.add("closed")
|
||||
panel.classList.add("float-panel-closed")
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -43,12 +43,12 @@ onMount(() => {
|
|||
}
|
||||
|
||||
if (!arr.length && isDesktop) {
|
||||
panel.classList.add("closed")
|
||||
panel.classList.add("float-panel-closed")
|
||||
return
|
||||
}
|
||||
|
||||
if (isDesktop) {
|
||||
panel.classList.remove("closed")
|
||||
panel.classList.remove("float-panel-closed")
|
||||
}
|
||||
result = arr
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@ onMount(() => {
|
|||
|
||||
const togglePanel = () => {
|
||||
let panel = document.getElementById('search-panel')
|
||||
panel?.classList.toggle("closed")
|
||||
panel?.classList.toggle("float-panel-closed")
|
||||
}
|
||||
|
||||
$: search(keywordDesktop, true)
|
||||
|
|
@ -82,7 +82,7 @@ $: search(keywordMobile, false)
|
|||
</button>
|
||||
|
||||
<!-- search panel -->
|
||||
<div id="search-panel" class="float-panel closed search-panel absolute md:w-[30rem]
|
||||
<div id="search-panel" class="float-panel float-panel-closed search-panel absolute md:w-[30rem]
|
||||
top-20 left-4 md:left-[unset] right-4 shadow-2xl rounded-2xl p-2">
|
||||
|
||||
<!-- search bar inside panel for phone/tablet -->
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ $: if (hue || hue === 0) {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div id="display-setting" class="float-panel closed absolute transition-all w-80 fixed right-4 px-4 py-4">
|
||||
<div id="display-setting" class="float-panel float-panel-closed absolute transition-all w-80 right-4 px-4 py-4">
|
||||
<div class="flex flex-row gap-2 mb-3 items-center justify-between">
|
||||
<div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
|
||||
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ interface Props {
|
|||
|
||||
const links = Astro.props.links;
|
||||
---
|
||||
<div id="nav-menu-panel" class:list={["float-panel closed absolute transition-all fixed right-4 px-2 py-2"]}>
|
||||
<div id="nav-menu-panel" class:list={["float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2"]}>
|
||||
{links.map((link) => (
|
||||
<a href={link.url} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
|
||||
hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ enum I18nKey {
|
|||
|
||||
themeColor = 'themeColor',
|
||||
|
||||
lightMode = 'lightMode',
|
||||
darkMode = 'darkMode',
|
||||
systemMode = 'systemMode',
|
||||
|
||||
more = 'more',
|
||||
|
||||
author = 'author',
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ export const en: Translation = {
|
|||
|
||||
[Key.themeColor]: 'Theme Color',
|
||||
|
||||
[Key.lightMode]: 'Light',
|
||||
[Key.darkMode]: 'Dark',
|
||||
[Key.systemMode]: 'System',
|
||||
|
||||
[Key.more]: 'More',
|
||||
|
||||
[Key.author]: 'Author',
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ export const ja: Translation = {
|
|||
|
||||
[Key.themeColor]: 'テーマカラー',
|
||||
|
||||
[Key.lightMode]: 'ライト',
|
||||
[Key.darkMode]: 'ダーク',
|
||||
[Key.systemMode]: 'システム',
|
||||
|
||||
[Key.more]: 'もっと',
|
||||
|
||||
[Key.author]: '作者',
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ export const zh_CN: Translation = {
|
|||
|
||||
[Key.themeColor]: '主题色',
|
||||
|
||||
[Key.lightMode]: '亮色',
|
||||
[Key.darkMode]: '暗色',
|
||||
[Key.systemMode]: '跟随系统',
|
||||
|
||||
[Key.more]: '更多',
|
||||
|
||||
[Key.author]: '作者',
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ export const zh_TW: Translation = {
|
|||
|
||||
[Key.themeColor]: '主題色',
|
||||
|
||||
[Key.lightMode]: '亮色',
|
||||
[Key.darkMode]: '暗色',
|
||||
[Key.systemMode]: '跟隨系統',
|
||||
|
||||
[Key.more]: '更多',
|
||||
|
||||
[Key.author]: '作者',
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon :
|
|||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]">
|
||||
<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition dark text-[14px] md:text-[16px]">
|
||||
<head>
|
||||
|
||||
<title>{pageTitle}</title>
|
||||
|
|
@ -148,7 +148,7 @@ import {
|
|||
SizeObserverPlugin,
|
||||
ClickScrollPlugin
|
||||
} from 'overlayscrollbars';
|
||||
import {getHue, setHue} from "../utils/setting-utils";
|
||||
import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
|
||||
|
||||
/* Preload fonts */
|
||||
// (async function() {
|
||||
|
|
@ -202,7 +202,7 @@ function setClickOutsideToClose(panel: string, ignores: string[]) {
|
|||
return;
|
||||
}
|
||||
}
|
||||
panelDom.classList.add("closed");
|
||||
panelDom.classList.add("float-panel-closed");
|
||||
});
|
||||
}
|
||||
setClickOutsideToClose("display-setting", ["display-setting", "display-settings-switch"])
|
||||
|
|
@ -211,14 +211,8 @@ setClickOutsideToClose("search-panel", ["search-panel", "search-bar", "search-sw
|
|||
|
||||
|
||||
function loadTheme() {
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.theme = 'dark';
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.theme = 'light';
|
||||
}
|
||||
const theme = getStoredTheme()
|
||||
setTheme(theme)
|
||||
}
|
||||
|
||||
function loadHue() {
|
||||
|
|
|
|||
|
|
@ -17,3 +17,28 @@ export function setHue(hue: number): void {
|
|||
}
|
||||
r.style.setProperty('--hue', hue)
|
||||
}
|
||||
|
||||
export const LIGHT_MODE = 'light', DARK_MODE = 'dark', AUTO_MODE = 'auto'
|
||||
|
||||
export function setTheme(theme: string): void {
|
||||
localStorage.setItem('theme', theme)
|
||||
switch (theme) {
|
||||
case LIGHT_MODE:
|
||||
document.documentElement.classList.remove('dark');
|
||||
break
|
||||
case DARK_MODE:
|
||||
document.documentElement.classList.add('dark');
|
||||
break
|
||||
case AUTO_MODE:
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
export function getStoredTheme(): string {
|
||||
return localStorage.getItem('theme') || AUTO_MODE
|
||||
}
|
||||
Loading…
Reference in New Issue