Skip to content

Commit 4770c35

Browse files
jaywcjlovejaywcjlove
committed
feat: support dark-mode style.
1 parent 80e1dfe commit 4770c35

File tree

5 files changed

+79
-21
lines changed

5 files changed

+79
-21
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"@uiw/react-github-corners": "~1.5.3",
8383
"@uiw/react-markdown-preview": "^4.0.4",
8484
"@uiw/react-loader": "^4.14.2",
85+
"@wcj/dark-mode": "~1.0.10",
8586
"code-example": "^3.3.1",
8687
"compile-less-cli": "~1.8.11",
8788
"husky": "~7.0.4",

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-color-mode="light">
2+
<html lang="en">
33

44
<head>
55
<meta charset="utf-8">

‎src/style/index.less‎

Lines changed: 72 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,61 @@
11
@w-textarea:~ "w-tc-editor";
22

3+
@media (prefers-color-scheme: dark) {
4+
.@{w-textarea} {
5+
color-scheme: dark;
6+
--color-prettylights-syntax-comment: #8b949e;
7+
--color-prettylights-syntax-entity-tag: #7ee787;
8+
--color-prettylights-syntax-entity: #d2a8ff;
9+
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
10+
--color-prettylights-syntax-constant: #79c0ff;
11+
--color-prettylights-syntax-string: #a5d6ff;
12+
--color-prettylights-syntax-keyword: #ff7b72;
13+
--color-prettylights-syntax-markup-bold: #c9d1d9;
14+
}
15+
}
16+
17+
@media (prefers-color-scheme: light) {
18+
.@{w-textarea} {
19+
color-scheme: light;
20+
--color-prettylights-syntax-comment: #6e7781;
21+
--color-prettylights-syntax-entity-tag: #116329;
22+
--color-prettylights-syntax-entity: #8250df;
23+
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
24+
--color-prettylights-syntax-constant: #0550ae;
25+
--color-prettylights-syntax-string: #0a3069;
26+
--color-prettylights-syntax-keyword: #cf222e;
27+
--color-prettylights-syntax-markup-bold: #24292f;
28+
}
29+
}
30+
31+
[data-color-mode*='dark'] .@{w-textarea},
32+
[data-color-mode*='dark'] .@{w-textarea}-var,
33+
body[data-color-mode*='dark'] {
34+
color-scheme: dark;
35+
--color-prettylights-syntax-comment: #8b949e;
36+
--color-prettylights-syntax-entity-tag: #7ee787;
37+
--color-prettylights-syntax-entity: #d2a8ff;
38+
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
39+
--color-prettylights-syntax-constant: #79c0ff;
40+
--color-prettylights-syntax-string: #a5d6ff;
41+
--color-prettylights-syntax-keyword: #ff7b72;
42+
--color-prettylights-syntax-markup-bold: #c9d1d9;
43+
}
44+
45+
[data-color-mode*='light'] .@{w-textarea},
46+
[data-color-mode*='light'] .@{w-textarea}-var,
47+
body[data-color-mode*='light'] {
48+
color-scheme: light;
49+
--color-prettylights-syntax-comment: #6e7781;
50+
--color-prettylights-syntax-entity-tag: #116329;
51+
--color-prettylights-syntax-entity: #8250df;
52+
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
53+
--color-prettylights-syntax-constant: #0550ae;
54+
--color-prettylights-syntax-string: #0a3069;
55+
--color-prettylights-syntax-keyword: #cf222e;
56+
--color-prettylights-syntax-markup-bold: #24292f;
57+
}
58+
359
.@{w-textarea} {
460
font-family: inherit;
561
font-size: 12px;
@@ -26,10 +82,10 @@
2682
.token.comment,
2783
.token.doctype,
2884
.token.prolog {
29-
color: #90a4ae;
85+
color: var(--color-prettylights-syntax-comment);
3086
}
3187
.token.punctuation {
32-
color: #9e9e9e;
88+
color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
3389
}
3490
.namespace {
3591
opacity: 0.7;
@@ -40,56 +96,55 @@
4096
.token.deleted,
4197
.token.number,
4298
.token.symbol {
43-
color: #e91e63;
99+
color: var(--color-prettylights-syntax-entity-tag);
44100
}
45101

46-
.token.attr-name,
47102
.token.builtin,
48103
.token.char,
49104
.token.inserted,
50105
.token.selector,
51106
.token.string {
52-
color: #22863a;
107+
color: var(--color-prettylights-syntax-constant);
53108
}
54109

55110
.style .token.string,
56111
.token.entity,
112+
.token.property,
57113
.token.operator,
58114
.token.url {
59-
color: #795548;
115+
color: var(--color-prettylights-syntax-constant);
60116
}
61117

62118
.token.atrule,
63-
.token.attr-value,
64-
.token.attr-name,
65-
.token.property,
119+
.token.property-access .token.method,
66120
.token.keyword {
67-
color: #3f51b5;
121+
color: var(--color-prettylights-syntax-keyword);
68122
}
69123

70124
.token.function {
71-
color: #f44336;
125+
color: var(--color-prettylights-syntax-string);
72126
}
73127

74128
.token.important,
75129
.token.regex,
76130
.token.variable {
77-
color: #ff9800;
131+
color: var(--color-prettylights-syntax-string-regexp);
78132
}
79133

80134
.token.bold,
81135
.token.important {
82-
color: #333;
136+
color: var(--color-prettylights-syntax-markup-bold);
83137
}
84138
.token.tag {
85-
color: #22863a;
139+
color: var(--color-prettylights-syntax-entity-tag);
86140
}
87-
.attr-name {
88-
color: #005cc5;
141+
.token.attr-value,
142+
.token.attr-name {
143+
color: var(--color-prettylights-syntax-constant);
89144
}
90145
.token.selector .class,
91146
.token.class-name {
92-
color: #6f42c1;
147+
color: var(--color-prettylights-syntax-entity);
93148
}
94149
}
95150
}

‎website/App.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ body {
1919
font-size: 12px;
2020
font-weight: 400;
2121
position: absolute;
22-
color: #ababab;
23-
background-color: #e6e6e6;
22+
color: var(--color-thme-text);
23+
background-color: var(--color-thme-bg);
2424
padding: 0 3px;
2525
border-radius: 3px;
2626
margin-left: 5px;

‎website/App.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import MarkdownPreview from '@uiw/react-markdown-preview';
33
import GitHubCorners from '@uiw/react-github-corners';
44
import Loader from '@uiw/react-loader';
55
import exts from 'code-example/ext.json';
6+
import '@wcj/dark-mode';
67
import TextareaCodeEditor from '../';
78
import MDStr from '../README.md';
89
import './App.css';
@@ -53,6 +54,7 @@ const App: React.FC = () => {
5354
const version = VERSION;
5455
return (
5556
<div className="App">
57+
<dark-mode dark="Dark" light="Light" style={{ position: 'fixed', top: 8, left: 10 }}></dark-mode>
5658
<GitHubCorners fixed href="https://github.com/uiwjs/react-textarea-code-editor" />
5759
<h1 className="App-title">
5860
React Textarea Code Editor
@@ -66,7 +68,7 @@ const App: React.FC = () => {
6668
minHeight={80}
6769
placeholder={`Please enter ${(language || '').toLocaleUpperCase()} code.`}
6870
style={{
69-
backgroundColor: '#f5f5f5',
71+
backgroundColor: 'var(--color-canvas-subtle)',
7072
fontSize: 14,
7173
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
7274
}}

0 commit comments

Comments
 (0)