Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#000
  • activityBar.border#1E1E1E
  • activityBar.foreground#464646
  • activityBarBadge.background#CCA866
  • activityBarBadge.foreground#000
  • badge.background#000
  • badge.foreground#CCA866
  • button.background#1E1E1E
  • button.foreground#646464
  • button.hoverBackground#323232
  • editor.background#000
  • editor.foreground#CCA866
  • editor.lineHighlightBackground#1E1E1E
  • editor.selectionBackground#464646
  • editor.selectionHighlightBackground#232323
  • editor.wordHighlightBackground#3c4c31
  • editor.wordHighlightStrongBackground#634b41
  • editorBracketMatch.background#8198c7
  • editorBracketMatch.border#8198c7
  • editorCodeLens.foreground#464646
  • editorCursor.foreground#81C784
  • editorError.foreground#C78181
  • editorGroup.background#000
  • editorGroup.border#1E1E1E
  • editorGroupHeader.noTabsBackground#000
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#1E1E1E
  • editorGutter.addedBackground#81C784
  • editorGutter.deletedBackground#C78181
  • editorGutter.modifiedBackground#8198c7
  • editorLineNumber.foreground#464646
  • editorMarkerNavigation.background#000
  • editorMarkerNavigationError.background#C78181
  • editorMarkerNavigationWarning.background#81C784
  • editorOverviewRuler.addedForeground#81C784
  • editorOverviewRuler.border#1E1E1E
  • editorOverviewRuler.deletedForeground#C78181
  • editorOverviewRuler.errorForeground#C78181
  • editorOverviewRuler.infoForeground#8198c7
  • editorOverviewRuler.modifiedForeground#8198c7
  • editorOverviewRuler.warningForeground#81C784
  • editorSuggestWidget.background#000
  • editorSuggestWidget.border#1E1E1E
  • editorSuggestWidget.foreground#464646
  • editorWarning.foreground#81C784
  • editorWidget.background#000
  • editorWidget.border#1E1E1E
  • errorForeground#C78181
  • focusBorder#323232
  • foreground#646464
  • input.background#141414
  • input.border#1E1E1E
  • input.placeholderForeground#323232
  • list.activeSelectionBackground#1E1E1E
  • list.activeSelectionForeground#CCA866
  • list.dropBackground#1E1E1E
  • list.focusBackground#1E1E1E
  • list.focusForeground#646464
  • list.highlightForeground#CCA866
  • list.hoverBackground#1E1E1E
  • list.hoverForeground#646464
  • list.inactiveSelectionBackground#1E1E1E
  • list.inactiveSelectionForeground#CCA866
  • panel.border#1E1E1E
  • panelTitle.activeBorder#000
  • panelTitle.activeForeground#CCA866
  • panelTitle.inactiveForeground#464646
  • peekView.border#1E1E1E
  • peekViewEditor.background#000
  • peekViewEditor.matchHighlightBackground#634b41
  • peekViewResult.background#000
  • scrollbarSlider.activeBackground#0F0F0F
  • scrollbarSlider.background#0F0F0F
  • scrollbarSlider.hoverBackground#1E1E1E
  • sideBar.background#000
  • sideBar.border#1E1E1E
  • sideBar.foreground#464646
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.foreground#999999
  • statusBar.background#000
  • statusBar.border#1E1E1E
  • statusBar.foreground#464646
  • statusBar.noFolderBackground#000
  • tab.activeBackground#1E1E1E
  • tab.activeForeground#CCA866
  • tab.border#1E1E1E
  • tab.inactiveBackground#000
  • tab.inactiveForeground#464646
  • widget.shadow#1E1E1E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#81C784
storage.type.ts, meta.definition.method, meta.definition.function, meta.selector, markup.heading.markdown, entity.name.tag, entity.other.attribute-name.class.css, entity.name.function.go#9B7931bold
punctuation.accessor, punctuation.definition.block, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.dictionary, punctuation.definition.array, punctuation.support.type.property-name, punctuation.decorator, punctuation.separator, punctuation.section.property-list, punctuation.section.function, punctuation.definition.tag, meta.brace, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go, punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.other.comma.go, punctuation.other.period.go, punctuation.terminator.go#C5C56Dbold
meta.import#846926italic
meta.decorator#846926
keyword.operator, storage.type.function.arrow, punctuation.terminator.statement, entity.other.attribute-name.html#C5876D
ThemeDatabase All Themes by enes ozturk - VS Code Theme