Skip to content

Commit a8f4fc0

Browse files
ehenomaehenoma
committed
Add themes
1 parent d18984c commit a8f4fc0

21 files changed

Lines changed: 13907 additions & 12495 deletions

‎website/.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2-
2+
public/theme/
33
# dependencies
44
/node_modules
55
/.pnp

‎website/package-lock.json‎

Lines changed: 959 additions & 48 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"prosemirror-utils": "^1.0.0-0",
1919
"react": "^17.0.2",
2020
"react-beautiful-dnd": "^13.1.0",
21+
"react-css-theme-switcher": "^0.3.0",
2122
"react-dom": "^17.0.2",
2223
"react-i18next": "^11.11.4",
2324
"react-redux": "^7.2.5",
@@ -37,14 +38,16 @@
3738
"@types/react": "^17.0.19",
3839
"@types/react-dom": "^17.0.9",
3940
"@types/styled-components": "^5.1.12",
40-
"lessc": "^1.0.2"
41+
"less": "^4.1.1"
4142
},
4243
"scripts": {
4344
"start": "react-scripts start",
4445
"build": "react-scripts build",
4546
"test": "react-scripts test",
4647
"eject": "react-scripts eject",
47-
"build-theme": "lessc src/antd.less src/antd.css --js"
48+
"build-theme": "npm run build-light-theme && npm run build-dark-theme",
49+
"build-light-theme": "lessc src/theme/light.less public/theme/light.css -js",
50+
"build-dark-theme": "lessc src/theme/dark.less public/theme/dark.css -js"
4851
},
4952
"eslintConfig": {
5053
"extends": [

‎website/src/App.css‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎website/src/App.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react'
2-
import './antd.css'
32
import {Button, Layout, Menu, Space} from 'antd'
43
import {Content, Header} from 'antd/lib/layout/layout'
54
import * as icons from '@ant-design/icons'
65
import styled from 'styled-components'
7-
import Sheet from "./sheet/snippet/Sheet";
6+
import Sheet from "./sheet/Sheet";
87
import {useTranslation} from 'react-i18next'
8+
import {useThemeToggle} from './theme/ThemeContext'
9+
import themed from './theme/themed'
910

1011
const Logo = styled.span`
1112
span:first-child {
@@ -22,22 +23,37 @@ const Logo = styled.span`
2223
`
2324

2425
const StyledHeader = styled(Header)`
25-
box-shadow: 0 5px 5px 0 rgb(230 230 230 / 90%);
26-
26+
box-shadow: ${themed('header.shadow')};
27+
background: ${themed('header.background')} !important;
28+
ul {
29+
background: none;
30+
}
2731
.ant-menu-horizontal {
2832
border-bottom: none;
2933
}
3034
`
3135

3236
export default function App() {
3337
const {t} = useTranslation()
38+
const toggleTheme = useThemeToggle()
3439
return (
3540
<Layout>
36-
<StyledHeader style={{background: '#fff'}} className="header">
37-
<Menu theme="light" style={{marginRight: 'auto'}} mode="horizontal" defaultSelectedKeys={['2']}>
41+
<StyledHeader className="header">
42+
<Menu style={{marginRight: 'auto'}} mode="horizontal" defaultSelectedKeys={['2']}>
3843
<Logo><span>Java</span><span>Sheets</span></Logo>
3944
<Space style={{marginLeft: 'auto'}} size="middle">
40-
<Button type="primary" ghost icon={<icons.ShareAltOutlined/>}>{t('menu.share')}</Button>
45+
<Button
46+
type="primary"
47+
ghost
48+
icon={<icons.ShareAltOutlined/>}>
49+
{t('menu.share')}
50+
</Button>
51+
<Button
52+
type="primary"
53+
shape="round"
54+
icon={<icons.BulbOutlined/>}
55+
onClick={toggleTheme}
56+
/>
4157
</Space>
4258
</Menu>
4359
</StyledHeader>

‎website/src/editor/Editor.tsx‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, {useEffect} from 'react'
22
import {EditorView} from '@codemirror/view'
3-
import {EditorState} from '@codemirror/state'
3+
import {EditorState, Transaction} from '@codemirror/state'
44
import {basicSetup} from '@codemirror/basic-setup'
5-
import {javaLanguage} from '@codemirror/lang-java'
65
import {tags, HighlightStyle} from '@codemirror/highlight'
76

87
export interface EditorProperties {
@@ -36,8 +35,37 @@ const theme = EditorView.theme({
3635
color: "#ddd",
3736
border: "none"
3837
},
38+
3939
}, {dark: false})
4040

41+
const darkTheme = EditorView.theme({
42+
".cm-scroller": {
43+
fontFamily: `'JetBrains Mono', Menlo, Monaco, source-code-pro, Consolas, monospace`
44+
},
45+
"&": {
46+
color: "#f6f8fa",
47+
backgroundColor: "#24292e",
48+
padding: "10px 0"
49+
},
50+
".cm-activeLineGutter, .cm-activeLine": {
51+
backgroundColor: "#24292e"
52+
},
53+
".cm-content": {
54+
caretColor: "#24292e"
55+
},
56+
"&.cm-focused .cm-cursor": {
57+
borderLeftColor: "#24292e"
58+
},
59+
"&.cm-focused .cm-selectionBackground, ::selection": {
60+
backgroundColor: "#24292e"
61+
},
62+
".cm-gutters": {
63+
backgroundColor: "#24292e",
64+
color: "#24292e",
65+
border: "none"
66+
},
67+
}, {dark: true})
68+
4169
const githubHighlighting = HighlightStyle.define([
4270
{tag: tags.function, color: '#6f42c1'},
4371
{tag: tags.className, color: '#6f42c1'},
@@ -54,6 +82,21 @@ const githubHighlighting = HighlightStyle.define([
5482
{tag: tags.comment, color: '#6a737d'}
5583
])
5684

85+
const githubDarkHighlighting = HighlightStyle.define([
86+
{tag: tags.function, color: '#dcbdfb'},
87+
{tag: tags.className, color: '#dcbdfb'},
88+
{tag: tags.keyword, color: '#f47067'},
89+
{tag: tags.definitionKeyword, color: '#f47067'},
90+
{tag: tags.controlKeyword, color: '#f47067'},
91+
{tag: tags.operatorKeyword, color: '#f47067'},
92+
{tag: tags.function(tags.variableName), color: "#f69d50"},
93+
{tag: tags.constant, color: '#6cb6ff'},
94+
{tag: tags.operator, color: '#f47067'},
95+
{tag: tags.number, color: '#6cb6ff'},
96+
{tag: tags.string, color: '#96d0ff'},
97+
{tag: tags.comment, color: '#768390'}
98+
])
99+
57100
export default function Editor(properties: EditorProperties) {
58101
const element = React.createRef<HTMLDivElement>()
59102
const editor = React.useRef<{editor: EditorView | undefined}>({editor: undefined})
@@ -64,7 +107,7 @@ export default function Editor(properties: EditorProperties) {
64107
const created = new EditorView({
65108
state: EditorState.create({
66109
doc: properties.code,
67-
extensions: [theme, basicSetup, javaLanguage, githubHighlighting]
110+
extensions: [darkTheme, basicSetup, javaLanguage, githubDarkHighlighting]
68111
}),
69112
parent: element.current!,
70113
})

‎website/src/index.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,24 @@ import {Provider} from 'react-redux'
77
import store from './store'
88
import {I18nextProvider} from 'react-i18next'
99
import i18n from './i18n'
10+
import ThemeProvider, {installThemes} from './theme/ThemeContext'
1011

11-
ReactDOM.render(
12-
<React.StrictMode>
13-
<Provider store={store}>
14-
<React.Suspense fallback={<></>}>
15-
<I18nextProvider i18n={i18n}>
16-
<App />
17-
</I18nextProvider>
18-
</React.Suspense>
19-
</Provider>
20-
</React.StrictMode>,
21-
document.getElementById('root')
22-
);
12+
installThemes().then(() => {
13+
ReactDOM.render(
14+
<React.StrictMode>
15+
<Provider store={store}>
16+
<React.Suspense fallback={<></>}>
17+
<I18nextProvider i18n={i18n}>
18+
<ThemeProvider>
19+
<App/>
20+
</ThemeProvider>
21+
</I18nextProvider>
22+
</React.Suspense>
23+
</Provider>
24+
</React.StrictMode>,
25+
document.getElementById('root')
26+
);
27+
})
2328

2429
// If you want to start measuring performance in your app, pass a function
2530
// to log results (for example: reportWebVitals(console.log))

website/src/sheet/snippet/Sheet.style.ts renamed to website/src/sheet/Sheet.style.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import styled from 'styled-components'
22
import {Button} from 'antd'
33

4-
export const SnippetContainer = styled.div`
5-
6-
`
4+
export const SnippetContainer = styled.div``
75

86
export const Sheet = styled.div`
97
${SnippetContainer} {

website/src/sheet/snippet/Sheet.tsx renamed to website/src/sheet/Sheet.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as Styled from './Sheet.style'
2-
import Snippet from './Snippet'
2+
import Snippet from './snippet/Snippet'
33
import {useSheet} from './useSheet'
44
import React, {useMemo} from 'react'
55
import * as icons from '@ant-design/icons'
@@ -11,8 +11,8 @@ import {
1111
DropResult
1212
} from 'react-beautiful-dnd'
1313
import {useDispatch} from 'react-redux'
14-
import {SheetSnippet} from "../index";
15-
import {reorderSnippet} from "../state";
14+
import {SheetSnippet} from "./index";
15+
import {reorderSnippet} from "./state";
1616

1717
const MemoizedSnippet = React.memo(Snippet)
1818

‎website/src/sheet/snippet/Snippet.style.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import styled from 'styled-components'
2+
import themed from '../../theme/themed'
23

34
export const Card = styled.div`
45
max-width: 1000px;
56
margin: 50px auto 0 auto;
67
overflow: hidden;
7-
box-shadow: 0 3px 5px 0 rgb(200 200 200 / 30%);
8+
box-shadow: ${themed('snippet.card.shadow')};
89
border: none;
910
border-radius: 3px;
10-
background: white;
11+
background: ${themed('background')};
1112
&:first-child {
1213
margin-top: 0;
1314
}
@@ -16,7 +17,7 @@ export const Card = styled.div`
1617
export const CardHead = styled.div`
1718
padding: 0 15px;
1819
height: 70px;
19-
box-shadow: inset 0 -1px 0 0 #eeeeee !important;
20+
box-shadow: ${themed('snippet.card.head.shadow')} !important;
2021
display: flex;
2122
`
2223

0 commit comments

Comments
 (0)