fix: Print styles in dark mode when OS is light mode

closes #2124

app/components/Editor.js

@@ -4,10 +4,13 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
+import { light } from "shared/styles/theme";
 import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
 import embeds from "../embeds";
+import useMediaQuery from "hooks/useMediaQuery";
+import { type Theme } from "types";
 import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
 import { isInternalUrl } from "utils/urls";
@@ -29,6 +32,7 @@ export type Props = {|
   placeholder?: string,
   maxLength?: number,
   scrollTo?: string,
+  theme?: Theme,
   handleDOMEvents?: Object,
   readOnlyWriteCheckboxes?: boolean,
   onBlur?: (event: SyntheticEvent<>) => any,
@@ -53,6 +57,7 @@ type PropsWithRef = Props & {
 function Editor(props: PropsWithRef) {
   const { id, ui, history } = props;
   const { t } = useTranslation();
+  const isPrinting = useMediaQuery("print");
 
   const onUploadImage = React.useCallback(
     async (file: File) => {
@@ -175,6 +180,7 @@ function Editor(props: PropsWithRef) {
         tooltip={EditorTooltip}
         dictionary={dictionary}
         {...props}
+        theme={isPrinting ? light : props.theme}
       />
     </ErrorBoundary>
   );

app/components/Star.js

@@ -61,6 +61,10 @@ export const AnimatedStar = styled(StarredIcon)`
   &:active {
     transform: scale(0.95);
   }
+
+  @media print {
+    display: none;
+  }
 `;
 
 export default Star;

app/scenes/Document/components/Editor.js

@@ -6,6 +6,7 @@ import Textarea from "react-autosize-textarea";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { MAX_TITLE_LENGTH } from "shared/constants";
+import { light } from "shared/styles/theme";
 import parseTitle from "shared/utils/parseTitle";
 import Document from "models/Document";
 import ClickablePadding from "components/ClickablePadding";
@@ -202,6 +203,12 @@ const Title = styled(Textarea)`
       }
     }
   }
+
+  @media print {
+    color: ${(props) => light.text};
+    -webkit-text-fill-color: ${(props) => light.text};
+    background: none;
+  }
 `;
 
 export default DocumentEditor;