Skip to main content
Home Theme VS Code Korbit Theme Korbit Theme for Visual Studio Code, inspired by IntelliJ Darcula, Gruvbox, and Visual Assist advanced highlighting for Visual Studio
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.activeBackground #34302C00 activityBar.activeBorder #667B77 activityBar.activeFocusBorder #667B77 activityBar.background #34302c activityBar.border #34302C activityBar.dropBorder #384142 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #655d56 — string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag #919461 — punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end #CC8242 — constant.numeric #bb7ab0 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Korbit Theme — Korbit Theme
activityBar.foreground
#A79C95
activityBar.inactiveForeground #655d56
activityBarBadge.background #4D635E
activityBarBadge.foreground #D0C4BD
badge.background #4D635E
badge.foreground #D0C4BD
breadcrumb.activeSelectionForeground #d0c4bd
breadcrumb.background #2a2725
breadcrumb.focusForeground #d0c4bd
breadcrumb.foreground #a79c95
button.background #4D635E
button.foreground #e2d5cc
button.hoverBackground #667B77
button.secondaryBackground #425752
button.secondaryForeground #e2d5cc
button.secondaryHoverBackground #596F6A
checkbox.background #423d38
checkbox.border #00000000
checkbox.foreground #d0c4bd
debugExceptionWidget.background #34302c
debugExceptionWidget.border #423d38
debugToolBar.background #34302c
debugToolBar.border #423d38
diffEditor.border #444444
diffEditor.insertedTextBackground #73841b4D
diffEditor.removedTextBackground #D4452D3D
dropdown.background #423d38
dropdown.border #00000000
dropdown.foreground #A79C95
editor.background #2a2725
editor.findMatchBackground #73841B3D
editor.findMatchBorder #73841B
editor.findMatchHighlightBackground #73841B3D
editor.findMatchHighlightBorder #73841B
editor.findRangeHighlightBackground #2229003D
editor.findRangeHighlightBorder #00000000
editor.foldBackground #C9952A3D
editor.foreground #A79C95
editor.hoverHighlightBackground #4B7F872D
editor.inactiveSelectionBackground #4257524D
editor.lineHighlightBackground #ffffff05
editor.lineHighlightBorder #423D38AA
editor.rangeHighlightBackground #0000001D
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #425752A0
editor.selectionHighlightBackground #596F6A4D
editor.selectionHighlightBorder #596F6A
editor.wordHighlightBackground #596F6A4D
editor.wordHighlightStrongBackground #D93D373D
editorBracketMatch.background #6A7D544D
editorBracketMatch.border #6A7D54
editorCodeLens.foreground #A79C95
editorCursor.background #000000
editorCursor.foreground #A79C95
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #D4452D
editorGroup.border #44423d
editorGroup.emptyBackground #2a2725
editorGroupHeader.border #34302c
editorGroupHeader.tabsBackground #34302c
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #587c0c
editorGutter.background #2A2725
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #363430
editorHoverWidget.border #44423d
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #64625b
editorIndentGuide.background #44423d
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #a79c95
editorLineNumber.foreground #655d56
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #D4452D
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #C9952A
editorOverviewRuler.background #2A2725
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #44423d
editorSuggestWidget.background #363430
editorSuggestWidget.border #44423d
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #0097fb
editorSuggestWidget.selectedBackground #062f4a
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #C9952A
editorWhitespace.foreground #e3e4e229
editorWidget.background #34302c
editorWidget.foreground #a79c95
editorWidget.resizeBorder #658a83
focusBorder #4D635E
foreground #A79C95
gitDecoration.addedResourceForeground #73841B
gitDecoration.conflictingResourceForeground #B95FA2
gitDecoration.deletedResourceForeground #D4452D
gitDecoration.ignoredResourceForeground #655D56
gitDecoration.modifiedResourceForeground #C9952A
gitDecoration.stageDeletedResourceForeground #D4452D
gitDecoration.stageModifiedResourceForeground #C9952A
gitDecoration.submoduleResourceForeground #1A91A0
gitDecoration.untrackedResourceForeground #73841BA0
icon.foreground #A79C95
input.background #423d38
input.border #00000000
input.foreground #d0c4bd
input.placeholderForeground #a79c95
inputOption.activeBackground #4c6f6cb7
inputOption.activeBorder #4c7c9d00
inputOption.activeForeground #D0C4BD
inputValidation.errorBackground #4E0C08
inputValidation.errorBorder #D4452D
inputValidation.errorForeground #BDB1AA
inputValidation.infoBackground #001F29
inputValidation.infoBorder #1A91A0
inputValidation.infoForeground #BDB1AA
inputValidation.warningBackground #401C00
inputValidation.warningBorder #C9952A
inputValidation.warningForeground #BDB1AA
list.activeSelectionBackground #425752A0
list.activeSelectionForeground #D0C4BD
list.dropBackground #32433d
list.focusBackground #423D38
list.focusForeground #d0c4bd
list.focusOutline #4D635E
list.highlightForeground #74adba
list.hoverBackground #423D38
list.hoverForeground #d0c4bd
list.inactiveSelectionBackground #423D38
list.inactiveSelectionForeground #D0C4BD
listFilterWidget.background #584b37
listFilterWidget.noMatchesOutline #a1473e
listFilterWidget.outline #00000000
menu.background #34302c
menu.border #2a2725
menu.foreground #a79c95
menu.selectionBackground #445658
menu.selectionBorder #00000000
menu.selectionForeground #e2d5cc
menu.separatorBackground #655d56
menubar.selectionBackground #655d56a5
menubar.selectionBorder #00000000
menubar.selectionForeground #d0c4bd
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #2a2725
minimap.errorHighlight #D4452D
minimap.findMatchHighlight #73841B
minimap.selectionHighlight #4D635E
minimap.warningHighlight #C9952A
minimapGutter.addedBackground #4d8f33
minimapGutter.deletedBackground #D4452D
minimapGutter.modifiedBackground #1A91A0
notificationCenter.border #655d56
notificationCenterHeader.background #34302c
notificationCenterHeader.foreground #c2c2c2
notificationLink.foreground #7da7a1
notifications.background #423d38
notifications.border #655d56
notifications.foreground #d0c4bd
notificationsErrorIcon.foreground #D4452D
notificationsInfoIcon.foreground #1A91A0
notificationsWarningIcon.foreground #C9952A
notificationToast.border #655d56
panel.background #2a2725
panel.border #423D38
panelSection.border #423d38
panelTitle.activeBorder #566f69
panelTitle.activeForeground #d0c4bd
panelTitle.inactiveForeground #a79c95
peekView.border #4D635E
peekViewEditor.background #42575238
peekViewEditor.matchHighlightBackground #c9942a48
peekViewEditor.matchHighlightBorder #c9942a69
peekViewEditorGutter.background #42575238
peekViewResult.background #2A2725
peekViewResult.fileForeground #E2D5CC
peekViewResult.lineForeground #A79C95
peekViewResult.matchHighlightBackground #c9942a48
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #E2D5CC
peekViewTitle.background #2A2725
peekViewTitleDescription.foreground #8C8279
peekViewTitleLabel.foreground #D0C4BD
pickerGroup.border #00000000
pickerGroup.foreground #849294
progressBar.background #596F6A
scrollbar.shadow #0000005D
scrollbarSlider.activeBackground #a79c955D
scrollbarSlider.background #a79c952D
scrollbarSlider.hoverBackground #a79c953D
selection.background #4D635E
settings.focusedRowBackground #ffffff07
settings.headerForeground #D0C4BD
settings.modifiedItemIndicator #4D635E
sideBar.background #2A2725
sideBar.border #423D38
sideBar.dropBackground #32433d
sideBar.foreground #8C8279
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #A79C95
sideBarTitle.foreground #a79c95
statusBar.background #34302C
statusBar.border #34302c00
statusBar.debuggingBackground #6b4632
statusBar.debuggingForeground #d0c4bd
statusBar.foreground #a79c95
statusBar.noFolderBackground #553d5c
statusBar.noFolderForeground #d0c4bd
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #667B7750
statusBarItem.remoteBackground #49645c
statusBarItem.remoteForeground #d0c4bd
tab.activeBackground #2a2725
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #e2d5cc
tab.border #00000000
tab.hoverBackground #423d3891
tab.inactiveBackground #34302c
tab.inactiveForeground #a79c95
terminal.ansiBlack #000000
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #655d56
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #f4e6db
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e2d5cc
terminal.ansiYellow #e5e510
terminal.border #34302C
terminal.foreground #a79c95
terminal.selectionBackground #655d563c
terminalCursor.background #516d6a
terminalCursor.foreground #e2d5cc
textLink.activeForeground #8AA39D
textLink.foreground #728883
titleBar.activeBackground #34302C
titleBar.activeForeground #d0c4bd
titleBar.border #00000000
titleBar.inactiveBackground #34302C
titleBar.inactiveForeground #8C8279
tree.indentGuidesStroke #655d56
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005D constant.language,variable.language #CC8242 —
constant.character, constant.other #8276a5 —
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression #CC8242 —
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive #7A9EC2 —
storage,storage.type,storage.modifier,storage.arrow #CC8242 —
class.instance.constructor,new.expr entity.name.type #d1a924 —
support.function, entity.name.function #d1a924 —
variable.parameter, variable.other.readwrite, variable.other.constant #6889af —
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property #769ca5 —
text.html.derivative,meta.jsx.children #a79c95 —
entity.other.attribute-name #beaa7e —
meta.object-literal.key #8276a5 —
storage.modifier.ts #CC8242 —
ts.cast.expr,ts.meta.entity.class.method.new.expr.cast,ts.meta.entity.type.name.new.expr.cast,ts.meta.entity.type.name.var-single-variable.annotation,tsx.cast.expr,tsx.meta.entity.class.method.new.expr.cast,tsx.meta.entity.type.name.new.expr.cast,tsx.meta.entity.type.name.var-single-variable.annotation #7A9EC2 —
ts.meta.type.support,ts.meta.type.entity.name,ts.meta.class.inherited-class,tsx.meta.type.support,tsx.meta.type.entity.name,tsx.meta.class.inherited-class,type-declaration,enum-declaration #7A9EC2 —
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters #d1a924 —
comment.block.documentation #919461 —
storage.type.class.jsdoc #CC8242 —
entity.other.inherited-class #7A9EC2 —
entity.name.type.instance.jsdoc #d1a924 —
yaml.entity.name,yaml.string.entity.name #CC8242 —
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp #d1a924 —
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag #919461 —
property-list.property-value,property-list.constant #90a857 —
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss #7A9EC2 —
constant.other.color #8b989e —
entity.other.attribute-name.class.css,entity.other.attribute-name.class.scss,entity.other.attribute-name.parent-selector-suffix.css,entity.other.attribute-name.parent-selector-suffix.scss #d1a924 —
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss #7A9EC2 —
property-list.property-value.function #d1a924 —
support.constant.property-value.css,support.constant.property-value.scss #90a857 —
css.entity.name.tag,scss.entity.name.tag #CC8242 —
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css #d1a924 —
keyword.scss,keyword.css #CC8242 —
token.error-token #f44747 —
token.debug-token #b267e6 —
keyword.operator.logical.python #CC8242 —
support.class.dart #CC8242 —
variable.language.php, variable.other.php #8276a5 —
variable.other.readwrite.perl #8276a5 —
variable.other.property.php #CC8242 —
support.variable.property.php #d1a924 —
punctuation.accessor, punctuation.definition.section, punctuation.definition.string, punctuation.separator, punctuation.terminator, punctuation.definition.tag, punctuation.definition.typeparameters #655d56 —
meta.brace, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.parameters, punctuation.section, punctuation.definition.template-expression #8c8279 —
keyword.operator.logical,keyword.operator.relational,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread #807c5c —
keyword.operator.comparison, keyword.operator.assignment, punctuation.separator.key-value #807c5c
support.class.component #b1a944 —
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
fetchUser 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...
~/my-project
main*
Button.tsx
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 } ! ` ;
}
Korbit Theme | Coding Theme