Comments (9)
@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 */
}
}
from react-textarea-code-editor.
@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
from react-textarea-code-editor.
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
from react-textarea-code-editor.
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.
from react-textarea-code-editor.
The print style is given by the Chrome browser. It needs to be set manually.
@MatthewHerbst
from react-textarea-code-editor.
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 */
}
from react-textarea-code-editor.
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 */
}
}
from react-textarea-code-editor.
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.
from react-textarea-code-editor.
@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>
from react-textarea-code-editor.
Related Issues (20)
- How To Display Programming Language Select Button HOT 1
- bundle size HOT 2
- how to do command enter and preventing enter from being sent to code editor? HOT 7
- Auto comment selection HOT 2
- Is `font-family: inherit;` in `.w-tc-editor` required? HOT 2
- JSON Highlighting of Value the same as the Name when a string HOT 2
- [Fix] Shift+Tab on single line removes starting tab HOT 3
- Add the ability to highlight individual lines HOT 2
- Pressing the tab key on a readonly textarea causes a tab in the value HOT 1
- Disable prop HOT 2
- Unable to access ref on CodeEditor using NextJS dynamic HOT 2
- chinese input error HOT 2
- [Feature Request] CSV support HOT 3
- CTRL + Z | Undo HOT 2
- gray color on text highlight HOT 4
- Can I show line numbers ? HOT 1
- Can I show line numbers ? HOT 2
- How to import `TextareaCodeEditorProps` in v3 +? HOT 2
- Module not found: Can't resolve 'devlop' HOT 3
- more customisable padding HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-textarea-code-editor.