Auto styles are incorrect when printing

[MatthewHerbst]

When printing, the colors of the code are incorrect when styles are using auto.

My system:
MacOS Ventura 13.1 set to Dark theme
Chrome 108.0.5359.124 (Official Build) (arm64)

To reproduce:

1. Go to the official CodeSandbox example: https://mcebp.csb.app/
2. Print the page

I am the maintainer of react-to-print, and this issue was discovered by one of our users: MatthewHerbst/react-to-print#540. I looked at the styles and didn't see anything obviously wrong, but I am not an expert in that area. If I can be of any assistance solving this, please let me know.

[jaywcjlove]

@MatthewHerbst https://stackoverflow.com/a/59223868/1334703

Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel

1. Open Developer tools (otherwise the key combination below opens the print dialog)
2. Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
3. Type "Show rendering"
4. Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug

[MatthewHerbst]

Hi @jaywcjlove I know that I can do that as a developer, but that solution isn't sufficient for an end-user of a website

[jaywcjlove]

@MatthewHerbst https://codesandbox.io/embed/react-textarea-code-editor-for-example-github-com-uiwjs-react-textarea-code-editor-issues-134-ex2v6j?fontsize=14&hidenavigation=1&theme=dark

This is an example, you need to improve

import { useEffect, useState } from "react";

export function useTheme() {
  const mode = getComputedStyle(document.documentElement).getPropertyValue(
    "content"
  );
  const [theme, setTheme] = useState(mode === '"dark"' ? "dark" : "light");
  useEffect(() => {
    window.matchMedia("(prefers-color-scheme: light)").onchange = (event) => {
      if (event.matches) {
        setTheme("light");
      }
    };
    window.matchMedia("(prefers-color-scheme: dark)").onchange = (event) => {
      if (event.matches) {
        setTheme("dark");
      }
    };
  }, []);
  return { theme, setTheme };
}

import React from "react";
import ReactDOM from "react-dom";
import CodeEditor from "@uiw/react-textarea-code-editor";
import "./index.css";
import { useTheme } from "./useTheme";

function App() {
  const { theme } = useTheme();
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  console.log("theme:", theme);
  return (
    <div data-color-mode={theme}>
      <h3>Auto</h3>
      <CodeEditor
        value={code}
        language="js"
        placeholder="Please enter JS code."
        onChange={(evn) => setCode(evn.target.value)}
        padding={15}
        style={{
          fontFamily:
            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
          fontSize: 12
        }}
      />
    </div>
  );
}

/* Light mode */
@media (prefers-color-scheme: light) {
  html {
    content: "light"; /* (ab)using the content property */
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark), print {
  html {
    content: "dark"; /* (ab)using the content property */
  }
}

[MatthewHerbst]

https://codesandbox.io/embed/react-textarea-code-editor-for-example-github-com-uiwjs-react-textarea-code-editor-issues-134-ex2v6j?fontsize=14&hidenavigation=1&theme=dark

While this is at least an improvement since now all the text is legible, this still prints the light version instead of the dark version.

react-textarea-code-editor should ensure the styles when printing are the same as the styles when not printing.

[jaywcjlove]

The print style is given by the Chrome browser. It needs to be set manually.
@MatthewHerbst

[MatthewHerbst]

It needs to be set manually

I can't tell the end user who isn't a programmer how to set it. react-textarea-code-editor needs to "Just Work". It is possible to set the print style:

@media print {
 /** Set print-only styles here */
}

[jaywcjlove]

Although the printing theme is set, the browser theme is still light, which needs to be set manually. @MatthewHerbst

@media print {
 /** Set print-only styles here */
  html {
    content: "dark"; /* (ab)using the content property */
  }
}

[MatthewHerbst]

Then please make the changes in

https://codesandbox.io/embed/react-textarea-code-editor-for-example-github-com-uiwjs-react-textarea-code-editor-issues-134-ex2v6j?fontsize=14&hidenavigation=1&theme=dark

be part of the code, that way it "works" even without being set. And please add instructions about this to the README so your users know what to do.

[jaywcjlove]

@MatthewHerbst I tried integrating the system light and dark themes, but it will be missing some features. E.g:

+ <div data-color-mode="light">
  <h3>Light</h3>
  <CodeEditor
    value={code}
    ref={textRef}
    language="js"
    placeholder="Please enter JS code."
    onChange={(evn) => setCode(evn.target.value)}
    padding={15}
    style={{
      fontFamily:
        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
      fontSize: 12
    }}
  />
+ </div>