Merge pull request #135 from alley-rs/dev

feat: 支持手动控制明暗色

src-tauri/src/config.rs

@@ -5,6 +5,15 @@ use tokio::fs;
 
 use crate::{error::LsarResult, global::APP_CONFIG_DIR};
 
+#[derive(Debug, Serialize, Deserialize, Default)]
+#[serde(rename_all = "lowercase")]
+enum DarkMode {
+    Dark,
+    Light,
+    #[default]
+    System,
+}
+
 #[derive(Debug, Serialize, Deserialize, Default)]
 struct Player {
     path: PathBuf,
@@ -23,6 +32,8 @@ struct Platform {
 
 #[derive(Debug, Serialize, Deserialize, Default)]
 pub struct Config {
+    #[serde(default)]
+    dark_mode: DarkMode,
     player: Player,
     platform: Platform,
 }

src/App.tsx

@@ -9,6 +9,7 @@ import Result from "./components/result";
 import "./App.scss";
 import About from "./components/about";
 import { AiFillSetting } from "solid-icons/ai";
+import { useDarkMode } from "./hooks/useDarkMode";
 
 const TitleBar =
   import.meta.env.TAURI_ENV_PLATFORM === "darwin"
@@ -31,6 +32,8 @@ const App = () => {
     showMainWindow();
   });
 
+  useDarkMode(config);
+
   const onClickSettingsButton = () => setShowSettings(true);
 
   return (

src/components/settings/DarkMode.tsx

@@ -0,0 +1,35 @@
+import { children } from "solid-js";
+import { LazyLabel, LazySpace, LazyTag } from "~/lazy";
+
+interface DarkModeProps {
+  mode: Config["dark_mode"];
+  onChoice: (mode: Config["dark_mode"]) => void;
+}
+
+const modes: Array<{ value: Config["dark_mode"]; label: string }> = [
+  { value: "light", label: "亮色" },
+  { value: "dark", label: "暗色" },
+  { value: "system", label: "跟随系统" },
+];
+
+const DarkMode = (props: DarkModeProps) => {
+  const items = children(() =>
+    modes.map((mode) => (
+      <LazyTag
+        onClick={() => props.onChoice(mode.value)}
+        color={props.mode === mode.value ? "success" : "default"}
+      >
+        {mode.label}
+      </LazyTag>
+    )),
+  );
+  return (
+    <LazySpace gap={16}>
+      <LazyLabel>暗色模式</LazyLabel>
+
+      <LazySpace gap={8}>{items()}</LazySpace>
+    </LazySpace>
+  );
+};
+
+export default DarkMode;

src/components/settings/index.tsx

@@ -11,6 +11,7 @@ import {
   LazyText,
   LazyTextArea,
 } from "~/lazy";
+import DarkMode from "./DarkMode";
 
 const Settings = () => {
   const [
@@ -87,10 +88,23 @@ const Settings = () => {
   return (
     <LazyDialog
       show={showSettings() || !defaultConfig()?.player.path}
-      onClose={() => { }}
+      onClose={() => {}}
       maskClosable={false}
     >
       <LazyFlex direction="vertical" gap={8} style={{ "min-width": "400px" }}>
+        <DarkMode
+          mode={lsarConfig()?.dark_mode || "system"}
+          onChoice={(mode) =>
+            setLsarConfig(
+              (prev) =>
+                prev && {
+                  ...prev,
+                  dark_mode: mode,
+                },
+            )
+          }
+        />
+
         <LazySpace>
           <LazyLabel>播放器绝对路径</LazyLabel>
 

src/hooks/useDarkMode.ts

@@ -0,0 +1,37 @@
+import { createEffect, type Resource } from "solid-js";
+
+export function useDarkMode(config: Resource<Config>) {
+  const switchDark = (isDark: boolean) => {
+    window.document.documentElement.classList.toggle("dark", isDark);
+  };
+
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+  createEffect(() => {
+    const darkMode = config()?.dark_mode;
+    if (!darkMode) return;
+
+    const handleSystemTheme = (event?: MediaQueryListEvent) => {
+      const isDark = event ? event.matches : mediaQuery.matches;
+      switchDark(darkMode === "system" ? isDark : darkMode === "dark");
+    };
+
+    if (darkMode === "system") {
+      mediaQuery.addEventListener("change", handleSystemTheme);
+      handleSystemTheme();
+
+      return () => {
+        // cleanup 移除监听器
+        mediaQuery.removeEventListener("change", handleSystemTheme);
+      };
+    }
+    switchDark(darkMode === "dark");
+  });
+
+  return {
+    isDarkMode: () =>
+      config()?.dark_mode === "dark" ||
+      (config()?.dark_mode === "system" &&
+        matchMedia("(prefers-color-scheme: dark)").matches),
+  };
+}

src/index.scss

@@ -19,59 +19,57 @@
   background: var(--alley-color-mask);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --alley-color-text: #fff;
-    --alley-color-text-description: rgba(255, 255, 255, 0.45);
-    --alley-color-text-heading: rgba(255, 255, 255, 0.85);
+.dark {
+  --alley-color-text: #fff;
+  --alley-color-text-description: rgba(255, 255, 255, 0.45);
+  --alley-color-text-heading: rgba(255, 255, 255, 0.85);
 
-    --alley-color-bg-container: rgba(0, 0, 0, 0.4);
+  --alley-color-bg-container: rgba(0, 0, 0, 0.4);
 
-    --alley-color-border: #000;
+  --alley-color-border: #000;
 
-    --alley-color-mask: rgba(0, 0, 0, 0.5);
+  --alley-color-mask: rgba(0, 0, 0, 0.5);
 
-    --alley-color-info-bg: rgb(41 44 104 / 30%);
-    --alley-color-info-border: #4045a3;
+  --alley-color-info-bg: rgb(41 44 104 / 30%);
+  --alley-color-info-border: #4045a3;
 
-    --alley-color-success: #297000;
-    --alley-color-success-bg: #092b00;
-    --alley-color-success-border: #237804;
+  --alley-color-success: #297000;
+  --alley-color-success-bg: #092b00;
+  --alley-color-success-border: #237804;
 
-    --alley-color-error-bg: #5c0011;
-    --alley-color-error-border: #820014;
+  --alley-color-error-bg: #5c0011;
+  --alley-color-error-border: #820014;
 
-    .alley-input {
-      --alley-input-addon-bg: rgba(255, 255, 255, 0.04);
-      // --alley-input-active-border-color: #1668dc;
-      // --alley-input-hover-border-color: #3c89e8;
-      --alley-input-active-shadow: 0 0 0 2px rgba(0, 60, 180, 0.15);
-      --alley-input-error-active-shadow: 0 0 0 2px rgba(238, 38, 56, 0.11);
-      --alley-input-warning-active-shadow: 0 0 0 2px rgba(173, 107, 0, 0.15);
-      --alley-input-hover-bg: #141414;
-      --alley-input-active-bg: #141414;
-    }
-
-    .alley-button {
-      --alley-color-button-backgroud: #1a1a1a;
-      --alley-color-button-text: var(--alley-color-text);
-      --alley-button-plain-hover-bg: rgba(255, 255, 255, 0.06);
-      --alley-button-primary-hover: #646cff;
-      --alley-color-button-ripple-danger: rgb(0 0 0 / 30%);
-      --alley-button-ripple-container: #4045a3;
+  .alley-input {
+    --alley-input-addon-bg: rgba(255, 255, 255, 0.04);
+    // --alley-input-active-border-color: #1668dc;
+    // --alley-input-hover-border-color: #3c89e8;
+    --alley-input-active-shadow: 0 0 0 2px rgba(0, 60, 180, 0.15);
+    --alley-input-error-active-shadow: 0 0 0 2px rgba(238, 38, 56, 0.11);
+    --alley-input-warning-active-shadow: 0 0 0 2px rgba(173, 107, 0, 0.15);
+    --alley-input-hover-bg: #141414;
+    --alley-input-active-bg: #141414;
+  }
 
-      &-plain {
-        --alley-button-ripple-container: #646cff;
-      }
+  .alley-button {
+    --alley-color-button-backgroud: #1a1a1a;
+    --alley-color-button-text: var(--alley-color-text);
+    --alley-button-plain-hover-bg: rgba(255, 255, 255, 0.06);
+    --alley-button-primary-hover: #646cff;
+    --alley-color-button-ripple-danger: rgb(0 0 0 / 30%);
+    --alley-button-ripple-container: #4045a3;
 
-      &-primary {
-        --alley-button-ripple-container: rgb(0 0 0 / 30%);
-      }
+    &-plain {
+      --alley-button-ripple-container: #646cff;
     }
 
-    .alley-tag {
-      --alley-tag-default-bg: #1d1d1d;
-      --alley-tag-default-color: rgba(255, 255, 255, 0.85);
+    &-primary {
+      --alley-button-ripple-container: rgb(0 0 0 / 30%);
     }
   }
+
+  .alley-tag {
+    --alley-tag-default-bg: #1d1d1d;
+    --alley-tag-default-color: rgba(255, 255, 255, 0.85);
+  }
 }

src/lazy.ts

@@ -65,3 +65,7 @@ export const LazyToast = lazy(
 export const LazyAlert = lazy(
   () => import("alley-components/lib/components/alert"),
 );
+
+export const LazyDropDown = lazy(
+  () => import("alley-components/lib/components/dropdown"),
+);

types/config.d.ts

@@ -4,6 +4,7 @@ interface Player {
 }
 
 interface Config {
+  dark_mode: "dark" | "light" | "system";
   player: Player;
   platform: { bilibili: { cookie: string } };
 }