Skip to main content
Home Theme VS Code Jetbrains like Dark Theme with Gruvbox-ish Scheme Color theme based on the new Jetbrains Dark, with Gruvbox (like) syntax highlight.
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.activeBorder #008080 activityBar.activeFocusBorder #928374 activityBar.background #2b2d30 activityBar.border #ecc9c900 activityBar.foreground #ffffffcc activityBar.inactiveForeground #ffffff66 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle keyword, storage.type.function, storage.type.class, storage.type.enum, storage.type.interface, storage.type.property, keyword.operator.new, keyword.operator.expression, keyword.operator.new, keyword.operator.delete, storage.type.extends #EA6962 — keyword.other.debugger #EA6962 — storage, modifier, keyword.var, entity.name.tag, keyword.control.case, keyword.control.switch #E78A4E — keyword.operator #E78A4E —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Jetbrains like Dark Theme with Gruvbox-ish Scheme — Jetbrains like Dark Theme with Gruvbox-ish Scheme
activityBarBadge.background #3574f0
activityBarBadge.foreground #ffffff
badge.background #2e436e
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #1e1f22
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #666666
breadcrumbPicker.background #2b2d30
button.background #2e436e
button.foreground #ffffff
button.hoverBackground #1177bb
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
charts.blue #7daea3
charts.foreground #d4be98
charts.green #a9b665
charts.orange #e78a4e
charts.purple #d3869b
charts.red #ea6962
charts.yellow #d8a657
chat.editedFileForeground #2b2d30
chat.requestBackground #2b2d30
chat.requestBorder #2b2d30
chat.slashCommandBackground #1e1f22
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
contrastActiveBorder #ffffff00
contrastBorder #ffffff00
debugConsole.errorForeground #ea6962
debugConsole.infoForeground #a9b665
debugConsole.sourceForeground #d3869b
debugConsole.warningForeground #d8a657
debugConsoleInputIcon.foreground #89b482
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugIcon.breakpointCurrentStackframeForeground #7daea3
debugIcon.breakpointDisabledForeground #b85651
debugIcon.breakpointForeground #ea6962
debugIcon.breakpointStackframeForeground #ea6962
debugIcon.breakpointUnverifiedForeground #a89984
debugIcon.continueForeground #7daea3
debugIcon.disconnectForeground #d3869b
debugIcon.pauseForeground #d8a657
debugIcon.restartForeground #89b482
debugIcon.startForeground #89b482
debugIcon.stepBackForeground #7daea3
debugIcon.stepIntoForeground #7daea3
debugIcon.stepOutForeground #7daea3
debugIcon.stepOverForeground #7daea3
debugIcon.stopForeground #ea6962
debugTokenExpression.boolean #d3869b
debugTokenExpression.error #ea6962
debugTokenExpression.name #7daea3
debugTokenExpression.number #d3869b
debugTokenExpression.string #d8a657
debugTokenExpression.value #a9b665
debugToolBar.background #553939
debugToolBar.border #453a3a
descriptionForeground #928374
diffEditor.border #2b2d3000
diffEditor.diagonalFill #504945
diffEditor.insertedLineBackground #8fe1501e
diffEditor.insertedTextBackground #8fe1501e
diffEditor.removedLineBackground #e756563f
diffEditor.removedTextBackground #e756563f
diffEditorGutter.insertedLineBackground #a3dc285e
diffEditorGutter.removedLineBackground #cc3333aa
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #1e1f22
editor.findMatchBackground #515c6a
editor.findMatchBorder #74879f
editor.findMatchHighlightBackground #515c6aaa
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #f9e9c2
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #3a3d41dd
editor.lineHighlightBackground #ffffff0a
editor.lineHighlightBorder #28282800
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #3a6887dd
editor.selectionBackground #264f78
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495f77
editor.snippetFinalTabstopHighlightBackground #8f9a5240
editor.snippetFinalTabstopHighlightBorder #292828
editor.snippetTabstopHighlightBackground #45403da0
editor.stackFrameHighlightBackground #ad36305a
editor.symbolHighlightBackground #68948a40
editor.wordHighlightBackground #3a688761
editor.wordHighlightStrongBackground #3a6887dd
editor.wordHighlightStrongBorder #3a6887fe
editor.wordHighlightTextBackground #3a688761
editorBracketHighlight.foreground1 #ea6962
editorBracketHighlight.foreground2 #d8a657
editorBracketHighlight.foreground3 #a9b665
editorBracketHighlight.foreground4 #7daea3
editorBracketHighlight.foreground5 #e78a4e
editorBracketHighlight.foreground6 #d3869b
editorBracketHighlight.unexpectedBracket.foreground #928374
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #aeafad
editorError.background #b73a3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGhostText.background #29282800
editorGhostText.foreground #7c6f64
editorGroup.border #2b2d30
editorGroup.dropBackground #2b2d3077
editorGroup.emptyBackground #1e1f22
editorGroupHeader.border #ffffff00
editorGroupHeader.noTabsBackground #00000033
editorGroupHeader.tabsBackground #2b2d30
editorGroupHeader.tabsBorder #ff000000
editorGutter.addedBackground #789539
editorGutter.background #1e1f22
editorGutter.commentRangeForeground #c5c5c500
editorGutter.deletedBackground #cc3333
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #13a7d0
editorHint.foreground #ab6c7d
editorHoverWidget.background #2b2d30
editorHoverWidget.border #45454500
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #a8998450
editorIndentGuide.activeBackground1 #707070aa
editorIndentGuide.background #a8998420
editorIndentGuide.background1 #40404050
editorInfo.background #4490bf00
editorInfo.border #4490bf00
editorInfo.foreground #75beff
editorInlayHint.background #202020
editorInlayHint.foreground #ffffff33
editorInlayHint.parameterBackground #202020
editorInlayHint.parameterForeground #ffffff33
editorInlayHint.typeBackground #202020
editorInlayHint.typeForeground #ffffff33
editorLightBulb.foreground #d8a657
editorLightBulbAutoFix.foreground #89b482
editorLineNumber.activeForeground #c6c6c6
editorLineNumber.foreground #444444
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.addedForeground #789539aa
editorOverviewRuler.background #2b2d3000
editorOverviewRuler.border #7f7f7f00
editorOverviewRuler.commonContentForeground #928374
editorOverviewRuler.currentContentForeground #68948a
editorOverviewRuler.deletedForeground #cc3333aa
editorOverviewRuler.errorForeground #d43333
editorOverviewRuler.findMatchForeground #7daea3aa
editorOverviewRuler.incomingContentForeground #72966c
editorOverviewRuler.infoForeground #d3869b
editorOverviewRuler.modifiedForeground #13a7d0aa
editorOverviewRuler.rangeHighlightForeground #0a22d9aa
editorOverviewRuler.selectionHighlightForeground #3a6887dd
editorOverviewRuler.warningForeground #d8a657
editorOverviewRuler.wordHighlightForeground #3a688761
editorOverviewRuler.wordHighlightStrongForeground #3a6887dd
editorOverviewRuler.wordHighlightTextForeground #7daea3aa
editorRuler.foreground #5a5a5a33
editorStickyScroll.border #ffffff00
editorSuggestWidget.background #2b2d30
editorSuggestWidget.border #45454500
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #0097fb
editorSuggestWidget.selectedBackground #2e436e
editorUnnecessaryCode.border #292828
editorUnnecessaryCode.opacity #00000080
editorWarning.background #a9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #2b2d30
editorWidget.border #ff000000
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5f5f5f
errorForeground #ea6962
extensionBadge.remoteBackground #a89984
extensionBadge.remoteForeground #292828
extensionButton.prominentBackground #00808088
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #008080
extensionIcon.preReleaseForeground #e78a4e
extensionIcon.starForeground #89b482
extensionIcon.verifiedForeground #a9b665
focusBorder #00808000
foreground #cccccc
gitDecoration.addedResourceForeground #70b470
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #fd6f6fd8
gitDecoration.ignoredResourceForeground #ffffff30
gitDecoration.modifiedResourceForeground #7489b5
gitDecoration.renamedResourceForeground #a4def5
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #82a2e1
gitlens.closedPullRequestIconColor #ea6962
gitlens.decorations.addedForegroundColor #a9b665
gitlens.decorations.branchAheadForegroundColor #89b482
gitlens.decorations.branchBehindForegroundColor #e78a4e
gitlens.decorations.branchDivergedForegroundColor #d8a657
gitlens.decorations.branchMissingUpstreamForegroundColor #ea6962
gitlens.decorations.branchUnpublishedForegroundColor #7daea3
gitlens.decorations.branchUpToDateForegroundColor #d4be98
gitlens.decorations.copiedForegroundColor #d3869b
gitlens.decorations.deletedForegroundColor #ea6962
gitlens.decorations.ignoredForegroundColor #a89984
gitlens.decorations.modifiedForegroundColor #7daea3
gitlens.decorations.renamedForegroundColor #d3869b
gitlens.decorations.untrackedForegroundColor #d8a657
gitlens.gutterBackgroundColor #292828
gitlens.gutterForegroundColor #d4be98
gitlens.gutterUncommittedForegroundColor #7daea3
gitlens.lineHighlightBackgroundColor #32302f
gitlens.lineHighlightOverviewRulerColor #a89984
gitlens.mergedPullRequestIconColor #d3869b
gitlens.openPullRequestIconColor #89b482
gitlens.trailingLineForegroundColor #928374
gitlens.unpublishedCommitIconColor #d8a657
gitlens.unpulledChangesIconColor #e78a4e
icon.foreground #cccccc
inlineChat.border #1e1f22
inlineChat.foreground #e9dec2
input.background #1e1f22
input.border #00000000
input.foreground #ffffff
input.placeholderForeground #a6a6a6
inputOption.activeBackground #2e436e
inputOption.activeBorder #2e436e
inputOption.activeForeground #ffffff
inputValidation.errorBackground #b85651
inputValidation.errorBorder #ea6962
inputValidation.errorForeground #d4be98
inputValidation.infoBackground #1a4e72
inputValidation.infoBorder #1a4e72
inputValidation.infoForeground #ffffff
inputValidation.warningBackground #c18f41
inputValidation.warningBorder #d8a657
inputValidation.warningForeground #d4be98
issues.closed #ea6962
issues.open #89b482
keybindingLabel.background #1e1f22
keybindingLabel.border #1e1f22
keybindingLabel.bottomBorder #1e1f22
keybindingLabel.foreground #d4be98
keybindingTable.headerBackground #2b2d30
keybindingTable.rowsBackground #2b2d307e
list.activeSelectionBackground #2e436e
list.activeSelectionForeground #eeeeee
list.dropBackground #2b2d3077
list.errorForeground #ff8e8e
list.focusBackground #2e436e
list.focusForeground #cccccc
list.highlightForeground #0097fb
list.hoverBackground #323436
list.hoverForeground #eeeeee
list.inactiveFocusBackground #45403d48
list.inactiveSelectionBackground #323436
list.inactiveSelectionForeground #eeeeee
list.invalidItemForeground #b85651
list.warningForeground #d8a657
listFilterWidget.background #653723
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #2b2d30
menu.border #00000000
menu.foreground #cccccc
menu.selectionBackground #2e436e
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb22
menubar.selectionBackground #2e436e
menubar.selectionBorder #292828
menubar.selectionForeground #cccccc
merge.border #29282800
merge.commonContentBackground #282828dd
merge.commonHeaderBackground #383838dd
merge.currentContentBackground #27403bdd
merge.currentHeaderBackground #367366dd
merge.incomingContentBackground #28384bdd
merge.incomingHeaderBackground #395f8fdd
minimap.background #1e1f22
minimap.errorHighlight #f48771
minimap.findMatchHighlight #515c6acc
minimap.foregroundOpacity #ffffff66
minimap.selectionHighlight #264f78cc
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notebook.cellBorderColor #1e1f22
notebook.cellEditorBackground #1e1f22
notebook.cellHoverBackground #1f2023
notebook.cellStatusBarItemHoverBackground #3c3836
notebook.cellToolbarSeparator #1e1f2200
notebook.editorBackground #1e1f22
notebook.focusedCellBackground #1e1f22
notebook.focusedCellBorder #008080
notebook.focusedEditorBorder #008080
notebook.inactiveFocusedCellBorder #008080
notebook.inactiveSelectedCellBorder #008080
notebook.outputContainerBackgroundColor #26272a
notebook.outputContainerBorderColor #008080
notebook.selectedCellBorder #008080
notebookStatusErrorIcon.foreground #ea6962
notebookStatusRunningIcon.foreground #7daea3
notebookStatusSuccessIcon.foreground #a9b665
notificationCenter.border #2b2d30
notificationCenterHeader.background #2b2d30
notificationCenterHeader.foreground #dddddd
notificationLink.foreground #a9b665
notifications.background #2b2d30
notifications.border #2b2d30
notifications.foreground #dddddd
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #47474700
outputView.background #242628
panel.background #2b2d30
panel.border #2b2d30
panel.dropBorder #ffffff00
panelInput.border #00000000
panelSection.border #80808022
panelSection.dropBackground #2b2d3077
panelSectionHeader.background #26272a00
panelSectionHeader.border #26272a00
panelStickyScroll.border #ffffff00
panelTitle.activeBorder #007acc00
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #e7e7e750
peekView.border #2b2d30
peekViewEditor.background #2b2d30
peekViewEditor.matchHighlightBackground #2e436e
peekViewEditor.matchHighlightBorder #ee931e00
peekViewEditorGutter.background #2b2d30
peekViewResult.background #2b2d30
peekViewResult.fileForeground #eeeeee
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #2e436eaa
peekViewResult.selectionBackground #2e436e
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #2b2d30
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #5b85d9
ports.iconRunningProcessForeground #e78a4e
problemsErrorIcon.foreground #ea6962
problemsInfoIcon.foreground #7daea3
problemsWarningIcon.foreground #d8a657
progressBar.background #0e70c0
quickInputTitle.background #2b2d30
sash.hoverBorder #2e436e
scrollbar.shadow #ffffff00
scrollbarSlider.activeBackground #2e436e
scrollbarSlider.background #53565c40
scrollbarSlider.hoverBackground #2e436e
selection.background #256aa7
settings.checkboxBackground #2b2d30
settings.checkboxBorder #2b2d30
settings.checkboxForeground #e78a4e
settings.dropdownBackground #2b2d30
settings.dropdownBorder #2b2d30
settings.dropdownForeground #89b482
settings.focusedRowBackground #ffffff07
settings.headerBorder #ff000000
settings.headerForeground #cccccc
settings.modifiedItemIndicator #7c6f64
settings.numberInputBackground #2b2d30
settings.numberInputBorder #2b2d30
settings.numberInputForeground #d3869b
settings.rowHoverBackground #2b2d3077
settings.sashBorder #2b2d3000
settings.settingsHeaderHoverForeground #eeeeee
settings.textInputBackground #2b2d30
settings.textInputBorder #2b2d30
settings.textInputForeground #7daea3
sideBar.background #2b2d30
sideBar.border #ff000000
sideBar.dropBackground #2b2d3077
sideBar.foreground #aaaaaa
sideBarSectionHeader.background #ffffff08
sideBarSectionHeader.border #cccccc00
sideBarSectionHeader.foreground #cccccc
sideBarStickyScroll.border #ffffff00
sideBarTitle.foreground #e2e2e2
statusBar.background #2b2d30
statusBar.border #ffffff00
statusBar.debuggingBackground #ad3730
statusBar.debuggingBorder #ffffff00
statusBar.debuggingForeground #ffffff90
statusBar.focusBorder #ffffff00
statusBar.foreground #888888
statusBar.noFolderBackground #2b2d30
statusBar.noFolderBorder #00000000
statusBar.noFolderForeground #888888
statusBarItem.activeBackground #ffffff25
statusBarItem.errorBackground #292828
statusBarItem.errorForeground #ea6962
statusBarItem.hoverBackground #ffffff08
statusBarItem.hoverForeground #eeeeee
statusBarItem.prominentBackground #292828
statusBarItem.prominentForeground #d4be98
statusBarItem.prominentHoverBackground #3c3836a0
statusBarItem.remoteBackground #2b2d30
statusBarItem.remoteForeground #888888
statusBarItem.remoteHoverBackground #2e436e
statusBarItem.remoteHoverForeground #eeeeee
statusBarItem.warningBackground #292828
statusBarItem.warningForeground #d8a657
symbolIcon.arrayForeground #7daea3
symbolIcon.booleanForeground #d3869b
symbolIcon.classForeground #d8a657
symbolIcon.colorForeground #d4be98
symbolIcon.constantForeground #89b482
symbolIcon.constructorForeground #d3869b
symbolIcon.enumeratorForeground #d3869b
symbolIcon.enumeratorMemberForeground #89b482
symbolIcon.eventForeground #d8a657
symbolIcon.fieldForeground #d4be98
symbolIcon.fileForeground #d4be98
symbolIcon.folderForeground #d4be98
symbolIcon.functionForeground #a9b665
symbolIcon.interfaceForeground #d8a657
symbolIcon.keyForeground #a9b665
symbolIcon.keywordForeground #ea6962
symbolIcon.methodForeground #a9b665
symbolIcon.moduleForeground #d3869b
symbolIcon.namespaceForeground #d3869b
symbolIcon.nullForeground #89b482
symbolIcon.numberForeground #d3869b
symbolIcon.objectForeground #d3869b
symbolIcon.operatorForeground #e78a4e
symbolIcon.packageForeground #d3869b
symbolIcon.propertyForeground #89b482
symbolIcon.referenceForeground #7daea3
symbolIcon.snippetForeground #d4be98
symbolIcon.stringForeground #a9b665
symbolIcon.structForeground #d8a657
symbolIcon.textForeground #d4be98
symbolIcon.typeParameterForeground #89b482
symbolIcon.unitForeground #d4be98
symbolIcon.variableForeground #7daea3
tab.activeBackground #1e1f22
tab.activeBorder #007acc00
tab.activeBorderTop #007acc00
tab.activeForeground #eeeeee
tab.activeModifiedBorder #5b85d9
tab.border #25252600
tab.hoverBackground #1e1f22
tab.hoverBorder #007acc00
tab.hoverForeground #eeeeee
tab.inactiveBackground #1e1f2200
tab.inactiveForeground #ffffff80
tab.inactiveModifiedBorder #2e436e
tab.lastPinnedBorder #00000000
tab.selectedBorderTop #007acc00
tab.unfocusedActiveBorder #00000000
tab.unfocusedActiveForeground #a89984
tab.unfocusedHoverForeground #d4be98
tab.unfocusedInactiveForeground #7c6f64
terminal.ansiBlack #222222
terminal.ansiBlue #8caec2
terminal.ansiBrightBlack #635f5b
terminal.ansiBrightBlue #b2d5f1
terminal.ansiBrightCyan #88e1eb
terminal.ansiBrightGreen #c2c45c
terminal.ansiBrightMagenta #d3869b
terminal.ansiBrightRed #fa6959
terminal.ansiBrightWhite #fbf1c7
terminal.ansiBrightYellow #ffcf5f
terminal.ansiCyan #7ec4cc
terminal.ansiGreen #cce26c
terminal.ansiMagenta #b16286
terminal.ansiRed #f5736e
terminal.ansiWhite #b2d6eb
terminal.ansiYellow #d8a657
terminal.background #242628
terminal.border #80808022
terminal.foreground #faf3e1
terminal.selectionBackground #2e436ecc
terminal.tab.activeBorder #ffffffaa
terminalCursor.background #0087ff
terminalCursor.foreground #ffffff
terminalStickyScroll.border #ffffff00
testing.iconErrored #ea6962
testing.iconFailed #ea6962
testing.iconPassed #89b482
testing.iconQueued #7daea3
testing.iconSkipped #d3869b
testing.iconUnset #d8a657
testing.runAction #89b482
textBlockQuote.background #32302f
textBlockQuote.border #a89984
textCodeBlock.background #32302f
textLink.activeForeground #6de0e0
textLink.foreground #6da3e0
textPreformat.foreground #d8a657
titleBar.activeBackground #2b2d30
titleBar.activeForeground #cccccc
titleBar.border #ffffff00
titleBar.inactiveBackground #2b2d30
titleBar.inactiveForeground #cccccc99
toolbar.hoverBackground #2e436eaa
tree.indentGuidesStroke #58585860
walkThrough.embeddedEditorBackground #00000050
welcomePage.progress.foreground #a9b665
welcomePage.tileHoverBackground #32302f
widget.border #ff000000
widget.shadow #00000040 string, punctuation.definition.string.end, punctuation.definition.string.begin, punctuation.definition.string.template.begin, punctuation.definition.string.template.end #D8A657 —
entity.other.attribute-name #D8A657 —
constant.character.escape, punctuation.quasi.element, punctuation.definition.template-expression, punctuation.section.embedded, storage.type.format, constant.other.placeholder, constant.other.placeholder, variable.interpolation #A9B665 —
entity.name.function, support.function, meta.function, meta.function-call, meta.definition.method #A9B665 —
keyword.control.at-rule, keyword.control.import, keyword.control.export, storage.type.namespace, punctuation.decorator, keyword.control.directive, keyword.preprocessor, punctuation.definition.preprocessor, punctuation.definition.directive, keyword.other.import, keyword.other.package, entity.name.type.namespace, entity.name.scope-resolution, keyword.other.using, keyword.package, keyword.import, keyword.map #89B482 —
storage.type.annotation #89B482 —
entity.name.label, constant.other.label #89B482 —
support.module, support.node, support.other.module, support.type.object.module, entity.name.type.module, entity.name.type.class.module, keyword.control.module #89B482 —
storage.type, support.type, entity.name.type, keyword.type #7DAEA3 —
entity.name.type.class, support.class, entity.name.class, entity.other.inherited-class, storage.class #7DAEA3 —
constant.language.boolean #D3869B —
entity.name.function.preprocessor #D3869B —
variable.language.this, variable.language.self, variable.language.super, keyword.other.this, variable.language.special, constant.language.null, constant.language.undefined, constant.language.nan #D3869B —
constant.language, support.constant #D3869B —
variable, support.variable, meta.definition.variable #D4BE98 —
variable.object.property, support.variable.property, variable.other.property, variable.other.object.property, variable.other.enummember, variable.other.member, meta.object-literal.key #D4BE98 —
punctuation, meta.brace, meta.delimiter, meta.bracket #D4BE98 —
heading.1.markdown, markup.heading.setext.1.markdown #EA6962 bold
heading.2.markdown, markup.heading.setext.2.markdown #E78A4E bold
heading.3.markdown #D8A657 bold
heading.4.markdown #A9B665 bold
heading.5.markdown #7DAEA3 bold
heading.6.markdown #D3869B bold
punctuation.definition.heading.markdown #928374 regular
string.other.link.title.markdown, constant.other.reference.link.markdown, string.other.link.description.markdown #D3869B regular
markup.underline.link.image.markdown, markup.underline.link.markdown #A9B665 underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.metadata.markdown, punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown #928374 —
punctuation.definition.bold.markdown #928374 regular
meta.separator.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown #928374 bold
markup.bold markup.italic, markup.italic markup.bold — italic bold
punctuation.definition.markdown, punctuation.definition.raw.markdown #D8A657 —
fenced_code.block.language #D8A657 —
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown #A9B665 —
punctuation.definition.list.begin.markdown #EA6962 —
punctuation.definition.heading.restructuredtext #E78A4E bold
punctuation.definition.field.restructuredtext, punctuation.separator.key-value.restructuredtext, punctuation.definition.directive.restructuredtext, punctuation.definition.constant.restructuredtext, punctuation.definition.italic.restructuredtext, punctuation.definition.table.restructuredtext #928374 —
punctuation.definition.bold.restructuredtext #928374 regular
entity.name.tag.restructuredtext, punctuation.definition.link.restructuredtext, punctuation.definition.raw.restructuredtext, punctuation.section.raw.restructuredtext #89B482 —
constant.other.footnote.link.restructuredtext #D3869B —
support.directive.restructuredtext #EA6962 —
entity.name.directive.restructuredtext, markup.raw.restructuredtext, markup.raw.inner.restructuredtext, string.other.link.title.restructuredtext #A9B665 —
punctuation.definition.function.latex, punctuation.definition.function.tex, punctuation.definition.keyword.latex, constant.character.newline.tex, punctuation.definition.keyword.tex #928374 —
support.function.be.latex #EA6962 —
support.function.section.latex, keyword.control.table.cell.latex, keyword.control.table.newline.latex #E78A4E —
support.class.latex, variable.parameter.latex, variable.parameter.function.latex, variable.parameter.definition.label.latex, constant.other.reference.label.latex #D8A657 —
keyword.control.preamble.latex #D3869B —
punctuation.separator.namespace.xml #928374 —
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml #E78A4E —
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml #D8A657 —
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string.quoted.double.xml, string.quoted.single.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, meta.tag.xml, meta.tag.preprocessor.xml, meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html #A9B665 —
variable.language.documentroot.xml, meta.tag.sgml.doctype.xml #D3869B —
storage.type.proto #D8A657 —
string.quoted.double.proto.syntax, string.quoted.single.proto.syntax, string.quoted.double.proto, string.quoted.single.proto #A9B665 —
entity.name.class.proto, entity.name.class.message.proto #89B482 —
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.separator.list.comma.css #928374 —
entity.other.attribute-name.class.css #EA6962 —
keyword.other.unit #E78A4E —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css #D8A657 —
string.quoted.single.css, string.quoted.double.css, support.constant.property-value.css, meta.property-value.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, constant.numeric.css, support.constant.font-name.css, variable.parameter.keyframe-list.css #A9B665 —
support.type.property-name.css #89B482 —
support.type.vendored.property-name.css #7DAEA3 —
entity.name.tag.css, entity.other.keyframe-offset.css, punctuation.definition.keyword.css, keyword.control.at-rule.keyframes.css, meta.selector.css #D3869B —
punctuation.definition.entity.scss, punctuation.separator.key-value.scss, punctuation.terminator.rule.scss, punctuation.separator.list.comma.scss #928374 —
keyword.control.at-rule.keyframes.scss #E78A4E —
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss #D8A657 —
punctuation.definition.string.begin.scss, punctuation.definition.string.end.scss, string.quoted.double.scss, string.quoted.single.scss, constant.character.css.sass, meta.property-value.scss #A9B665 —
keyword.control.at-rule.include.scss, keyword.control.at-rule.use.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.extend.scss, keyword.control.at-rule.import.scss #D3869B —
meta.function.stylus #D4BE98 —
entity.name.function.stylus #D8A657 —
string.unquoted.js #D4BE98 —
punctuation.accessor.js, punctuation.separator.key-value.js, punctuation.separator.label.js, keyword.operator.accessor.js #928374 —
punctuation.definition.block.tag.jsdoc #EA6962 —
storage.type.js, storage.type.function.arrow.js #E78A4E —
punctuation.definition.tag.jsx, entity.other.attribute-name.jsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx, entity.other.attribute-name.js.jsx #A9B665 —
entity.name.type.module.ts #D4BE98 —
keyword.operator.type.annotation.ts, punctuation.accessor.ts, punctuation.separator.key-value.ts #928374 —
punctuation.definition.tag.directive.ts, entity.other.attribute-name.directive.ts #A9B665 —
entity.name.type.ts, entity.name.type.interface.ts, entity.other.inherited-class.ts, entity.name.type.alias.ts, entity.name.type.class.ts, entity.name.type.enum.ts #89B482 —
storage.type.ts, storage.type.function.arrow.ts, storage.type.type.ts #E78A4E —
entity.name.type.module.ts #7DAEA3 —
keyword.control.import.ts, keyword.control.export.ts, storage.type.namespace.ts #D3869B —
entity.name.type.module.tsx #D4BE98 —
keyword.operator.type.annotation.tsx, punctuation.accessor.tsx, punctuation.separator.key-value.tsx #928374 —
punctuation.definition.tag.directive.tsx, entity.other.attribute-name.directive.tsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, entity.other.attribute-name.tsx #A9B665 —
entity.name.type.tsx, entity.name.type.interface.tsx, entity.other.inherited-class.tsx, entity.name.type.alias.tsx, entity.name.type.class.tsx, entity.name.type.enum.tsx #89B482 —
entity.name.type.module.tsx #7DAEA3 —
keyword.control.import.tsx, keyword.control.export.tsx, storage.type.namespace.tsx #D3869B —
storage.type.tsx, storage.type.function.arrow.tsx, storage.type.type.tsx, support.class.component.tsx #E78A4E —
storage.type.function.coffee #E78A4E —
meta.type-signature.purescript #D4BE98 —
keyword.other.double-colon.purescript, keyword.other.arrow.purescript, keyword.other.big-arrow.purescript #E78A4E —
entity.name.function.purescript #D8A657 —
string.quoted.single.purescript, string.quoted.double.purescript, punctuation.definition.string.begin.purescript, punctuation.definition.string.end.purescript, string.quoted.triple.purescript, entity.name.type.purescript #A9B665 —
support.other.module.purescript #D3869B —
punctuation.dot.dart #928374 —
storage.type.primitive.dart #E78A4E —
support.class.dart #D8A657 —
entity.name.function.dart, string.interpolated.single.dart, string.interpolated.double.dart #A9B665 —
variable.language.dart #7DAEA3 —
keyword.other.import.dart, storage.type.annotation.dart #D3869B —
entity.other.attribute-name.class.pug #EA6962 —
storage.type.function.pug #E78A4E —
entity.other.attribute-name.tag.pug #89B482 —
entity.name.tag.pug, storage.type.import.include.pug #D3869B —
meta.function-call.c, storage.modifier.array.bracket.square.c, meta.function.definition.parameters.c #D4BE98 —
punctuation.separator.dot-access.c, constant.character.escape.line-continuation.c #928374 —
keyword.control.directive.include.c, punctuation.definition.directive.c, keyword.control.directive.pragma.c, keyword.control.directive.line.c, keyword.control.directive.define.c, keyword.control.directive.conditional.c, keyword.control.directive.diagnostic.error.c, keyword.control.directive.undef.c, keyword.control.directive.conditional.ifdef.c, keyword.control.directive.endif.c, keyword.control.directive.conditional.ifndef.c, keyword.control.directive.conditional.if.c, keyword.control.directive.else.c #EA6962 —
punctuation.separator.pointer-access.c #E78A4E —
variable.other.member.c #89B482 —
meta.function-call.cpp, storage.modifier.array.bracket.square.cpp, meta.function.definition.parameters.cpp, meta.body.function.definition.cpp #D4BE98 —
punctuation.separator.dot-access.cpp, constant.character.escape.line-continuation.cpp #928374 —
keyword.control.directive.include.cpp, punctuation.definition.directive.cpp, keyword.control.directive.pragma.cpp, keyword.control.directive.line.cpp, keyword.control.directive.define.cpp, keyword.control.directive.conditional.cpp, keyword.control.directive.diagnostic.error.cpp, keyword.control.directive.undef.cpp, keyword.control.directive.conditional.ifdef.cpp, keyword.control.directive.endif.cpp, keyword.control.directive.conditional.ifndef.cpp, keyword.control.directive.conditional.if.cpp, keyword.control.directive.else.cpp, storage.type.namespace.definition.cpp, keyword.other.using.directive.cpp, storage.type.struct.cpp #EA6962 —
punctuation.separator.pointer-access.cpp, punctuation.section.angle-brackets.begin.template.call.cpp, punctuation.section.angle-brackets.end.template.call.cpp #E78A4E —
variable.other.member.cpp #89B482 —
keyword.other.using.cs #EA6962 —
keyword.type.cs, constant.character.escape.cs, punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs #D8A657 —
string.quoted.double.cs, string.quoted.single.cs, punctuation.definition.string.begin.cs, punctuation.definition.string.end.cs #A9B665 —
variable.other.object.property.cs #89B482 —
entity.name.type.namespace.cs #D3869B —
keyword.symbol.fsharp, constant.language.unit.fsharp #D4BE98 —
keyword.format.specifier.fsharp, entity.name.type.fsharp #D8A657 —
string.quoted.double.fsharp, string.quoted.single.fsharp, punctuation.definition.string.begin.fsharp, punctuation.definition.string.end.fsharp #A9B665 —
entity.name.section.fsharp #7DAEA3 —
support.function.attribute.fsharp #D3869B —
punctuation.separator.java, punctuation.separator.period.java #928374 —
keyword.other.import.java, keyword.other.package.java #EA6962 —
storage.type.function.arrow.java, keyword.control.ternary.java #E78A4E —
variable.other.property.java #89B482 —
variable.language.wildcard.java, storage.modifier.import.java, storage.type.annotation.java, punctuation.definition.annotation.java, storage.modifier.package.java, entity.name.type.module.java #D3869B —
keyword.other.import.kotlin #EA6962 —
storage.type.kotlin #E78A4E —
constant.language.kotlin #89B482 —
entity.name.package.kotlin, storage.type.annotation.kotlin #D3869B —
entity.name.package.scala #D3869B —
constant.language.scala #7DAEA3 —
entity.name.import.scala #89B482 —
string.quoted.double.scala, string.quoted.single.scala, punctuation.definition.string.begin.scala, punctuation.definition.string.end.scala, string.quoted.double.interpolated.scala, string.quoted.single.interpolated.scala, string.quoted.triple.scala #A9B665 —
entity.name.class, entity.other.inherited-class.scala #D8A657 —
keyword.declaration.stable.scala, keyword.other.arrow.scala #E78A4E —
keyword.other.import.scala #EA6962 —
keyword.operator.navigation.groovy, meta.method.body.java, meta.definition.method.groovy, meta.definition.method.signature.java #D4BE98 —
punctuation.separator.groovy #928374 —
keyword.other.import.groovy, keyword.other.package.groovy, keyword.other.import.static.groovy #EA6962 —
storage.type.def.groovy #E78A4E —
variable.other.interpolated.groovy, meta.method.groovy #A9B665 —
storage.modifier.import.groovy, storage.modifier.package.groovy #89B482 —
storage.type.annotation.groovy #D3869B —
entity.name.package.go #89B482 —
keyword.import.go, keyword.package.go #D3869B —
entity.name.type.mod.rust #D4BE98 —
keyword.operator.path.rust, keyword.operator.member-access.rust #928374 —
storage.type.rust #E78A4E —
support.constant.core.rust #89B482 —
meta.attribute.rust, variable.language.rust, storage.type.module.rust #D3869B —
meta.function-call.swift, support.function.any-method.swift #D4BE98 —
support.variable.swift #89B482 —
keyword.operator.class.php #D4BE98 —
storage.type.trait.php #E78A4E —
constant.language.php, support.other.namespace.php #89B482 —
storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.private.cpp #7DAEA3 —
keyword.control.import.include.php, storage.type.php #D3869B —
meta.function-call.arguments.python #D4BE98 —
punctuation.definition.decorator.python, punctuation.separator.period.python #928374 —
constant.language.python #89B482 —
keyword.control.import.python, keyword.control.import.from.python #D3869B —
constant.language.lua #89B482 —
entity.name.class.lua #7DAEA3 —
meta.function.method.with-arguments.ruby #D4BE98 —
punctuation.separator.method.ruby #928374 —
keyword.control.pseudo-method.ruby, storage.type.variable.ruby #E78A4E —
keyword.other.special-method.ruby #A9B665 —
keyword.control.module.ruby, punctuation.definition.constant.ruby #D3869B —
string.regexp.character-class.ruby,string.regexp.interpolated.ruby,punctuation.definition.character-class.ruby,string.regexp.group.ruby, punctuation.section.regexp.ruby, punctuation.definition.group.ruby #D8A657 —
variable.other.constant.ruby #7DAEA3 —
keyword.other.arrow.haskell, keyword.other.big-arrow.haskell, keyword.other.double-colon.haskell #E78A4E —
storage.type.haskell #D8A657 —
constant.other.haskell, string.quoted.double.haskell, string.quoted.single.haskell, punctuation.definition.string.begin.haskell, punctuation.definition.string.end.haskell #A9B665 —
entity.name.function.haskell #7DAEA3 —
entity.name.namespace, meta.preprocessor.haskell #89B482 —
keyword.control.import.julia, keyword.control.export.julia #EA6962 —
keyword.storage.modifier.julia #E78A4E —
constant.language.julia #89B482 —
support.function.macro.julia #D3869B —
keyword.other.period.elm #D4BE98 —
entity.name.function.r, variable.function.r #A9B665 —
constant.language.r #89B482 —
entity.namespace.r #D3869B —
punctuation.separator.module-function.erlang, punctuation.section.directive.begin.erlang #928374 —
keyword.control.directive.erlang, keyword.control.directive.define.erlang #EA6962 —
entity.name.type.class.module.erlang #D8A657 —
string.quoted.double.erlang, string.quoted.single.erlang, punctuation.definition.string.begin.erlang, punctuation.definition.string.end.erlang #A9B665 —
keyword.control.directive.export.erlang, keyword.control.directive.module.erlang, keyword.control.directive.import.erlang, keyword.control.directive.behaviour.erlang #D3869B —
variable.other.readwrite.module.elixir, punctuation.definition.variable.elixir #89B482 —
constant.language.elixir #7DAEA3 —
keyword.control.module.elixir #D3869B —
entity.name.type.value-signature.ocaml #D4BE98 —
keyword.other.ocaml #E78A4E —
constant.language.variant.ocaml #89B482 —
storage.type.sub.perl, storage.type.declare.routine.perl #EA6962 —
meta.function.lisp #D4BE98 —
storage.type.function-type.lisp #EA6962 —
keyword.constant.lisp #A9B665 —
entity.name.function.lisp #89B482 —
constant.keyword.clojure, support.variable.clojure, meta.definition.variable.clojure #A9B665 —
entity.global.clojure #D3869B —
entity.name.function.clojure #7DAEA3 —
meta.scope.if-block.shell, meta.scope.group.shell #D4BE98 —
support.function.builtin.shell, entity.name.function.shell #D8A657 —
string.quoted.double.shell, string.quoted.single.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, string.unquoted.heredoc.shell #A9B665 —
keyword.control.heredoc-token.shell, variable.other.normal.shell, punctuation.definition.variable.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell #D3869B —
support.function.builtin.fish #EA6962 —
support.function.unix.fish #E78A4E —
variable.other.normal.fish, punctuation.definition.variable.fish, variable.other.fixed.fish, variable.other.special.fish #7DAEA3 —
string.quoted.double.fish, punctuation.definition.string.end.fish, punctuation.definition.string.begin.fish, string.quoted.single.fish #A9B665 —
constant.character.escape.single.fish #D3869B —
punctuation.definition.variable.powershell #928374 —
entity.name.function.powershell, support.function.attribute.powershell, support.function.powershell #D8A657 —
string.quoted.single.powershell, string.quoted.double.powershell, punctuation.definition.string.begin.powershell, punctuation.definition.string.end.powershell, string.quoted.double.heredoc.powershell #A9B665 —
variable.other.member.powershell #89B482 —
string.unquoted.alias.graphql #D4BE98 —
keyword.type.graphql #EA6962 —
entity.name.fragment.graphql #D3869B —
entity.name.function.target.makefile #E78A4E —
variable.other.makefile #D8A657 —
meta.scope.prerequisites.makefile #A9B665 —
string.source.cmake #A9B665 —
entity.source.cmake #89B482 —
storage.source.cmake #D3869B —
punctuation.definition.map.viml #928374 —
storage.type.map.viml #E78A4E —
constant.character.map.viml, constant.character.map.key.viml #A9B665 —
constant.character.map.special.viml #7DAEA3 —
constant.language.tmux, constant.numeric.tmux #A9B665 —
entity.name.function.package-manager.dockerfile #E78A4E —
keyword.operator.flag.dockerfile #D8A657 —
string.quoted.double.dockerfile, string.quoted.single.dockerfile #A9B665 —
constant.character.escape.dockerfile #89B482 —
entity.name.type.base-image.dockerfile, entity.name.image.dockerfile #D3869B —
punctuation.definition.separator.diff #928374 —
markup.deleted.diff, punctuation.definition.deleted.diff #EA6962 —
meta.diff.range.context, punctuation.definition.range.diff #E78A4E —
meta.diff.header.from-file #D8A657 —
markup.inserted.diff, punctuation.definition.inserted.diff #A9B665 —
markup.changed.diff, punctuation.definition.changed.diff #7DAEA3 —
punctuation.definition.from-file.diff #D3869B —
entity.name.section.group-title.ini, punctuation.definition.entity.ini #EA6962 —
punctuation.separator.key-value.ini #E78A4E —
string.quoted.double.ini, string.quoted.single.ini, punctuation.definition.string.begin.ini, punctuation.definition.string.end.ini #A9B665 —
keyword.other.definition.ini #89B482 —
support.function.aggregate.sql #D8A657 —
string.quoted.single.sql, punctuation.definition.string.end.sql, punctuation.definition.string.begin.sql, string.quoted.double.sql #A9B665 —
support.type.graphql #D8A657 —
variable.parameter.graphql #7DAEA3 —
constant.character.enum.graphql #89B482 —
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json #928374 —
support.type.property-name.json #E0C080 —
string.quoted.double.json #A9B665 —
punctuation.separator.key-value.mapping.yaml #928374 —
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml, punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml, string.unquoted.plain.in.yaml, string.unquoted.block.yaml #A9B665 —
punctuation.definition.anchor.yaml, punctuation.definition.block.sequence.item.yaml #89B482 —
string.quoted.single.basic.line.toml, string.quoted.single.literal.line.toml, punctuation.definition.keyValuePair.toml #A9B665 —
constant.other.boolean.toml #7DAEA3 —
entity.other.attribute-name.table.toml, punctuation.definition.table.toml, entity.other.attribute-name.table.array.toml, punctuation.definition.table.array.toml #D3869B —
comment, string.comment, punctuation.definition.comment #928374 italic
token.error-token #F44747 —
token.debug-token #B267E6 —
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...
main*
Button.tsx
31
~/my-project
$
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 } !` ;
}
Jetbrains like Dark Theme with Gruvbox-ish Scheme | Coding Theme