Open MatthewHerbst opened 1 year ago
@MatthewHerbst https://stackoverflow.com/a/59223868/1334703
Since Chrome version 79 you can toggle between
prefers-color-scheme: dark
andprefers-color-scheme: light
from the Rendering panel
- Open Developer tools (otherwise the key combination below opens the print dialog)
- Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
- Type "Show rendering"
- Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug
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
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 */
}
}
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.
The print style is given by the Chrome browser. It needs to be set manually. @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 */
}
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 */
}
}
Then please make the changes in
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.
@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>
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:
I am the maintainer of
react-to-print
, and this issue was discovered by one of our users: https://github.com/gregnb/react-to-print/issues/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.