feat: match system color theme (darkmode support)

garethgeorge · Dec 8, 2023 · a8762dc · a8762dc
1 parent 426aad4
commit a8762dc
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 58 deletions.
diff --git a/webui/package.json b/webui/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "start": "parcel serve src/index.html",
     "build": "RESTICUI_BUILD_VERSION=$(git describe --tags --abbrev=0) UI_OS=unix parcel build src/index.html",
-    "build-windows": "set UI_OS=windows & set RESTICUI_BUILD_VERSION=$(git describe --tags --abbrev=0) & parcel build src/index.html",
+    "build-windows": "set UI_OS=windows & parcel build src/index.html",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",

diff --git a/webui/src/index.tsx b/webui/src/index.tsx
@@ -6,6 +6,7 @@ import { AlertContextProvider } from "./components/Alerts";
 import { ModalContextProvider } from "./components/ModalManager";
 
 import "react-js-cron/dist/styles.css";
+import { ConfigProvider, theme } from "antd";
 
 const Root = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -17,10 +18,21 @@ const Root = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
+const darkThemeMq = true; // window.matchMedia("(prefers-color-scheme: dark)");
+
 const el = document.querySelector("#app");
 el &&
   createRoot(el).render(
-    <Root>
-      <App />
-    </Root>
+    <ConfigProvider
+      theme={{
+        algorithm: [
+          darkThemeMq ? theme.darkAlgorithm : theme.defaultAlgorithm,
+          theme.compactAlgorithm,
+        ],
+      }}
+    >
+      <Root>
+        <App />
+      </Root>
+    </ConfigProvider>
   );
diff --git a/webui/src/state/buildcfg.ts b/webui/src/state/buildcfg.ts
@@ -1,5 +1,5 @@
 export const uios = (process.env.UI_OS || "").trim().toLowerCase();
 export const isWindows = uios === "windows";
 export const uiBuildVersion = (
-  process.env.RESTICUI_BUILD_VERSION || "dev"
+  process.env.RESTICUI_BUILD_VERSION || "dev-snapshot-build"
 ).trim();
diff --git a/webui/src/views/App.tsx b/webui/src/views/App.tsx
@@ -49,14 +49,20 @@ export const App: React.FC = () => {
   const items = getSidenavItems(config);
 
   return (
-    <Layout style={{ height: "auto" }}>
-      <Header style={{ display: "flex", alignItems: "center" }}>
+    <Layout style={{ height: "auto", minHeight: "100vh" }}>
+      <Header
+        style={{
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: "#1b232c",
+        }}
+      >
         <h1>
           <a
             style={{ color: colorTextLightSolid }}
             onClick={() => setContent(null, [])}
           >
-            BackRest<span style={{ color: "grey" }}>ic</span>{" "}
+            Restora{" "}
           </a>
           <small style={{ color: "rgba(255,255,255,0.3)", fontSize: "0.6em" }}>
             {uiBuildVersion}

diff --git a/webui/src/views/GettingStartedGuide.tsx b/webui/src/views/GettingStartedGuide.tsx
@@ -8,51 +8,53 @@ export const GettingStartedGuide = () => {
 
   return (
     <>
-      <h1>Getting Started</h1>
-      <Divider orientation="left">Overview</Divider>
-      <ul>
-        <li>
-          Repos map directly to restic repositories, start by configuring your
-          backup locations.
-        </li>
-        <li>
-          Plans are where you configure directories to backup, and backup
-          scheduling. Multiple plans can backup to a single restic repository.
-        </li>
-        <li>
-          See{" "}
-          <a href="https://restic.readthedocs.io/en/latest/030_preparing_a_new_repo.html">
-            the restic docs on preparing a new repository
-          </a>{" "}
-          for details about available repository types and how they can be
-          configured.
-        </li>
-      </ul>
-      <Divider orientation="left">Tips</Divider>
-      <ul>
-        <li>
-          Backup your ResticUI configuration: your ResticUI config holds all of
-          your repos, plans, and the passwords to decrypt them. When you have
-          ResticUI configured to your liking make sure to store a copy of your
-          config (or minimally a copy of your passwords) in a safe location e.g.
-          a secure note in your password manager.
-        </li>
-      </ul>
-      <Divider orientation="left">Config View</Divider>
-      <Collapse
-        size="small"
-        items={[
-          {
-            key: "1",
-            label: "Config JSON hidden for security",
-            children: (
-              <Typography>
-                <pre>{JSON.stringify(config, null, 2)}</pre>
-              </Typography>
-            ),
-          },
-        ]}
-      />
+      <Typography.Text>
+        <h1>Getting Started</h1>
+        <Divider orientation="left">Overview</Divider>
+        <ul>
+          <li>
+            Repos map directly to restic repositories, start by configuring your
+            backup locations.
+          </li>
+          <li>
+            Plans are where you configure directories to backup, and backup
+            scheduling. Multiple plans can backup to a single restic repository.
+          </li>
+          <li>
+            See{" "}
+            <a href="https://restic.readthedocs.io/en/latest/030_preparing_a_new_repo.html">
+              the restic docs on preparing a new repository
+            </a>{" "}
+            for details about available repository types and how they can be
+            configured.
+          </li>
+        </ul>
+        <Divider orientation="left">Tips</Divider>
+        <ul>
+          <li>
+            Backup your ResticUI configuration: your ResticUI config holds all
+            of your repos, plans, and the passwords to decrypt them. When you
+            have ResticUI configured to your liking make sure to store a copy of
+            your config (or minimally a copy of your passwords) in a safe
+            location e.g. a secure note in your password manager.
+          </li>
+        </ul>
+        <Divider orientation="left">Config View</Divider>
+        <Collapse
+          size="small"
+          items={[
+            {
+              key: "1",
+              label: "Config JSON hidden for security",
+              children: (
+                <Typography>
+                  <pre>{JSON.stringify(config, null, 2)}</pre>
+                </Typography>
+              ),
+            },
+          ]}
+        />
+      </Typography.Text>
     </>
   );
 };
diff --git a/webui/src/views/PlanView.tsx b/webui/src/views/PlanView.tsx
@@ -1,16 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { Plan } from "../../gen/ts/v1/config.pb";
-import { Button, Flex, Tabs, Tooltip } from "antd";
-import { SettingOutlined } from "@ant-design/icons";
-import { AddPlanModal } from "./AddPlanModal";
+import { Button, Flex, Tabs, Tooltip, Typography } from "antd";
 import { useShowModal } from "../components/ModalManager";
 import { useRecoilValue } from "recoil";
 import { configState } from "../state/config";
 import { useAlertApi } from "../components/Alerts";
 import { ResticUI } from "../../gen/ts/v1/service.pb";
 import {
   EOperation,
-  buildOperationListListener,
   subscribeToOperations,
   unsubscribeFromOperations,
 } from "../state/oplog";
@@ -61,7 +58,9 @@ export const PlanView = ({ plan }: React.PropsWithChildren<{ plan: Plan }>) => {
   return (
     <>
       <Flex gap="small" align="center" wrap="wrap">
-        <h1>{plan.id}</h1>
+        <Typography.Title>
+          <h1>{plan.id}</h1>
+        </Typography.Title>
       </Flex>
       <Flex gap="small" align="center" wrap="wrap">
         <Button type="primary" onClick={handleBackupNow}>