Skip to content

Commit 80242dd

Browse files
jaywcjlovejaywcjlove
committed
feat: add dark theme.
1 parent 563cff0 commit 80242dd

File tree

7 files changed

+91
-18
lines changed

7 files changed

+91
-18
lines changed

‎package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
"license": "MIT",
1818
"dependencies": {
1919
"@babel/runtime": "^7.18.9",
20-
"@codemirror/lang-javascript": "^6.0.2",
21-
"@codemirror/lang-json": "^6.0.0",
2220
"@codemirror/lang-css": "^6.0.0",
2321
"@codemirror/lang-html": "^6.1.0",
22+
"@codemirror/lang-javascript": "^6.0.2",
23+
"@codemirror/lang-json": "^6.0.0",
2424
"@codemirror/lang-xml": "^6.0.0",
2525
"@codemirror/legacy-modes": "^6.1.0",
2626
"@rematch/core": "~2.2.0",
@@ -29,13 +29,14 @@
2929
"@uiw/react-github-corners": "^1.5.14",
3030
"@uiw/react-markdown-preview": "^4.0.23",
3131
"@uiw/reset.css": "^1.0.6",
32+
"@wcj/dark-mode": "^1.0.15",
3233
"axios": "^0.27.2",
33-
"rehype-rewrite": "^3.0.6",
34-
"rehype-video": "^1.2.2",
3534
"react": "^18.2.0",
3635
"react-dom": "^18.2.0",
3736
"react-redux": "~7.2.6",
3837
"react-router-dom": "^6.3.0",
38+
"rehype-rewrite": "^3.0.6",
39+
"rehype-video": "^1.2.2",
3940
"uiw": "^4.21.14"
4041
},
4142
"engines": {
@@ -50,9 +51,9 @@
5051
"@types/react-dom": "^18.0.6",
5152
"@types/react-redux": "^7.1.24",
5253
"husky": "^8.0.1",
54+
"kkt": "^7.2.0",
5355
"lint-staged": "^13.0.3",
54-
"prettier": "^2.7.1",
55-
"kkt": "^7.2.0"
56+
"prettier": "^2.7.1"
5657
},
5758
"eslintConfig": {
5859
"extends": [

‎src/index.css‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,38 @@ body {
22
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
33
}
44

5+
[data-color-mode*='dark'],
6+
[data-color-mode*='dark'] body {
7+
--color-fg-default: #c9d1d9;
8+
--color-fg-muted: #8b949e;
9+
--color-fg-subtle: #484f58;
10+
--color-canvas-default: #0d1117;
11+
--color-canvas-subtle: #161b22;
12+
--color-border-default: #30363d;
13+
--color-border-muted: #21262d;
14+
--color-neutral-muted: rgba(110, 118, 129, 0.4);
15+
--color-accent-fg: #58a6ff;
16+
--color-accent-emphasis: #1f6feb;
17+
--color-attention-subtle: rgba(187, 128, 9, 0.15);
18+
--color-danger-fg: #f85149;
19+
}
20+
[data-color-mode*='light'],
21+
[data-color-mode*='light'] body {
22+
--color-fg-default: #24292f;
23+
--color-fg-muted: #57606a;
24+
--color-fg-subtle: #6e7781;
25+
--color-canvas-default: #ffffff;
26+
--color-canvas-subtle: #f6f8fa;
27+
--color-border-default: #d0d7de;
28+
--color-border-muted: hsla(210, 18%, 87%, 1);
29+
--color-neutral-muted: rgba(175, 184, 193, 0.2);
30+
--color-accent-fg: #0969da;
31+
--color-accent-emphasis: #0969da;
32+
--color-attention-subtle: #fff8c5;
33+
--color-danger-fg: #cf222e;
34+
}
35+
536
#root, body, html {
637
height: 100%;
738
background-color: #343a40;
8-
}
39+
}

‎src/pages/Preview/Content.module.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.code {
22
min-height: 100%;
33
> pre {
4-
background-color: #f1f2f5;
54
min-height: 100%;
65
display: inline-block;
76
}

‎src/pages/Preview/Content.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { useMemo, Fragment } from 'react';
1+
import { useMemo, useEffect, useState, Fragment } from 'react';
22
import { useSelector } from 'react-redux';
33
import Loader from '@uiw/react-loader';
44
import MarkdownPreview from '@uiw/react-markdown-preview';
55
import rehypeVideo from 'rehype-video';
6-
import CodeMirror from '@uiw/react-codemirror';
6+
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
77
import { Extension } from '@codemirror/state';
88
import { StreamLanguage } from '@codemirror/language';
99
import { stylus } from '@codemirror/legacy-modes/mode/stylus';
@@ -41,6 +41,14 @@ const langs: Record<string, any> = {
4141
};
4242

4343
export default function DirectoryTrees() {
44+
const dark = document.documentElement.getAttribute('data-color-mode');
45+
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
46+
useEffect(() => {
47+
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
48+
document.addEventListener('colorschemechange', (e) => {
49+
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
50+
});
51+
}, []);
4452
const { loading, content, extname } = useSelector(({ global, loading }: RootState) => ({
4553
loading: loading.effects.global.getFileContent,
4654
content: global.content,
@@ -85,10 +93,11 @@ export default function DirectoryTrees() {
8593
if (langs[extname]) {
8694
extensions.push(langs[extname]());
8795
}
88-
return <CodeMirror extensions={[...extensions]} editable={false} height="100%" value={content} />;
96+
return <CodeMirror theme={theme} extensions={[...extensions]} editable={false} height="100%" value={content} />;
8997
}
9098
return <pre style={{ padding: 25 }}>{content}</pre>;
91-
}, [extname, content, filePath]);
99+
}, [extname, content, filePath, theme]);
100+
92101

93102
return (
94103
<Fragment>

‎src/pages/Preview/icons/json.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/pages/Preview/index.module.less‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
}
66

77
.header {
8-
background-color: #343a40;
8+
background-color: var(--color-canvas-subtle);
99
padding: 0 16px;
1010
display: flex;
1111
align-items: center;
12+
border-bottom: 1px solid var(--color-border-default);
13+
dark-mode {
14+
color: initial;
15+
}
1216
> a {
1317
display: flex;
14-
color: #989898;
18+
color: var(--color-theme-text);
1519
&.github {
1620
margin-right: 10px;
1721
margin-left: 10px;
@@ -24,10 +28,37 @@
2428
}
2529
}
2630
> span {
27-
color: #989898;
31+
color: var(--color-fg-default);
2832
}
2933
> div:global(.w-divider) {
30-
background-color: #737373;
34+
background-color: var(--color-fg-subtle);
3135
margin-top: 2px;
3236
}
3337
}
38+
39+
:global(.w-layout) {
40+
background-color: var(--color-canvas-subtle);
41+
}
42+
43+
:global(.w-menu:not(.w-menu-dark)) {
44+
background-color: transparent;
45+
color: var(--color-fg-default);
46+
a {
47+
color: var(--color-fg-default);
48+
49+
}
50+
}
51+
52+
:global(.w-split-horizontal > .w-split-bar::before),
53+
54+
:global(.w-split-horizontal > .w-split-bar::after) {
55+
box-shadow: inset 0 1px 0 0 var(--color-fg-default), 0 1px 0 0 var(--color-fg-default);
56+
}
57+
58+
:global(.w-split-bar) {
59+
background-color: var(--color-fg-subtle);
60+
}
61+
62+
:global(.w-split-horizontal > .w-split-bar) {
63+
box-shadow: inset 1px 0 0 0 var(--color-border-default), 1px 0 0 0 var(--color-border-default);
64+
}

‎src/pages/Preview/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Layout from '@uiw/react-layout';
55
import Button from '@uiw/react-button';
66
import Split from '@uiw/react-split';
77
import Modal from '@uiw/react-modal';
8+
import '@wcj/dark-mode';
89
import Search from '../../components/Search';
910
import { PackageJSON } from '../../models/global';
1011
import { RootState, Dispatch } from '../../models';
@@ -75,6 +76,7 @@ export default function Preview() {
7576
return (
7677
<Layout>
7778
<Header className={styles.header}>
79+
<dark-mode style={{ fontSize: 21 }} permanent></dark-mode>
7880
<Modal
7981
title="Select package"
8082
isOpen={showSearch}
@@ -144,7 +146,7 @@ export default function Preview() {
144146
</Header>
145147
<Layout className={styles.warpper}>
146148
<Split className={styles.warpper} style={{ height: 100 }}>
147-
<div style={{ minWidth: 210, width: 210, overflow: 'auto', backgroundColor: '#fff' }}>
149+
<div style={{ minWidth: 210, width: 210, overflow: 'auto' }}>
148150
<DirectoryTrees />
149151
</div>
150152
<Content style={{ minWidth: 100, flex: 1, overflow: 'auto', position: 'relative' }}>

0 commit comments

Comments
 (0)