mirror of
https://github.com/Ad-closeNN/blog-fuwari.git
synced 2026-05-31 01:20:06 -04:00
Ad-closeNN
1492795896
1. style(config): 默认亮暗色改为 LIGHT_MODE 2. 更新知更鸟 Credit: Pixiv @KiraraShss 3. style(config): 加入 theme-color 顶部横幅
79 lines
3.0 KiB
Svelte
79 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { DARK_MODE, LIGHT_MODE } from "@constants/constants.ts";
|
|
import I18nKey from "@i18n/i18nKey";
|
|
import { i18n } from "@i18n/translation";
|
|
import Icon from "@iconify/svelte";
|
|
import {
|
|
applyThemeToDocument,
|
|
getStoredTheme,
|
|
setTheme,
|
|
} from "@utils/setting-utils.ts";
|
|
import { onMount } from "svelte";
|
|
import type { LIGHT_DARK_MODE } from "@/types/config.ts";
|
|
|
|
const seq: LIGHT_DARK_MODE[] = [LIGHT_MODE, DARK_MODE];
|
|
let mode: LIGHT_DARK_MODE = LIGHT_MODE;
|
|
|
|
onMount(() => {
|
|
mode = getStoredTheme();
|
|
// 移除了系统主题监听功能
|
|
// 只在初始化时应用存储的主题
|
|
applyThemeToDocument(mode);
|
|
});
|
|
|
|
function switchScheme(newMode: LIGHT_DARK_MODE) {
|
|
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" onmouseleave={hidePanel}>
|
|
<button aria-label="Light/Dark Mode" role="menuitem" class="relative btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="scheme-switch" onclick={toggleScheme} onmouseenter={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>
|
|
</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 scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
|
|
class:current-theme-btn={mode === LIGHT_MODE}
|
|
onclick={() => 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 scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
|
|
class:current-theme-btn={mode === DARK_MODE}
|
|
onclick={() => switchScheme(DARK_MODE)}
|
|
>
|
|
<Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
|
|
{i18n(I18nKey.darkMode)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div> |