Skip to main content
Home Theme VS Code Solarized Green Light theme inspired by VS Code Solarized Light theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #ebe6e0 activityBar.foreground #4c7766 activityBar.inactiveForeground #4c776668 activityBarBadge.background #4c7766 activityBarBadge.foreground #ebe6e0 badge.background #c4c4c4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #657B83 — meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python #657B83 — comment #93A1A1 italic string #2AA198 — string.regexp
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Solarized Green — Solarized Green
badge.foreground
#333333
breadcrumb.activeSelectionForeground #4e4e4e
breadcrumb.background #ffffff
breadcrumb.focusForeground #4e4e4e
breadcrumb.foreground #616161cc
button.background #4c7766
button.foreground #ffffff
button.hoverBackground #335145
button.secondaryBackground #5f6a79
button.secondaryForeground #ffffff
button.secondaryHoverBackground #4c5561
checkbox.background #ffffff
checkbox.border #00000000
checkbox.foreground #4c7766
debugExceptionWidget.background #f3f3f3
debugExceptionWidget.border #d5d5d5
debugToolBar.background #f3f3f3
debugToolBar.border #d5d5d5
diffEditor.border #d7d7d7
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #ffffff
dropdown.border #00000000
dropdown.foreground #4c7766
editor.background #f6efe1
editor.findMatchBackground #a8ac94
editor.findMatchBorder #979b83
editor.findMatchHighlightBackground #ea5c0055
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #ccd5d2bd
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #add6ff4d
editor.foreground #000000
editor.hoverHighlightBackground #add6ff26
editor.inactiveSelectionBackground #00000008
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #eeeeee
editor.rangeHighlightBackground #fdff0033
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #0000001a
editor.selectionHighlightBackground #ccd5d2
editor.selectionHighlightBorder #7d93ab
editor.wordHighlightBackground #57575740
editor.wordHighlightStrongBackground #0e639c40
editorBracketMatch.background #0064001a
editorBracketMatch.border #b9b9b9
editorCodeLens.foreground #999999
editorCursor.background #ffffff
editorCursor.foreground #4c7766
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #e51400
editorGroup.border #e7e7e7
editorGroup.emptyBackground #f6efe1
editorGroupHeader.tabsBackground #ccd5d272
editorGroupHeader.tabsBorder #ffffff00
editorGutter.addedBackground #81b88b
editorGutter.background #f6efe1
editorGutter.commentRangeForeground #424242
editorGutter.deletedBackground #ca4b51
editorGutter.foldingControlForeground #424242
editorGutter.modifiedBackground #66afe0
editorHoverWidget.background #f3f3f3
editorHoverWidget.border #c8c8c8
editorHoverWidget.foreground #616161
editorIndentGuide.activeBackground #939393
editorIndentGuide.background #d3d3d3
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #000000
editorLineNumber.foreground #4c7766
editorLink.activeForeground #0000ff
editorMarkerNavigation.background #ffffff
editorMarkerNavigationError.background #e51400
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #e9a700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #d3d3d3
editorSuggestWidget.background #ebe6e0
editorSuggestWidget.border #c8c8c8
editorSuggestWidget.foreground #000000
editorSuggestWidget.highlightForeground #4c7766
editorSuggestWidget.selectedBackground #ccd5d2
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #e9a700
editorWhitespace.foreground #33333333
editorWidget.background #f3f3f3
editorWidget.foreground #616161
editorWidget.resizeBorder #c7c7c7
focusBorder #4c7766
foreground #4c7766
gitDecoration.addedResourceForeground #587c0c
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #ad0707
gitDecoration.ignoredResourceForeground #8e8e90
gitDecoration.modifiedResourceForeground #895503
gitDecoration.stageDeletedResourceForeground #ad0707
gitDecoration.stageModifiedResourceForeground #895503
gitDecoration.submoduleResourceForeground #1258a7
gitDecoration.untrackedResourceForeground #007100
icon.foreground #4c7766
input.background #ffffff
input.border #00000000
input.foreground #4c7766
input.placeholderForeground #4c7766b9
inputOption.activeBackground #ccd5d2
inputOption.activeBorder #4c776600
inputOption.activeForeground #000000
list.activeSelectionBackground #4c7766
list.activeSelectionForeground #ffffff
list.dropBackground #ccd5d2
list.focusBackground #ccd5d2
list.focusForeground #616161
list.highlightForeground #4c7766
list.hoverBackground #ccd5d2a7
list.hoverForeground #616161
list.inactiveSelectionBackground #ccd5d2
list.inactiveSelectionForeground #616161
listFilterWidget.background #ccd5d2
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #ebe6e0
menu.border #4c776600
menu.foreground #000000
menu.selectionBackground #4c7766
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #4c77666e
menubar.selectionBackground #0000001a
menubar.selectionBorder #4c7766
menubar.selectionForeground #000000
merge.commonContentBackground #E5E5E5
merge.commonHeaderBackground #BFBFBF
merge.currentContentBackground #DBF4EF
merge.currentHeaderBackground #A4E3D6
merge.incomingContentBackground #DBECFF
merge.incomingHeaderBackground #A6CFFF
minimap.background #f6efe1
minimap.errorHighlight #e51400
minimap.findMatchHighlight #a8ac94
minimap.selectionHighlight #0000001a
minimap.warningHighlight #e9a700
minimapGutter.addedBackground #81b88b
minimapGutter.deletedBackground #ca4b51
minimapGutter.modifiedBackground #66afe0
notificationCenter.border #d5d5d5
notificationCenterHeader.background #e7e7e7
notificationCenterHeader.foreground #616161
notifications.background #f3f3f3
notifications.border #e7e7e7
notifications.foreground #616161
notificationsErrorIcon.foreground #e51400
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #e9a700
notificationToast.border #d5d5d5
panel.background #ebe6e0
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #424242
panelTitle.activeForeground #424242
panelTitle.inactiveForeground #424242bf
peekView.border #4c7766
peekViewEditor.background #f2f8fc
peekViewEditor.matchHighlightBackground #f5d802de
peekViewEditor.matchHighlightBorder #dbc417
peekViewEditorGutter.background #f2f8fc
peekViewResult.background #f3f3f3
peekViewResult.fileForeground #1e1e1e
peekViewResult.lineForeground #646465
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #6c6c6c
peekViewTitle.background #ffffff
peekViewTitleDescription.foreground #616161e6
peekViewTitleLabel.foreground #333333
pickerGroup.border #cccedb
pickerGroup.foreground #4c7766
progressBar.background #4c7766
scrollbar.shadow #ccd5d2
scrollbarSlider.activeBackground #00000099
scrollbarSlider.background #64646466
scrollbarSlider.hoverBackground #646464b3
selection.background #ccd5d2
settings.focusedRowBackground #ffffff07
settings.headerForeground #4c7766
sideBar.background #ebe6e0
sideBar.border #00000000
sideBar.dropBackground #ccd5d2
sideBar.foreground #616161
sideBarSectionHeader.background #4c776600
sideBarSectionHeader.border #4c776600
sideBarSectionHeader.foreground #616161
sideBarTitle.foreground #6f6f6f
statusBar.background #4c7766
statusBar.debuggingBackground #cc6633
statusBar.debuggingForeground #ffffff
statusBar.foreground #ebe6e0
statusBar.noFolderBackground #ccd5d2
statusBar.noFolderForeground #000000
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #000000b8
statusBarItem.remoteBackground #16825d
statusBarItem.remoteForeground #ffffff
tab.activeBackground #ffffff
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #333333
tab.border #f3f3f3
tab.inactiveBackground #ccd5d272
tab.inactiveForeground #333333db
terminal.ansiBlack #000000
terminal.ansiBlue #0451a5
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #0451a5
terminal.ansiBrightCyan #0598bc
terminal.ansiBrightGreen #14ce14
terminal.ansiBrightMagenta #bc05bc
terminal.ansiBrightRed #cd3131
terminal.ansiBrightWhite #a5a5a5
terminal.ansiBrightYellow #b5ba00
terminal.ansiCyan #0598bc
terminal.ansiGreen #00bc00
terminal.ansiMagenta #bc05bc
terminal.ansiRed #cd3131
terminal.ansiWhite #555555
terminal.ansiYellow #949800
terminal.border #80808059
terminal.foreground #333333
terminal.selectionBackground #00000010
terminalCursor.background #ffffff
terminalCursor.foreground #4c7766
textLink.foreground #4c7766
titleBar.activeBackground #ccd5d2
titleBar.activeForeground #333333
titleBar.border #00000000
titleBar.inactiveBackground #dddddd
titleBar.inactiveForeground #33333399
tree.indentGuidesStroke #4c7766
walkThrough.embeddedEditorBackground #00000050
widget.shadow #00000029 #DC322F
variable.language, variable.other #268BD2 —
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution #CB4B16
entity.name.function #268BD2 —
punctuation.definition.variable #859900 —
punctuation.section.embedded.begin, punctuation.section.embedded.end #DC322F —
constant.language, meta.preprocessor #B58900 —
support.function.construct, keyword.other.new #CB4B16 —
constant.character, constant.other #CB4B16 —
entity.other.inherited-class #6C71C4 —
punctuation.definition.tag #93A1A1 —
entity.other.attribute-name #93A1A1 —
punctuation.separator.continuation #DC322F —
support.constant, support.variable — —
support.type, support.class #859900 —
support.type.exception #CB4B16 —
meta.diff, meta.diff.header #268BD2 italic
markup.bold, markup.italic #D33682 —
markup.strikethrough — strikethrough
markup.heading #268BD2 bold
markup.heading.setext #268BD2
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser (id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/${ id }` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status }` );
}
return ( await response . json ()) as User ;
}
function greet (user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
main*
Button.tsx
fetchUser
31
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser (id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/${ id }` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status }` );
}
return ( await response . json ()) as User ;
}
function greet (user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name }!` ;
}
Solarized Green | Coding Theme