mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
⚙️ Improve mode toggle functionality with keyboard shortcut support (CMD + L)
This commit is contained in:
@@ -1,17 +1,32 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { toggleMode } from "mode-watcher";
|
||||||
|
|
||||||
import SunIcon from "@lucide/svelte/icons/sun";
|
import SunIcon from "@lucide/svelte/icons/sun";
|
||||||
import MoonIcon from "@lucide/svelte/icons/moon";
|
import MoonIcon from "@lucide/svelte/icons/moon";
|
||||||
|
|
||||||
import { toggleMode } from "mode-watcher";
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { className }: Props = $props();
|
let { className }: Props = $props();
|
||||||
|
|
||||||
|
const handleKeydown = (event: KeyboardEvent) => {
|
||||||
|
if (event.ctrlKey && event.key === "l") {
|
||||||
|
event.preventDefault();
|
||||||
|
toggleMode();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
window.addEventListener("keydown", handleKeydown);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("keydown", handleKeydown);
|
||||||
|
};
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button class={className} onclick={toggleMode} title="Mode Toggle">
|
<button class={className} onclick={toggleMode} title="Mode Toggle (Cmd + l)">
|
||||||
<SunIcon
|
<SunIcon
|
||||||
size={20}
|
size={20}
|
||||||
strokeWidth={1.5}
|
strokeWidth={1.5}
|
||||||
|
|||||||
Reference in New Issue
Block a user