refactor(flat-pages): allow set preview theme by search params (#1812)

netless-io · Jan 9, 2023 · 6ee91e6 · 6ee91e6
1 parent 7f86615
commit 6ee91e6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/packages/flat-pages/src/FilePreviewPage/index.tsx b/packages/flat-pages/src/FilePreviewPage/index.tsx
@@ -1,24 +1,34 @@
-import React from "react";
+import "./style.less";
+
+import React, { useContext } from "react";
+import classNames from "classnames";
 import { useParams } from "react-router-dom";
 import {
     ErrorPage,
     useSafePromise,
     FilePreviewImage,
     FilePreviewAudio,
     FilePreviewVideo,
+    FlatPrefersColorScheme,
+    DarkModeContext,
 } from "flat-components";
 import { RouteNameType, RouteParams } from "../utils/routes";
 import { CloudFile } from "@netless/flat-server-api";
 import { useIsomorphicLayoutEffect } from "react-use";
 import { FlatServices, IServiceFileExtensions, IServiceFilePreview } from "@netless/flat-services";
+import { PreferencesStoreContext } from "../components/StoreProvider";
+import { useSearchParams } from "../UserSettingPage/ApplicationsPage/hooks";
 
 export interface FilePreviewPageProps {
     file?: CloudFile;
 }
 
 export const FilePreviewPage: React.FC<FilePreviewPageProps> = props => {
     const sp = useSafePromise();
+    const preferencesStore = useContext(PreferencesStoreContext);
+    const isDark = useContext(DarkModeContext);
     const params = useParams<RouteParams<RouteNameType.FilePreviewPage>>();
+    const [query] = useSearchParams();
     const [containerNode, setContainerNode] = React.useState<HTMLDivElement | null>(null);
     const [service, setService] = React.useState<IServiceFilePreview | null | undefined>();
 
@@ -42,6 +52,13 @@ export const FilePreviewPage: React.FC<FilePreviewPageProps> = props => {
         [file],
     );
 
+    useIsomorphicLayoutEffect(() => {
+        const raw = query.get("theme");
+        const theme: FlatPrefersColorScheme =
+            raw === "dark" ? "dark" : raw === "light" ? "light" : "auto";
+        preferencesStore.updatePrefersColorScheme(theme);
+    }, []);
+
     useIsomorphicLayoutEffect(() => {
         let previewService: IServiceFilePreview | null = null;
         sp(FlatServices.getInstance().requestService(`file-preview:${fileExt}`, false)).then(
@@ -68,7 +85,9 @@ export const FilePreviewPage: React.FC<FilePreviewPageProps> = props => {
     return (
         <div
             ref={setContainerNode}
-            className="file-preview-container"
+            className={classNames("file-preview-container", {
+                "telebox-color-scheme-dark": isDark,
+            })}
             style={{ height: "100%", overflow: "hidden" }}
         >
             {service === null && renderBuiltinFilePreview(file, fileExt)}

diff --git a/packages/flat-pages/src/FilePreviewPage/style.less b/packages/flat-pages/src/FilePreviewPage/style.less
@@ -0,0 +1,5 @@
+.flat-color-scheme-dark {
+    .file-preview-container {
+        background-color: #222429;
+    }
+}