Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 23:02:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: option to follow the system-wide light/dark mode (#71)

Browse Source
This commit is contained in:
saica.go
2024-04-28 12:43:10 +08:00
committed by GitHub
parent 34af98edec
commit e8cbb7a829
15 changed files with 182 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Navbar.astro
View File

@@ -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");
});
}