Skip to content

Commit

Permalink
Add dark mod
Browse files Browse the repository at this point in the history
  • Loading branch information
usual2970 committed Aug 31, 2024
1 parent 7479c25 commit 7d3e942
Show file tree
Hide file tree
Showing 19 changed files with 260 additions and 75 deletions.
1 change: 1 addition & 0 deletions ui/dist/assets/index-DK_EegWM.css

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion ui/dist/assets/index-VYJgHfoP.css

This file was deleted.

114 changes: 62 additions & 52 deletions ui/dist/assets/index-CJ5MTZe-.js → ui/dist/assets/index-zmVKcms4.js

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions ui/dist/imgs/providers/ssh.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ui/dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Certimate - Your Trusted SSL Automation Partner</title>
<script type="module" crossorigin src="/assets/index-CJ5MTZe-.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-VYJgHfoP.css">
<script type="module" crossorigin src="/assets/index-zmVKcms4.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DK_EegWM.css">
</head>
<body class="bg-background">
<div id="root"></div>
Expand Down
26 changes: 26 additions & 0 deletions ui/public/imgs/providers/ssh.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 73 additions & 0 deletions ui/src/components/ThemeProvider.tsx
Original file line number Diff line number Diff line change
@@ -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;
};
37 changes: 37 additions & 0 deletions ui/src/components/ThemeToggle.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
2 changes: 1 addition & 1 deletion ui/src/components/certimate/AccessEdit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/domain/access.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"]],
]);

Expand Down
2 changes: 1 addition & 1 deletion ui/src/domain/domain.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"]],
]);

Expand Down
5 changes: 4 additions & 1 deletion ui/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
14 changes: 8 additions & 6 deletions ui/src/pages/DashboardLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -152,6 +153,7 @@ export default function Dashboard() {
</SheetContent>
</Sheet>
<div className="w-full flex-1"></div>
<ThemeToggle />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion ui/src/pages/SettingLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/access/Access.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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">
Expand Down
7 changes: 5 additions & 2 deletions ui/src/pages/domains/Edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/domains/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/history/History.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
Expand Down
5 changes: 4 additions & 1 deletion ui/src/pages/setting/Password.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 7d3e942

Please sign in to comment.