Skip to content

Commit 3de68f4

Browse files
jaywcjlovejaywcjlove
committed
website: update website theme.
1 parent 48dbe9c commit 3de68f4

File tree

13 files changed

+39
-110
lines changed

13 files changed

+39
-110
lines changed

‎www/src/pages/extensions/basic-setup/index.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { FC, PropsWithChildren, useEffect, useState } from 'react';
1+
import { FC, PropsWithChildren, useState } from 'react';
22
import MarkdownPreview from '@uiw/react-markdown-preview';
3-
import CodeMirror, { ReactCodeMirrorProps, BasicSetupOptions } from '@uiw/react-codemirror';
3+
import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
44
import data from '@uiw/codemirror-extensions-basic-setup/README.md';
55
import { langs } from '@uiw/codemirror-extensions-langs';
66
import styled from 'styled-components';
7+
import { useTheme } from '../../../utils/useTheme';
78
import { PageWarpper } from '../';
89

910
const Label = styled.label`
@@ -27,15 +28,7 @@ const Warpper = styled.div`
2728
`;
2829

2930
export const BasicSetupDoc = () => {
30-
const dark = document.documentElement.getAttribute('data-color-mode');
31-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
32-
useEffect(() => {
33-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
34-
document.addEventListener('colorschemechange', (e) => {
35-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
36-
});
37-
}, []);
38-
31+
const { theme } = useTheme();
3932
const [basicSetup, setBasicSetup] = useState<BasicSetupOptions>({});
4033
return (
4134
<PageWarpper>

‎www/src/pages/extensions/classname/ClassNameDemo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { EditorView } from '@codemirror/view';
66
import { useTheme } from '../../../utils/useTheme';
77

88
export const ClassNameDemo = () => {
9-
const theme = useTheme();
9+
const { theme } = useTheme();
1010

1111
const themeDemo = EditorView.baseTheme({
1212
'&dark .first-line': { backgroundColor: 'red' },

‎www/src/pages/extensions/color/index.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,16 @@ import MarkdownPreview from '@uiw/react-markdown-preview';
22
import data from '@uiw/codemirror-extensions-color/README.md';
33
import { color } from '@uiw/codemirror-extensions-color';
44
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
5-
import { useEffect, useState } from 'react';
5+
import { useState } from 'react';
66
import { langs } from '@uiw/codemirror-extensions-langs';
7+
import { useTheme } from '../../../utils/useTheme';
78
import { codeSample } from './code';
89
import { PageWarpper } from '../';
910

1011
export const ColorDoc = () => {
1112
const [modeType, setModeType] = useState<'readOnly' | 'editable'>('readOnly');
1213
const [readOnly, setReadOnly] = useState(false);
13-
const dark = document.documentElement.getAttribute('data-color-mode');
14-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
15-
useEffect(() => {
16-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
17-
document.addEventListener('colorschemechange', (e) => {
18-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
19-
});
20-
}, []);
14+
const { theme } = useTheme();
2115
const porps: ReactCodeMirrorProps = {};
2216
if (modeType === 'editable') {
2317
porps.editable = readOnly;

‎www/src/pages/extensions/events/index.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import MarkdownPreview from '@uiw/react-markdown-preview';
22
import data from '@uiw/codemirror-extensions-events/README.md';
33
import * as events from '@uiw/codemirror-extensions-events';
4-
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
4+
import CodeMirror from '@uiw/react-codemirror';
55
import styled from 'styled-components';
6-
import { useEffect, useState } from 'react';
6+
import { useState } from 'react';
77
import { langs } from '@uiw/codemirror-extensions-langs';
8+
import { useTheme } from '../../../utils/useTheme';
89
import { PageWarpper } from '../';
910

1011
const Info = styled.div`
@@ -14,14 +15,7 @@ const Info = styled.div`
1415
export const EventsDoc = () => {
1516
const [scrollTop, setScrollTop] = useState(0);
1617
const [eventType, setEventType] = useState('');
17-
const dark = document.documentElement.getAttribute('data-color-mode');
18-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
19-
useEffect(() => {
20-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
21-
document.addEventListener('colorschemechange', (e) => {
22-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
23-
});
24-
}, []);
18+
const { theme } = useTheme();
2519

2620
return (
2721
<PageWarpper>

‎www/src/pages/extensions/hyper-link/index.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
11
import MarkdownPreview from '@uiw/react-markdown-preview';
22
import data from '@uiw/codemirror-extensions-hyper-link/README.md';
33
import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
4-
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
5-
import { useEffect, useState } from 'react';
4+
import CodeMirror from '@uiw/react-codemirror';
65
import { langs } from '@uiw/codemirror-extensions-langs';
6+
import { useTheme } from '../../../utils/useTheme';
77
import { markdownString } from './codeSample';
88
import { PageWarpper } from '../';
99

1010
export const HyperLinkDoc = () => {
11-
const dark = document.documentElement.getAttribute('data-color-mode');
12-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
13-
useEffect(() => {
14-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
15-
document.addEventListener('colorschemechange', (e) => {
16-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
17-
});
18-
}, []);
11+
const { theme } = useTheme();
1912

2013
return (
2114
<PageWarpper>

‎www/src/pages/extensions/langs/index.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
11
import MarkdownPreview from '@uiw/react-markdown-preview';
22
import data from '@uiw/codemirror-extensions-langs/README.md';
33
import { langNames, LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
4-
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
4+
import CodeMirror from '@uiw/react-codemirror';
55
import { useEffect, useState } from 'react';
6-
import { PageWarpper } from '../';
76
import styled from 'styled-components';
7+
import { useTheme } from '../../../utils/useTheme';
8+
import { PageWarpper } from '../';
89

910
const Toolbar = styled.div`
1011
padding-bottom: 32px;
1112
`;
1213

1314
export const LangsDoc = () => {
14-
const dark = document.documentElement.getAttribute('data-color-mode');
15-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
16-
useEffect(() => {
17-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
18-
document.addEventListener('colorschemechange', (e) => {
19-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
20-
});
21-
}, []);
15+
const { theme } = useTheme();
2216

2317
const [language, setLanguage] = useState<LanguageName>('markdown');
2418
const [source, setSource] = useState<string>(data.source);

‎www/src/pages/extensions/line-numbers-relative/index.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,13 @@
11
import MarkdownPreview from '@uiw/react-markdown-preview';
22
import data from '@uiw/codemirror-extensions-line-numbers-relative/README.md';
33
import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
4-
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
5-
import { useEffect, useState } from 'react';
4+
import CodeMirror from '@uiw/react-codemirror';
65
import { langs } from '@uiw/codemirror-extensions-langs';
6+
import { useTheme } from '../../../utils/useTheme';
77
import { PageWarpper } from '../';
88

99
export const LineNumbersRelativeDoc = () => {
10-
const dark = document.documentElement.getAttribute('data-color-mode');
11-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
12-
useEffect(() => {
13-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
14-
document.addEventListener('colorschemechange', (e) => {
15-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
16-
});
17-
}, []);
10+
const { theme } = useTheme();
1811

1912
return (
2013
<PageWarpper>

‎www/src/pages/extensions/mentions/index.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import MarkdownPreview from '@uiw/react-markdown-preview';
22
import data from '@uiw/codemirror-extensions-mentions/README.md';
33
import { mentions } from '@uiw/codemirror-extensions-mentions';
4-
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
5-
import { useEffect, useState } from 'react';
4+
import CodeMirror from '@uiw/react-codemirror';
65
import { langs } from '@uiw/codemirror-extensions-langs';
6+
import { useTheme } from '../../../utils/useTheme';
77
import { PageWarpper } from '../';
88

99
const users = [
@@ -52,14 +52,7 @@ const users = [
5252
];
5353

5454
export const MentionsDoc = () => {
55-
const dark = document.documentElement.getAttribute('data-color-mode');
56-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
57-
useEffect(() => {
58-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
59-
document.addEventListener('colorschemechange', (e) => {
60-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
61-
});
62-
}, []);
55+
const { theme } = useTheme();
6356

6457
return (
6558
<PageWarpper>

‎www/src/pages/extensions/themes/index.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,26 @@
11
import MarkdownPreview from '@uiw/react-markdown-preview';
22
import data from '@uiw/codemirror-themes-all/README.md';
33
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
4-
import { useEffect, useState } from 'react';
4+
import { useState } from 'react';
55
import * as themes from '@uiw/codemirror-themes-all';
66
import { langs } from '@uiw/codemirror-extensions-langs';
7-
import { PageWarpper } from '../';
87
import styled from 'styled-components';
8+
import { useTheme } from '../../../utils/useTheme';
9+
import { PageWarpper } from '../';
910

1011
const ToolsWapper = styled.div`
1112
padding: 0 0 23px 0;
1213
`;
1314

1415
export const ThemesAllDoc = () => {
15-
const dark = document.documentElement.getAttribute('data-color-mode');
1616
const themesData: Record<string, Omit<ReactCodeMirrorProps['theme'], 'dark' | 'light'>> = {};
1717
Object.keys(themes)
1818
.filter((item) => typeof themes[item as keyof typeof themes] !== 'function')
1919
.forEach((item) => {
2020
themesData[item] = themes[item as keyof typeof themes];
2121
});
2222
const [selectTheme, setSelectTheme] = useState<keyof typeof themesData>();
23-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
24-
useEffect(() => {
25-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
26-
document.addEventListener('colorschemechange', (e) => {
27-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
28-
});
29-
}, []);
23+
const theme = useTheme();
3024
const themeCurrent = themesData[selectTheme!] ? themesData[selectTheme!] : theme;
3125
const changeHandle = (ev: React.ChangeEvent<HTMLSelectElement>) => {
3226
setSelectTheme(ev.target.value as keyof typeof themesData);

‎www/src/pages/extensions/zebra-stripes/LineNumberDemo.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
11
import data from '@uiw/codemirror-extensions-zebra-stripes/README.md';
22
import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';
3-
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
4-
import { useEffect, useState } from 'react';
3+
import CodeMirror from '@uiw/react-codemirror';
54
import { langs } from '@uiw/codemirror-extensions-langs';
5+
import { useTheme } from '../../../utils/useTheme';
66

77
export const LineNumberDemo = () => {
8-
const dark = document.documentElement.getAttribute('data-color-mode');
9-
const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
10-
useEffect(() => {
11-
setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
12-
document.addEventListener('colorschemechange', (e) => {
13-
setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
14-
});
15-
}, []);
8+
const { theme } = useTheme();
169

1710
return (
1811
<CodeMirror

0 commit comments

Comments
 (0)