Skip to content

Commit 773992b

Browse files
waleedlatif1waleedlatif1
committed
improvement(files): replace stock Monaco theme with Sim design system theme
Define sim-dark and sim-light Monaco themes using Sim's exact design tokens instead of the default vs/vs-dark which looked identical to stock VSCode. Chrome changes (both themes): - Background, gutter use --bg (not VSCode's near-black / pure-white defaults) - Line numbers use --text-muted instead of VSCode gray - Cursor switches to --brand-secondary (#33b4ff) - Selection highlight is brand blue at 15% opacity - Scrollbar shadow removed, track uses surface tokens - Bracket match, word highlight, find match all keyed to brand blue - Suggestion/hover widgets use --surface-2 / --border tokens - All hardcoded shadows removed (scrollbar.shadow = transparent) Syntax token changes (inherit: true — base handles unlisted tokens): - Comments: muted gray + italic (vs VSCode's bright green) - Strings: #3ab872 dark / #16825d light (vs VSCode orange-red) - Numbers: warm amber / warm orange (both readable on their backgrounds) - Keywords: #33b4ff dark / #0078d4 light (brand blue family) - Types: complementary blue-gray / purple
1 parent 9f34a27 commit 773992b

1 file changed

Lines changed: 133 additions & 1 deletion

File tree

  • apps/sim/app/workspace/[workspaceId]/files/components/file-viewer

‎apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx‎

Lines changed: 133 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,39 @@ import { DataTable } from './data-table'
2222
import type { PdfDocumentSource } from './pdf-viewer'
2323
import { PreviewPanel, resolvePreviewType } from './preview-panel'
2424

25+
// Token rules shared by both themes — override the major categories; base handles the rest
26+
const SIM_DARK_RULES: import('monaco-editor').editor.ITokenThemeRule[] = [
27+
{ token: 'comment', foreground: '4a4a4a', fontStyle: 'italic' },
28+
{ token: 'string', foreground: '3ab872' },
29+
{ token: 'string.escape', foreground: '3ab872' },
30+
{ token: 'number', foreground: 'e8a87c' },
31+
{ token: 'number.float', foreground: 'e8a87c' },
32+
{ token: 'number.hex', foreground: 'e8a87c' },
33+
{ token: 'keyword', foreground: '33b4ff' },
34+
{ token: 'keyword.control', foreground: '33b4ff' },
35+
{ token: 'storage', foreground: '33b4ff' },
36+
{ token: 'type', foreground: '8fc7f5' },
37+
{ token: 'type.identifier', foreground: '8fc7f5' },
38+
{ token: 'regexp', foreground: 'ff8a65' },
39+
{ token: 'annotation', foreground: 'ffca28' },
40+
]
41+
42+
const SIM_LIGHT_RULES: import('monaco-editor').editor.ITokenThemeRule[] = [
43+
{ token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
44+
{ token: 'string', foreground: '16825d' },
45+
{ token: 'string.escape', foreground: '16825d' },
46+
{ token: 'number', foreground: 'c9660c' },
47+
{ token: 'number.float', foreground: 'c9660c' },
48+
{ token: 'number.hex', foreground: 'c9660c' },
49+
{ token: 'keyword', foreground: '0078d4' },
50+
{ token: 'keyword.control', foreground: '0078d4' },
51+
{ token: 'storage', foreground: '0078d4' },
52+
{ token: 'type', foreground: '7c4dcc' },
53+
{ token: 'type.identifier', foreground: '7c4dcc' },
54+
{ token: 'regexp', foreground: 'd7390c' },
55+
{ token: 'annotation', foreground: 'e67700' },
56+
]
57+
2558
const MonacoEditor = dynamic(
2659
async () => {
2760
const [{ default: Editor, loader }, monaco] = await Promise.all([
@@ -58,6 +91,105 @@ const MonacoEditor = dynamic(
5891
}
5992

6093
loader.config({ monaco })
94+
95+
monaco.editor.defineTheme('sim-dark', {
96+
base: 'vs-dark',
97+
inherit: true,
98+
rules: SIM_DARK_RULES,
99+
colors: {
100+
'editor.background': '#1b1b1b',
101+
'editor.foreground': '#e6e6e6',
102+
'editorLineNumber.foreground': '#404040',
103+
'editorLineNumber.activeForeground': '#787878',
104+
'editor.selectionBackground': '#33b4ff28',
105+
'editor.inactiveSelectionBackground': '#33b4ff14',
106+
'editor.lineHighlightBackground': '#23232380',
107+
'editor.lineHighlightBorder': '#00000000',
108+
'editorGutter.background': '#1b1b1b',
109+
'editorWidget.background': '#242424',
110+
'editorWidget.border': '#333333',
111+
'editorWidget.foreground': '#e6e6e6',
112+
'editor.findMatchBackground': '#33b4ff40',
113+
'editor.findMatchHighlightBackground': '#33b4ff1a',
114+
'editor.findMatchBorder': '#33b4ff',
115+
'scrollbar.shadow': '#00000000',
116+
'scrollbarSlider.background': '#33333380',
117+
'scrollbarSlider.hoverBackground': '#45454580',
118+
'scrollbarSlider.activeBackground': '#505050',
119+
'editorBracketMatch.background': '#33b4ff1a',
120+
'editorBracketMatch.border': '#33b4ff80',
121+
'editorIndentGuide.background1': '#2a2a2a',
122+
'editorIndentGuide.activeBackground1': '#454545',
123+
'editorCursor.foreground': '#33b4ff',
124+
'editor.wordHighlightBackground': '#33b4ff14',
125+
'editor.wordHighlightBorder': '#33b4ff40',
126+
'editorSuggestWidget.background': '#242424',
127+
'editorSuggestWidget.border': '#333333',
128+
'editorSuggestWidget.foreground': '#e6e6e6',
129+
'editorSuggestWidget.selectedBackground': '#292929',
130+
'editorSuggestWidget.selectedForeground': '#e6e6e6',
131+
'editorHoverWidget.background': '#242424',
132+
'editorHoverWidget.border': '#333333',
133+
'editorHoverWidget.foreground': '#e6e6e6',
134+
'minimap.background': '#1b1b1b',
135+
'minimapSlider.background': '#33333380',
136+
focusBorder: '#33b4ff80',
137+
'input.background': '#242424',
138+
'input.border': '#333333',
139+
'input.foreground': '#e6e6e6',
140+
'inputOption.activeBorder': '#33b4ff',
141+
},
142+
})
143+
144+
monaco.editor.defineTheme('sim-light', {
145+
base: 'vs',
146+
inherit: true,
147+
rules: SIM_LIGHT_RULES,
148+
colors: {
149+
'editor.background': '#fefefe',
150+
'editor.foreground': '#1a1a1a',
151+
'editorLineNumber.foreground': '#cccccc',
152+
'editorLineNumber.activeForeground': '#707070',
153+
'editor.selectionBackground': '#33b4ff22',
154+
'editor.inactiveSelectionBackground': '#33b4ff12',
155+
'editor.lineHighlightBackground': '#f7f7f7',
156+
'editor.lineHighlightBorder': '#00000000',
157+
'editorGutter.background': '#fefefe',
158+
'editorWidget.background': '#ffffff',
159+
'editorWidget.border': '#dedede',
160+
'editorWidget.foreground': '#1a1a1a',
161+
'editor.findMatchBackground': '#33b4ff40',
162+
'editor.findMatchHighlightBackground': '#33b4ff1a',
163+
'editor.findMatchBorder': '#33b4ff',
164+
'scrollbar.shadow': '#00000000',
165+
'scrollbarSlider.background': '#dedede80',
166+
'scrollbarSlider.hoverBackground': '#cccccc',
167+
'scrollbarSlider.activeBackground': '#b0b0b0',
168+
'editorBracketMatch.background': '#33b4ff1a',
169+
'editorBracketMatch.border': '#33b4ff80',
170+
'editorIndentGuide.background1': '#f0f0f0',
171+
'editorIndentGuide.activeBackground1': '#d8d8d8',
172+
'editorCursor.foreground': '#33b4ff',
173+
'editor.wordHighlightBackground': '#33b4ff14',
174+
'editor.wordHighlightBorder': '#33b4ff40',
175+
'editorSuggestWidget.background': '#ffffff',
176+
'editorSuggestWidget.border': '#dedede',
177+
'editorSuggestWidget.foreground': '#1a1a1a',
178+
'editorSuggestWidget.selectedBackground': '#f5f5f5',
179+
'editorSuggestWidget.selectedForeground': '#1a1a1a',
180+
'editorHoverWidget.background': '#ffffff',
181+
'editorHoverWidget.border': '#dedede',
182+
'editorHoverWidget.foreground': '#1a1a1a',
183+
'minimap.background': '#fefefe',
184+
'minimapSlider.background': '#dedede80',
185+
focusBorder: '#33b4ff80',
186+
'input.background': '#ffffff',
187+
'input.border': '#dedede',
188+
'input.foreground': '#1a1a1a',
189+
'inputOption.activeBorder': '#33b4ff',
190+
},
191+
})
192+
61193
return Editor
62194
},
63195
{ ssr: false }
@@ -547,7 +679,7 @@ function useMonacoTheme(): string {
547679
return () => observer.disconnect()
548680
}, [])
549681

550-
return isDark ? 'vs-dark' : 'vs'
682+
return isDark ? 'sim-dark' : 'sim-light'
551683
}
552684

553685
export function FileViewer({

0 commit comments

Comments
 (0)