fix pdfs being in dark-mode

jcv8000 · Oct 11, 2023 · 6fc8fb9 · 6fc8fb9
1 parent 32c335f
commit 6fc8fb9
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 30 deletions.
diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx
@@ -1,4 +1,4 @@
-import { Anchor, AppShell, MantineProvider, Portal, Text } from "@mantine/core";
+import { Anchor, AppShell, Box, MantineProvider, Portal, Text } from "@mantine/core";
 import { ModalsProvider as MantineModalsProvider } from "@mantine/modals";
 import { Sidebar } from "components/Sidebar";
 import { EditorView, HomeView, SettingsView } from "components/Views";
@@ -16,6 +16,7 @@ import { EditorContent } from "@tiptap/react";
 import { Notifications, notifications } from "@mantine/notifications";
 import { Icon } from "components/Icon";
 import { locales } from "common/Locales";
+import { EditorStyles } from "components/Views/Editor/EditorStyles";
 
 export function App() {
     const forceUpdate = useForceUpdate();
@@ -276,8 +277,8 @@ export function App() {
             />
 
             <MantineProvider
-                withGlobalStyles
                 withNormalizeCSS
+                withGlobalStyles
                 theme={AppTheme({
                     prefs: prefs.current,
                     titlebarStyle: startPrefs.general.titlebarStyle
@@ -287,15 +288,23 @@ export function App() {
                 <MantineModalsProvider>
                     <ModalProvider>
                         <AppShell navbar={<Sidebar />}>{renderedView}</AppShell>
-
-                        <Portal>
-                            <MantineProvider inherit theme={{ colorScheme: "light" }}>
-                                <EditorContent id="fake-editor" editor={fakeEditor.current} />
-                            </MantineProvider>
-                        </Portal>
                     </ModalProvider>
                 </MantineModalsProvider>
             </MantineProvider>
+
+            <Portal>
+                <MantineProvider theme={{ colorScheme: "light" }}>
+                    <Box
+                        sx={(theme) => ({
+                            color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
+                        })}
+                    >
+                        <EditorStyles>
+                            <EditorContent id="fake-editor" editor={fakeEditor.current} />
+                        </EditorStyles>
+                    </Box>
+                </MantineProvider>
+            </Portal>
         </AppContext.Provider>
     );
 }
diff --git a/packages/renderer/src/components/Views/Editor/EditorStyles.tsx b/packages/renderer/src/components/Views/Editor/EditorStyles.tsx
@@ -0,0 +1,23 @@
+import { Box } from "@mantine/core";
+
+export function EditorStyles(props: { children: JSX.Element | JSX.Element[] }) {
+    return (
+        <Box
+            sx={(theme) => ({
+                ".node-mathBlock.has-focus, .node-mathInline.has-focus, img.has-focus, .node-canvas.has-focus":
+                    {
+                        outline: `2px solid ${theme.fn.primaryColor()}`
+                    },
+                "th, td": {
+                    border: `1px solid ${theme.colorScheme == "light" ? "#d0d7de" : "#373A40"}`
+                },
+                "tr:nth-child(even)": {
+                    backgroundColor: theme.colorScheme == "light" ? "#f6f8fa" : "#25262b"
+                }
+            })}
+            mx="md"
+        >
+            {props.children}
+        </Box>
+    );
+}
diff --git a/packages/renderer/src/components/Views/Editor/EditorView.tsx b/packages/renderer/src/components/Views/Editor/EditorView.tsx
@@ -7,6 +7,7 @@ import { Editor, EditorContent, useEditor } from "@tiptap/react";
 import Toolbar from "./Toolbar/Toolbar";
 import { extensions } from "./EditorExtensions";
 import { TableOfContents } from "./TableOfContents";
+import { EditorStyles } from "./EditorStyles";
 
 type Props = {
     page: Page;
@@ -64,15 +65,7 @@ export function EditorView({ page, setEditorRef }: Props) {
 
     if (editor != null) {
         return (
-            <Box
-                sx={(theme) => ({
-                    ".node-mathBlock.has-focus, .node-mathInline.has-focus, img.has-focus, .node-canvas.has-focus":
-                        {
-                            outline: `2px solid ${theme.fn.primaryColor()}`
-                        }
-                })}
-                mx="md"
-            >
+            <EditorStyles>
                 <Toolbar editor={editor} />
 
                 <TableOfContents editor={editor} />
@@ -98,7 +91,7 @@ export function EditorView({ page, setEditorRef }: Props) {
                         />
                     </Paper>
                 </Container>
-            </Box>
+            </EditorStyles>
         );
     } else return <></>;
 }
diff --git a/packages/renderer/src/components/Views/Editor/styles.scss b/packages/renderer/src/components/Views/Editor/styles.scss
@@ -108,7 +108,7 @@
 
         td,
         th {
-            border: 1px solid var(--table-border-color);
+            //border: 1px solid var(--table-border-color);
             box-sizing: border-box;
             min-width: 1em;
             padding: 6px 13px;
@@ -126,9 +126,9 @@
             text-align: center;
         }
 
-        tr:nth-child(even) {
-            background-color: var(--table-bg-color);
-        }
+        // tr:nth-child(even) {
+        //     background-color: var(--table-bg-color);
+        // }
 
         .selectedCell:after {
             background: rgba(200, 200, 255, 0.4);

diff --git a/packages/renderer/src/types/AppTheme.ts b/packages/renderer/src/types/AppTheme.ts
@@ -27,13 +27,13 @@ export function AppTheme(options: {
     }
 
     // Set editor table colors for light/dark mode
-    if (prefs.general.theme == "light") {
-        document.documentElement.style.setProperty("--table-border-color", "#d0d7de");
-        document.documentElement.style.setProperty("--table-bg-color", "#f6f8fa");
-    } else {
-        document.documentElement.style.setProperty("--table-border-color", "#373A40");
-        document.documentElement.style.setProperty("--table-bg-color", "#25262b");
-    }
+    // if (prefs.general.theme == "light") {
+    //     document.documentElement.style.setProperty("--table-border-color", "#d0d7de");
+    //     document.documentElement.style.setProperty("--table-bg-color", "#f6f8fa");
+    // } else {
+    //     document.documentElement.style.setProperty("--table-border-color", "#373A40");
+    //     document.documentElement.style.setProperty("--table-bg-color", "#25262b");
+    // }
 
     return {
         fontSizes: { md: "13px" },
@@ -68,6 +68,9 @@ export function AppTheme(options: {
         primaryShade: 5,
         cursorType: "pointer",
         globalStyles: (theme) => ({
+            body: {
+                backgroundColor: "white !important"
+            },
             code: {
                 fontFamily:
                     "ui-monospace, Consolas, 'Cascadia Code', 'Source Code Pro', Menlo, 'DejaVu Sans Mono', monospace"
@@ -143,7 +146,8 @@ export function AppTheme(options: {
                     root: {
                         height: titlebarStyle == "custom" ? "calc(100vh - 30px)" : "100vh",
                         marginTop: titlebarStyle == "custom" ? "30px" : "0px",
-                        position: "relative"
+                        position: "relative",
+                        backgroundColor: prefs.general.theme === "dark" ? "#1A1B1E" : "#FFFFFF"
                     },
                     body: {
                         height: titlebarStyle == "custom" ? "calc(100vh - 30px)" : "100vh"