From 6fc8fb9229b4689118982347e98fcf5646eb6fdd Mon Sep 17 00:00:00 2001 From: Josh Vickery Date: Wed, 11 Oct 2023 14:37:14 -0500 Subject: [PATCH] fix pdfs being in dark-mode --- packages/renderer/src/App.tsx | 25 +++++++++++++------ .../components/Views/Editor/EditorStyles.tsx | 23 +++++++++++++++++ .../components/Views/Editor/EditorView.tsx | 13 +++------- .../src/components/Views/Editor/styles.scss | 8 +++--- packages/renderer/src/types/AppTheme.ts | 20 +++++++++------ 5 files changed, 59 insertions(+), 30 deletions(-) create mode 100644 packages/renderer/src/components/Views/Editor/EditorStyles.tsx diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx index 32574f7..f415458 100644 --- 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() { /> }>{renderedView} - - - - - - + + + + ({ + color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black + })} + > + + + + + + ); } diff --git a/packages/renderer/src/components/Views/Editor/EditorStyles.tsx b/packages/renderer/src/components/Views/Editor/EditorStyles.tsx new file mode 100644 index 0000000..a795035 --- /dev/null +++ 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 ( + ({ + ".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} + + ); +} diff --git a/packages/renderer/src/components/Views/Editor/EditorView.tsx b/packages/renderer/src/components/Views/Editor/EditorView.tsx index 904be5f..933ab6d 100644 --- 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 ( - ({ - ".node-mathBlock.has-focus, .node-mathInline.has-focus, img.has-focus, .node-canvas.has-focus": - { - outline: `2px solid ${theme.fn.primaryColor()}` - } - })} - mx="md" - > + @@ -98,7 +91,7 @@ export function EditorView({ page, setEditorRef }: Props) { /> - + ); } else return <>; } diff --git a/packages/renderer/src/components/Views/Editor/styles.scss b/packages/renderer/src/components/Views/Editor/styles.scss index 353a234..381902e 100644 --- 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 index 9eb3dbb..58fc01f 100644 --- 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"