Skip to content

Commit 654ac3d

Browse files
luckfuncluckfunc
committed
feat(formatter): hardcode Vitesse theme
1 parent 6ffad94 commit 654ac3d

5 files changed

Lines changed: 195 additions & 43 deletions

File tree

‎src/assets/preview.png‎

-21.5 KB
Loading

‎src/components/json-formatter/index.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import { useState, useCallback, useMemo } from 'react';
2-
import Editor from '@monaco-editor/react';
3-
import { DEFAULT_JSON } from '@constants';
2+
import Editor, { type BeforeMount } from '@monaco-editor/react';
3+
import {
4+
DEFAULT_JSON,
5+
VITESSE_DARK_MONACO_THEME,
6+
VITESSE_DARK_THEME,
7+
VITESSE_LIGHT_MONACO_THEME,
8+
VITESSE_LIGHT_THEME,
9+
} from '@constants';
410
import { validateJson } from '@utils';
511
import './style.less';
612

@@ -102,7 +108,13 @@ export default function JsonFormatter({ isDarkMode, onThemeChange }: JsonFormatt
102108
onThemeChange(!isDarkMode);
103109
}, [isDarkMode, onThemeChange]);
104110

111+
const registerEditorThemes = useCallback<BeforeMount>((monaco) => {
112+
monaco.editor.defineTheme(VITESSE_DARK_THEME, VITESSE_DARK_MONACO_THEME);
113+
monaco.editor.defineTheme(VITESSE_LIGHT_THEME, VITESSE_LIGHT_MONACO_THEME);
114+
}, []);
115+
105116
const themeClass = isDarkMode ? 'dark' : 'light';
117+
const editorTheme = isDarkMode ? VITESSE_DARK_THEME : VITESSE_LIGHT_THEME;
106118
const validationError =
107119
jsonValidation.status === 'invalid' ? `Invalid JSON: ${jsonValidation.message}` : '';
108120
const activeError = error || validationError;
@@ -164,7 +176,8 @@ export default function JsonFormatter({ isDarkMode, onThemeChange }: JsonFormatt
164176
defaultLanguage="json"
165177
value={jsonText}
166178
onChange={handleInputChange}
167-
theme={isDarkMode ? 'vs-dark' : 'vs'}
179+
beforeMount={registerEditorThemes}
180+
theme={editorTheme}
168181
options={{
169182
contextmenu: false,
170183
minimap: { enabled: false },

‎src/components/json-formatter/style.less‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -74,24 +74,24 @@
7474
}
7575

7676
&.primary {
77-
background: #238636;
78-
border-color: #238636;
79-
color: white;
77+
background: @dark-primary;
78+
border-color: @dark-primary;
79+
color: @dark-bg;
8080

8181
&:hover:not(:disabled) {
82-
background: #2ea043;
83-
border-color: #2ea043;
82+
background: @dark-primary-hover;
83+
border-color: @dark-primary-hover;
8484
}
8585
}
8686

8787
&.danger {
8888
background: @dark-error-border;
8989
border-color: @dark-error-border;
90-
color: white;
90+
color: @dark-bg;
9191

9292
&:hover:not(:disabled) {
93-
background: @dark-error;
94-
border-color: @dark-error;
93+
background: @dark-error-hover;
94+
border-color: @dark-error-hover;
9595
}
9696
}
9797
}
@@ -107,13 +107,13 @@
107107
}
108108

109109
&.primary {
110-
background: #1f883d;
111-
border-color: #1f883d;
110+
background: @light-primary;
111+
border-color: @light-primary;
112112
color: white;
113113

114114
&:hover:not(:disabled) {
115-
background: #1a7f37;
116-
border-color: #1a7f37;
115+
background: @light-primary-hover;
116+
border-color: @light-primary-hover;
117117
}
118118
}
119119

@@ -123,8 +123,8 @@
123123
color: white;
124124

125125
&:hover:not(:disabled) {
126-
background: #a40e26;
127-
border-color: #a40e26;
126+
background: @light-error-hover;
127+
border-color: @light-error-hover;
128128
}
129129
}
130130
}

‎src/constants/index.ts‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,138 @@
1+
import type { editor } from 'monaco-editor';
2+
3+
export const VITESSE_DARK_THEME = 'vitesse-dark';
4+
export const VITESSE_LIGHT_THEME = 'vitesse-light';
5+
6+
export const VITESSE_DARK_MONACO_THEME: editor.IStandaloneThemeData = {
7+
base: 'vs-dark',
8+
inherit: true,
9+
colors: {
10+
'editor.background': '#121212',
11+
'editor.foreground': '#dbd7caee',
12+
'editor.lineHighlightBackground': '#181818',
13+
'editor.selectionBackground': '#eeeeee18',
14+
'editor.selectionHighlightBackground': '#eeeeee10',
15+
'editor.inactiveSelectionBackground': '#eeeeee10',
16+
'editor.findMatchBackground': '#e6cc7722',
17+
'editor.findMatchHighlightBackground': '#e6cc7744',
18+
'editor.wordHighlightBackground': '#1c6b4805',
19+
'editor.wordHighlightStrongBackground': '#1c6b4810',
20+
'editorCursor.foreground': '#dbd7caee',
21+
'editorLineNumber.foreground': '#dedcd550',
22+
'editorLineNumber.activeForeground': '#bfbaaa',
23+
'editorGutter.background': '#121212',
24+
'editorIndentGuide.background': '#ffffff15',
25+
'editorIndentGuide.activeBackground': '#ffffff30',
26+
'editorWhitespace.foreground': '#ffffff15',
27+
'editorError.foreground': '#cb7676',
28+
'editorWarning.foreground': '#d4976c',
29+
'editorInfo.foreground': '#6394bf',
30+
'editorHint.foreground': '#4d9375',
31+
'editorWidget.background': '#121212',
32+
'editorWidget.foreground': '#dbd7caee',
33+
'editorHoverWidget.background': '#181818',
34+
'editorHoverWidget.foreground': '#dbd7caee',
35+
'editorHoverWidget.border': '#191919',
36+
'editorSuggestWidget.background': '#121212',
37+
'editorSuggestWidget.foreground': '#dbd7caee',
38+
'editorSuggestWidget.selectedBackground': '#181818',
39+
'editorSuggestWidget.highlightForeground': '#4d9375',
40+
'editorBracketMatch.background': '#4d937520',
41+
'editorBracketHighlight.foreground1': '#5eaab5',
42+
'editorBracketHighlight.foreground2': '#4d9375',
43+
'editorBracketHighlight.foreground3': '#d4976c',
44+
'editorBracketHighlight.foreground4': '#d9739f',
45+
'editorBracketHighlight.foreground5': '#e6cc77',
46+
'editorBracketHighlight.foreground6': '#6394bf',
47+
'scrollbar.shadow': '#00000000',
48+
'scrollbarSlider.background': '#dedcd510',
49+
'scrollbarSlider.hoverBackground': '#dedcd550',
50+
'scrollbarSlider.activeBackground': '#dedcd550',
51+
},
52+
rules: [
53+
{ token: '', foreground: 'dbd7ca' },
54+
{ token: 'comment', foreground: '758575', fontStyle: 'italic' },
55+
{ token: 'comment.block.json', foreground: '758575', fontStyle: 'italic' },
56+
{ token: 'comment.line.json', foreground: '758575', fontStyle: 'italic' },
57+
{ token: 'delimiter.bracket.json', foreground: '666666' },
58+
{ token: 'delimiter.array.json', foreground: '666666' },
59+
{ token: 'delimiter.colon.json', foreground: '666666' },
60+
{ token: 'delimiter.comma.json', foreground: '666666' },
61+
{ token: 'keyword.json', foreground: '4d9375' },
62+
{ token: 'number.json', foreground: '4C9A91' },
63+
{ token: 'string.key.json', foreground: 'b8a965' },
64+
{ token: 'string.value.json', foreground: 'c98a7d' },
65+
{ token: 'string', foreground: 'c98a7d' },
66+
{ token: 'number', foreground: '4C9A91' },
67+
{ token: 'keyword', foreground: '4d9375' },
68+
],
69+
};
70+
71+
export const VITESSE_LIGHT_MONACO_THEME: editor.IStandaloneThemeData = {
72+
base: 'vs',
73+
inherit: true,
74+
colors: {
75+
'editor.background': '#ffffff',
76+
'editor.foreground': '#393a34',
77+
'editor.lineHighlightBackground': '#f7f7f7',
78+
'editor.selectionBackground': '#22222218',
79+
'editor.selectionHighlightBackground': '#22222210',
80+
'editor.inactiveSelectionBackground': '#22222210',
81+
'editor.findMatchBackground': '#e6cc7744',
82+
'editor.findMatchHighlightBackground': '#e6cc7766',
83+
'editor.wordHighlightBackground': '#1c6b4805',
84+
'editor.wordHighlightStrongBackground': '#1c6b4810',
85+
'editorCursor.foreground': '#393a34',
86+
'editorLineNumber.foreground': '#393a3450',
87+
'editorLineNumber.activeForeground': '#4e4f47',
88+
'editorGutter.background': '#ffffff',
89+
'editorIndentGuide.background': '#00000015',
90+
'editorIndentGuide.activeBackground': '#00000030',
91+
'editorWhitespace.foreground': '#00000015',
92+
'editorError.foreground': '#ab5959',
93+
'editorWarning.foreground': '#a65e2b',
94+
'editorInfo.foreground': '#296aa3',
95+
'editorHint.foreground': '#1e754f',
96+
'editorWidget.background': '#ffffff',
97+
'editorWidget.foreground': '#393a34',
98+
'editorHoverWidget.background': '#f7f7f7',
99+
'editorHoverWidget.foreground': '#393a34',
100+
'editorHoverWidget.border': '#f0f0f0',
101+
'editorSuggestWidget.background': '#ffffff',
102+
'editorSuggestWidget.foreground': '#393a34',
103+
'editorSuggestWidget.selectedBackground': '#f7f7f7',
104+
'editorSuggestWidget.highlightForeground': '#1c6b48',
105+
'editorBracketMatch.background': '#1c6b4820',
106+
'editorBracketHighlight.foreground1': '#2993a3',
107+
'editorBracketHighlight.foreground2': '#1e754f',
108+
'editorBracketHighlight.foreground3': '#a65e2b',
109+
'editorBracketHighlight.foreground4': '#a13865',
110+
'editorBracketHighlight.foreground5': '#bda437',
111+
'editorBracketHighlight.foreground6': '#296aa3',
112+
'scrollbar.shadow': '#6a737d33',
113+
'scrollbarSlider.background': '#393a3410',
114+
'scrollbarSlider.hoverBackground': '#393a3450',
115+
'scrollbarSlider.activeBackground': '#393a3450',
116+
},
117+
rules: [
118+
{ token: '', foreground: '393a34' },
119+
{ token: 'comment', foreground: 'a0ada0', fontStyle: 'italic' },
120+
{ token: 'comment.block.json', foreground: 'a0ada0', fontStyle: 'italic' },
121+
{ token: 'comment.line.json', foreground: 'a0ada0', fontStyle: 'italic' },
122+
{ token: 'delimiter.bracket.json', foreground: '999999' },
123+
{ token: 'delimiter.array.json', foreground: '999999' },
124+
{ token: 'delimiter.colon.json', foreground: '999999' },
125+
{ token: 'delimiter.comma.json', foreground: '999999' },
126+
{ token: 'keyword.json', foreground: '1e754f' },
127+
{ token: 'number.json', foreground: '2f798a' },
128+
{ token: 'string.key.json', foreground: '998418' },
129+
{ token: 'string.value.json', foreground: 'b56959' },
130+
{ token: 'string', foreground: 'b56959' },
131+
{ token: 'number', foreground: '2f798a' },
132+
{ token: 'keyword', foreground: '1e754f' },
133+
],
134+
};
135+
1136
export const DEFAULT_JSON = `{
2137
"name": "JSON Formatter",
3138
"version": "${__BUILD_VERSION__}",

‎src/styles/variables.less‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
// Dark theme colors
2-
@dark-bg: #0d1117;
3-
@dark-secondary-bg: #161b22;
4-
@dark-text: #c9d1d9;
5-
@dark-border: #30363d;
6-
@dark-primary: #58a6ff;
7-
@dark-success: #3fb950;
8-
@dark-success-bg: #0f2419;
9-
@dark-success-border: #238636;
10-
@dark-error: #f85149;
11-
@dark-error-bg: #490202;
12-
@dark-error-border: #da3633;
13-
@dark-button-bg: #21262d;
14-
@dark-button-hover: #30363d;
15-
@dark-muted: #8b949e;
2+
@dark-bg: #121212;
3+
@dark-secondary-bg: #181818;
4+
@dark-text: #dbd7caee;
5+
@dark-border: #191919;
6+
@dark-primary: #4d9375;
7+
@dark-primary-hover: #5da994;
8+
@dark-success: #4d9375;
9+
@dark-success-bg: #4d93751c;
10+
@dark-success-border: #4d9375;
11+
@dark-error: #cb7676;
12+
@dark-error-bg: #cb76761c;
13+
@dark-error-border: #cb7676;
14+
@dark-error-hover: #db889a;
15+
@dark-button-bg: #181818;
16+
@dark-button-hover: #2f363d;
17+
@dark-muted: #dedcd590;
1618

1719
// Light theme colors
1820
@light-bg: #ffffff;
19-
@light-secondary-bg: #f6f8fa;
20-
@light-text: #24292f;
21-
@light-border: #d1d9e0;
22-
@light-primary: #0969da;
23-
@light-success: #1a7f37;
24-
@light-success-bg: #dafbe1;
25-
@light-success-border: #2da44e;
26-
@light-error: #d1242f;
27-
@light-error-bg: #ffebe9;
28-
@light-error-border: #fd8c73;
21+
@light-secondary-bg: #f7f7f7;
22+
@light-text: #393a34;
23+
@light-border: #f0f0f0;
24+
@light-primary: #1c6b48;
25+
@light-primary-hover: #1e754f;
26+
@light-success: #1e754f;
27+
@light-success-bg: #1c6b4814;
28+
@light-success-border: #1e754f;
29+
@light-error: #ab5959;
30+
@light-error-bg: #ab595914;
31+
@light-error-border: #ab5959;
32+
@light-error-hover: #b31d28;
2933
@light-button-bg: #ffffff;
30-
@light-button-hover: #f3f4f6;
31-
@light-muted: #656d76;
34+
@light-button-hover: #f7f7f7;
35+
@light-muted: #393a3490;

0 commit comments

Comments
 (0)