Add dark mod

2024-08-31 13:16:03 +08:00
parent 7479c25e7a
commit 7d3e94247e
19 changed files with 260 additions and 75 deletions
--- a/ui/src/components/ThemeProvider.tsx
+++ b/ui/src/components/ThemeProvider.tsx
@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};
--- a/ui/src/components/ThemeToggle.tsx
+++ b/ui/src/components/ThemeToggle.tsx
@@ -0,0 +1,37 @@
+import { Moon, Sun } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useTheme } from "./ThemeProvider";
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 dark:text-white" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          浅色
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          暗黑
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          系统
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/ui/src/components/certimate/AccessEdit.tsx
+++ b/ui/src/components/certimate/AccessEdit.tsx
@@ -90,7 +90,7 @@ export function AccessEdit({
      <DialogTrigger asChild className={cn(className)}>
        {trigger}
      </DialogTrigger>
-      <DialogContent className="sm:max-w-[600px] w-full">
+      <DialogContent className="sm:max-w-[600px] w-full dark:text-stone-200">
        <DialogHeader>
          <DialogTitle>{op == "add" ? "添加" : "编辑"}授权</DialogTitle>
        </DialogHeader>
--- a/ui/src/domain/access.ts
+++ b/ui/src/domain/access.ts
@@ -3,7 +3,7 @@ import { z } from "zod";
 export const accessTypeMap: Map<string, [string, string]> = new Map([
  ["tencent", ["腾讯云", "/imgs/providers/tencent.svg"]],
  ["aliyun", ["阿里云", "/imgs/providers/aliyun.svg"]],
-  ["ssh", ["SSH部署", "/imgs/providers/ssh.png"]],
+  ["ssh", ["SSH部署", "/imgs/providers/ssh.svg"]],
  ["webhook", ["Webhook", "/imgs/providers/webhook.svg"]],
 ]);

--- a/ui/src/domain/domain.ts
+++ b/ui/src/domain/domain.ts
@@ -31,7 +31,7 @@ export const targetTypeMap: Map<string, [string, string]> = new Map([
  ["aliyun-cdn", ["阿里云-CDN", "/imgs/providers/aliyun.svg"]],
  ["aliyun-oss", ["阿里云-OSS", "/imgs/providers/aliyun.svg"]],
  ["tencent-cdn", ["腾讯云-CDN", "/imgs/providers/tencent.svg"]],
-  ["ssh", ["SSH部署", "/imgs/providers/ssh.png"]],
+  ["ssh", ["SSH部署", "/imgs/providers/ssh.svg"]],
  ["webhook", ["Webhook", "/imgs/providers/webhook.svg"]],
 ]);

--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -3,9 +3,12 @@ import ReactDOM from "react-dom/client";
 import "./global.css";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router.tsx";
+import { ThemeProvider } from "./components/ThemeProvider.tsx";

 ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
-    <RouterProvider router={router} />
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <RouterProvider router={router} />
+    </ThemeProvider>
  </React.StrictMode>
 );
--- a/ui/src/pages/DashboardLayout.tsx
+++ b/ui/src/pages/DashboardLayout.tsx
@@ -21,6 +21,7 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
 import { ConfigProvider } from "@/providers/config";
 import { getPb } from "@/repository/api";
+import { ThemeToggle } from "@/components/ThemeToggle";

 export default function Dashboard() {
  const navigate = useNavigate();
@@ -49,12 +50,12 @@ export default function Dashboard() {
    <>
      <ConfigProvider>
        <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-          <div className="hidden border-r bg-muted/40 md:block">
+          <div className="hidden border-r dark:border-stone-500 bg-muted/40 md:block">
            <div className="flex h-full max-h-screen flex-col gap-2">
-              <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+              <div className="flex h-14 items-center border-b dark:border-stone-500 px-4 lg:h-[60px] lg:px-6">
                <Link to="/" className="flex items-center gap-2 font-semibold">
                  <img src="/vite.svg" className="w-[36px] h-[36px]" />
-                  <span className="">Certimate</span>
+                  <span className="dark:text-white">Certimate</span>
                </Link>
              </div>
              <div className="flex-1">
@@ -95,7 +96,7 @@ export default function Dashboard() {
            </div>
          </div>
          <div className="flex flex-col">
-            <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+            <header className="flex h-14 items-center gap-4 border-b dark:border-stone-500 bg-muted/40 px-4 lg:h-[60px] lg:px-6">
              <Sheet>
                <SheetTrigger asChild>
                  <Button
@@ -152,6 +153,7 @@ export default function Dashboard() {
                </SheetContent>
              </Sheet>
              <div className="w-full flex-1"></div>
+              <ThemeToggle />
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
@@ -182,12 +184,12 @@ export default function Dashboard() {

              <div className="fixed right-0 bottom-0 w-full flex justify-between p-5">
                <div className=""></div>
-                <div className="text-muted-foreground text-sm hover:text-stone-900">
+                <div className="text-muted-foreground text-sm hover:text-stone-900 dark:hover:text-stone-200">
                  <a
                    href="https://github.com/usual2970/certimate/releases"
                    target="_blank"
                  >
-                    Certimate v0.0.9
+                    Certimate v0.0.10
                  </a>
                </div>
              </div>
--- a/ui/src/pages/SettingLayout.tsx
+++ b/ui/src/pages/SettingLayout.tsx
@@ -5,7 +5,9 @@ const SettingLayout = () => {
  return (
    <div>
      <Toaster />
-      <div className="text-muted-foreground border-b py-5">设置密码</div>
+      <div className="text-muted-foreground border-b dark:border-stone-500 py-5">
+        设置密码
+      </div>
      <div className="w-full sm:w-[35em] mt-10 flex flex-col p-3 mx-auto">
        {/* <div className="text-muted-foreground">
          <span className="transition-all text-sm bg-gray-400 px-3 py-1 rounded-sm text-white cursor-pointer">
--- a/ui/src/pages/access/Access.tsx
+++ b/ui/src/pages/access/Access.tsx
@@ -39,7 +39,7 @@ const Access = () => {
        </div>
      ) : (
        <>
-          <div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b sm:p-2 mt-5">
+          <div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
            <div className="w-48">名称</div>
            <div className="w-48">服务商</div>

@@ -52,7 +52,7 @@ const Access = () => {
          </div>
          {accesses.map((access) => (
            <div
-              className="flex flex-col sm:flex-row text-secondary-foreground border-b sm:p-2 hover:bg-muted/50 text-sm"
+              className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
              key={access.id}
            >
              <div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
--- a/ui/src/pages/domains/Edit.tsx
+++ b/ui/src/pages/domains/Edit.tsx
@@ -152,12 +152,15 @@ const Edit = () => {
    <>
      <div className="">
        <Toaster />
-        <div className="border-b h-10 text-muted-foreground">
+        <div className="border-b dark:border-stone-500 h-10 text-muted-foreground">
          {domain?.id ? "编辑" : "新增"}域名
        </div>
        <div className="max-w-[35em] mx-auto mt-10">
          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-8 dark:text-stone-200"
+            >
              <FormField
                control={form.control}
                name="domain"
--- a/ui/src/pages/domains/Home.tsx
+++ b/ui/src/pages/domains/Home.tsx
@@ -170,7 +170,7 @@ const Home = () => {
          </>
        ) : (
          <>
-            <div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b sm:p-2 mt-5">
+            <div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
              <div className="w-40">域名</div>
              <div className="w-48">有效期限</div>
              <div className="w-32">最近执行状态</div>
@@ -185,7 +185,7 @@ const Home = () => {

            {domains.map((domain) => (
              <div
-                className="flex flex-col sm:flex-row text-secondary-foreground border-b sm:p-2 hover:bg-muted/50 text-sm"
+                className="flex flex-col sm:flex-row text-secondary-foreground border-b  dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
                key={domain.id}
              >
                <div className="sm:w-40 w-full pt-1 sm:pt-0 flex items-center">
--- a/ui/src/pages/history/History.tsx
+++ b/ui/src/pages/history/History.tsx
@@ -66,7 +66,7 @@ const History = () => {
        </>
      ) : (
        <>
-          <div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b sm:p-2 mt-5">
+          <div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
            <div className="w-48">域名</div>

            <div className="w-24">状态</div>
@@ -82,7 +82,7 @@ const History = () => {
          {deployments?.map((deployment) => (
            <div
              key={deployment.id}
-              className="flex flex-col sm:flex-row text-secondary-foreground border-b sm:p-2 hover:bg-muted/50 text-sm"
+              className="flex flex-col sm:flex-row text-secondary-foreground border-b  dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
            >
              <div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
                {deployment.expand.domain?.domain}
--- a/ui/src/pages/setting/Password.tsx
+++ b/ui/src/pages/setting/Password.tsx
@@ -85,7 +85,10 @@ const Password = () => {
  return (
    <>
      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-8 dark:text-stone-200"
+        >
          <FormField
            control={form.control}
            name="oldPassword"