From e8cbb7a8298ceba4151c8d3908f9628e7f8ed9e3 Mon Sep 17 00:00:00 2001 From: "saica.go" Date: Sun, 28 Apr 2024 12:43:10 +0800 Subject: [PATCH] feat: option to follow the system-wide light/dark mode (#71) --- package.json | 3 +- pnpm-lock.yaml | 57 ++++++------- src/components/GlobalStyles.astro | 4 +- src/components/LightDarkSwitch.svelte | 89 ++++++++++++++++++++ src/components/Navbar.astro | 10 +-- src/components/Search.svelte | 10 +-- src/components/widget/DisplaySettings.svelte | 2 +- src/components/widget/NavMenuPanel.astro | 2 +- src/i18n/i18nKey.ts | 4 + src/i18n/languages/en.ts | 4 + src/i18n/languages/ja.ts | 4 + src/i18n/languages/zh_CN.ts | 4 + src/i18n/languages/zh_TW.ts | 4 + src/layouts/Layout.astro | 16 ++-- src/utils/setting-utils.ts | 25 ++++++ 15 files changed, 182 insertions(+), 56 deletions(-) create mode 100644 src/components/LightDarkSwitch.svelte diff --git a/package.json b/package.json index 1df4de0..3ab6c96 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea08224..f865c96 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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==} diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro index d16169c..5fa218b 100644 --- a/src/components/GlobalStyles.astro +++ b/src/components/GlobalStyles.astro @@ -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)] diff --git a/src/components/LightDarkSwitch.svelte b/src/components/LightDarkSwitch.svelte new file mode 100644 index 0000000..4ea0ed3 --- /dev/null +++ b/src/components/LightDarkSwitch.svelte @@ -0,0 +1,89 @@ + + + + + + \ No newline at end of file diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 8d96168..4da4b93 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -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) - + @@ -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"); }); } diff --git a/src/components/Search.svelte b/src/components/Search.svelte index a193ae6..ebec91f 100644 --- a/src/components/Search.svelte +++ b/src/components/Search.svelte @@ -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) -
diff --git a/src/components/widget/DisplaySettings.svelte b/src/components/widget/DisplaySettings.svelte index c7d3714..b871d78 100644 --- a/src/components/widget/DisplaySettings.svelte +++ b/src/components/widget/DisplaySettings.svelte @@ -15,7 +15,7 @@ $: if (hue || hue === 0) { } -
+
+