style: implement theme toggle and update layout styles

dev-chenxing · dev-chenxing · commit b9d2a296665a · 2026-06-06T20:54:52.000+08:00
diff --git a/TODO.md b/TODO.md
@@ -1,3 +1,6 @@
-- [ ] add gitee to remote
-- [ ] autoscroll to active index
+# TODO
 
+- [ ] feat: autoscroll to active/highlighted index
+- [ ] fix: handle overflow text in the browser component on smaller screens
+- [ ] fix: handle longer "file" names to prevent multiple lines
+- [ ] style: handle "hover" and "active" states highlight for the browser component
diff --git a/src/components/Bar.astro b/src/components/Bar.astro
@@ -1,4 +1,5 @@
 ---
+import ThemeToggle from "./ThemeToggle.astro";
 import Clock from "./svelte/Clock.svelte";
 
 const pathname = new URL(Astro.request.url).pathname;
@@ -27,11 +28,11 @@ const isHighlighted = function (tab: Tab) {
 };
 ---
 
-<nav class="flex justify-center w-full border px-2 lg:w-full lg:grid lg:grid-cols-2 bg-black/50">
-    <ul class="hidden lg:flex">
+<nav class="flex w-full justify-between border border-black/70 bg-white/50 px-2 text-black transition-colors dark:border-white/70 dark:bg-black/50 dark:text-white">
+    <ul class="flex">
         {
             tabs.map((tab) => (
-                <li class={"w-[26px] flex justify-center " + (isHighlighted(tab) ? "bg-white text-black" : "")}>
+                <li class={"flex w-[26px] justify-center " + (isHighlighted(tab) ? "bg-black text-white hover:text-white/90 dark:bg-white dark:text-black dark:hover:text-black/80" : "hover:text-black/70 dark:hover:text-white/70")}>
                     <a
                         class={"w-[18px] " + tab.padding}
                         rel="prefetch"
@@ -44,8 +45,9 @@ const isHighlighted = function (tab: Tab) {
         }
     </ul>
 
-    <div class="text-end">
+    <div class="flex justify-end gap-2 text-end">
         <Clock client:only="svelte" />
+        <ThemeToggle />
     </div>
 
     <script is:inline define:vars={{ tabs }}>
diff --git a/src/components/Main.astro b/src/components/Main.astro
@@ -1,3 +1,3 @@
-<main class="w-full h-full border flex flex-col items-center px-2 pb-2 overflow-hidden bg-black/50 font-mono">
+<main class="flex h-full w-full flex-col items-center overflow-hidden border border-black/70 bg-white/50 px-2 pb-2 font-mono transition-colors dark:border-white/70 dark:bg-black/50">
     <slot />
 </main>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
@@ -0,0 +1,54 @@
+<button
+    id="themeToggle"
+    aria-label="Toggle theme"
+    class="cursor-pointer text-black transition-colors hover:text-black/70 dark:text-white dark:hover:text-white"
+>
+    <svg
+        aria-hidden="true"
+        class="size-5"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+    >
+        <path
+            class="fill-current dark:fill-transparent"
+            fill-rule="evenodd"
+            d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+        ></path>
+        <path
+            class="fill-transparent dark:fill-current"
+            fill-rule="evenodd"
+            d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+        ></path>
+    </svg>
+</button>
+
+<script is:inline>
+    const theme = (() => {
+        const localStorageTheme = localStorage?.getItem("theme") ?? "";
+        if (["dark", "light"].includes(localStorageTheme)) {
+            return localStorageTheme;
+        }
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            return "dark";
+        }
+        return "light";
+    })();
+
+    if (theme === "light") {
+        document.documentElement.classList.remove("dark");
+    } else {
+        document.documentElement.classList.add("dark");
+    }
+
+    window.localStorage.setItem("theme", theme);
+
+    const handleToggleClick = () => {
+        const element = document.documentElement;
+        element.classList.toggle("dark");
+
+        isDark = element.classList.contains("dark");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+    };
+
+    document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
+</script>
diff --git a/src/components/svelte/Browser.svelte b/src/components/svelte/Browser.svelte
@@ -1,6 +1,17 @@
 <script lang="ts">
     import { mod } from "../lib/math.ts";
 
+    type Entry = {
+        name: string;
+        icon?: string;
+        href?: string;
+        description?: string;
+        search?: string;
+        shortcut?: string;
+        dialog?: boolean;
+        content?: Array<Entry>;
+    };
+
     interface Props {
         prompt: string;
         files: Entry[];
@@ -110,14 +121,14 @@
 />
 
 <div class="w-full">
-    <span class="text-grey">{prompt}</span>
+    <span class="text-black/70 dark:text-white/70">{prompt}</span>
     <span>~/{files[activeIndexes[0]].name}</span>
 </div>
 <div class="h-full w-full grid grid-cols-[minmax(140px,max-content)_minmax(140px,max-content)_1fr] border">
     <div class="p-2 lf-pane-left">
         <ul>
             {#each files as { name, icon, href, content }, index}
-                <li class={"px-2 leading-snug " + (index === activeIndexes[0] ? "bg-white text-black" : "")}>
+                <li class={"px-2 leading-snug " + (index === activeIndexes[0] ? "bg-black text-white dark:bg-white dark:text-black" : "")}>
                     {#if href}
                         <a {href}
                             ><span class="text-sm mr-0.5">{icon || (href && " ") || (content && " ") || " "}</span>
@@ -134,10 +145,10 @@
     <div class="p-2 border-x">
         <ul>
             {#if files[activeIndexes[0]].content?.length == 0}
-                <li class={"px-2 leading-snug text-red"}>EMPTY</li>
+                <li class={"px-2 leading-snug text-red-700 dark:text-red-400"}>EMPTY</li>
             {:else if files[activeIndexes[0]].content?.length}
                 {#each files[activeIndexes[0]].content ?? [] as { name, icon, href, content }, index}
-                    <li class={"px-2 leading-snug " + (index === activeIndexes[1] ? "bg-white text-black" : "")}>
+                    <li class={"px-2 leading-snug " + (index === activeIndexes[1] ? "bg-black text-white dark:bg-white dark:text-black" : "")}>
                         <span class="text-sm mr-0.5">{icon || (href && " ") || (content && " ") || " "}</span>
                         {name}
                     </li>
@@ -177,7 +188,7 @@
 </div>
 <dialog
     bind:this={dialog}
-    class="m-auto bg-black text-white border fixed inset-0"
+    class="fixed inset-0 m-auto border border-black/70 bg-white text-black backdrop:bg-black/5 dark:border-white/70 dark:bg-black dark:text-white dark:backdrop:bg-black/60"
     onclick={onDialogClick}
 >
     <form
@@ -189,13 +200,13 @@
             <label for="input"> {files[activeIndexes[0]].name}</label>
             <input
                 id="input"
-                class="bg-black text-white ml-1 w-96"
+                class="ml-1 w-96"
                 bind:value={query}
             />
             <input
                 type="submit"
                 value="󰘌"
-                class="cursor-pointer w-6"
+                class="w-6 cursor-pointer"
                 onclick={handleSubmit}
             />
         </p>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -14,7 +14,7 @@ const { title } = Astro.props;
     <head>
         <Head title={title} />
     </head>
-    <body>
+    <body class="grid h-screen min-h-screen grid-rows-[auto_1fr] place-items-center gap-2 bg-white p-2 font-mono leading-[1.6] text-black transition-colors dark:bg-black dark:text-white">
         <Bar />
         <Main>
             <slot />
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,134 +1,16 @@
 @import "tailwindcss";
-@plugin "@tailwindcss/typography";
 
-@theme {
-    --color-black: #000000;
-    --color-red: #E64A29;
-    --color-green: #5AC55A;
-    --color-yellow: #FFCE29;
-    --color-blue: #5AADFF;
-    --color-magenta: #C583CD;
-    --color-cyan: #63C5C5;
-    --color-white: #fdfdfd;
-    --color-grey: #C5C5C5;
-}
+@custom-variant dark (&:where(.dark, .dark *));
 
 @theme inline {
     --font-mono: var(--font-jetbrains-mono), var(--font-noto-sans-cjk), var(--font-symbols-nerd-font), monospace;
 }
 
-@utility prose-grey {
-    --tw-prose-body: #fdfdfd;
-    --tw-prose-headings: #fdfdfd;
-    --tw-prose-links: #fdfdfd;
-    --tw-prose-pre-code: #fdfdfd;
-    --tw-prose-pre-bg: #000000;
-}
-
-@layer base {
-
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
-
-    *:focus-visible,
-    input:focus-visible {
-        outline: none;
-    }
-
-    body,
-    h1,
-    h2,
-    h3,
-    h4,
-    p,
-    figure,
-    blockquote,
-    dl,
-    dd {
-        margin: 0;
-    }
-
-    ul,
-    ol {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    a {
-        text-decoration: none;
-        color: inherit;
-    }
-}
-
-:root {
-    --color-background: black;
-    --color-text: #fdfdfd;
-    --color-grey: #a5a5a5;
-}
-
-body {
-    min-height: 100vh;
-    height: 100vh;
-    display: grid;
-    grid-template-areas: "nav" "main";
-    grid-template-rows: auto 1fr;
-    place-items: center;
-    padding: 0.5em;
-    gap: 0.5em;
-    color: var(--color-text);
-    background-color: var(--color-background);
-    font-family: var(--font-mono);
-    font-size: 16px;
-    line-height: 1.6;
-}
-
-pre {
-    font-family: var(--font-mono);
-}
-
-.prose h2 {
-    text-align: center;
-    font-size: 1.125rem;
-    color: var(--color-text);
-}
-
-.prose h3 {
-    text-align: center;
-    font-size: 1rem;
-    font-weight: 300;
-}
-
-.prose p:has(strong) {
-    margin-top: 1rem;
-}
-
-.prose details {
-    padding: 6px 10px;
-    border: 1px solid var(--color-text);
-}
-
-.prose details>summary {
-    padding: 2px 0;
-    cursor: pointer;
-    line-height: 1.2;
-}
-
-.prose details>summary::marker {
-    content: " ";
-    color: var(--color-grey);
-    font-size: 1.2em;
-}
-
-.prose details>p {
-    margin: 2px 0;
-    cursor: pointer;
+@theme {
+    --color-black: #020202;
+    --color-white: #fdfdfd;
 }
 
-div {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-grey) #0000;
+a, input, button {
+    @apply outline-none focus-visible:outline-none
 }
