Skip to main content
Coding Theme

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#000000
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#767676
  • activityBarBadge.background#5fafff
  • activityBarBadge.foreground#000000
  • badge.background#5fafff
  • badge.foreground#000000
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#767676
  • button.background#005f87
  • button.foreground#ffffff
  • button.hoverBackground#5fafff
  • debugIcon.breakpointForeground#ff5f5f
  • debugIcon.pauseForeground#ffd787
  • debugIcon.startForeground#5fd75f
  • debugIcon.stopForeground#ff5f5f
  • debugToolBar.background#303030
  • descriptionForeground#767676
  • diffEditor.insertedTextBackground#5fd75f22
  • diffEditor.removedTextBackground#d7878722
  • disabledForeground#585858
  • editor.background#000000
  • editor.findMatchBackground#ffd787
  • editor.findMatchForeground#000000
  • editor.findMatchHighlightBackground#5fd75f55
  • editor.foreground#c6c6c6
  • editor.inactiveSelectionBackground#303030
  • editor.lineHighlightBackground#262626
  • editor.selectionBackground#005f87
  • editor.selectionForeground#ffffff
  • editorBracketMatch.background#ff00af55
  • editorBracketMatch.border#ff00af
  • editorCursor.foreground#ffffff
  • editorError.foreground#ff5f5f
  • editorGutter.addedBackground#5fd75f
  • editorGutter.deletedBackground#d78787
  • editorGutter.modifiedBackground#5fafff
  • editorHint.foreground#5fafaf
  • editorHoverWidget.background#303030
  • editorHoverWidget.border#767676
  • editorIndentGuide.activeBackground1#585858
  • editorIndentGuide.background1#262626
  • editorInfo.foreground#5fafff
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#585858
  • editorLink.activeForeground#ffd787
  • editorOverviewRuler.addedForeground#5fd75f
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.deletedForeground#d78787
  • editorOverviewRuler.modifiedForeground#5fafff
  • editorSuggestWidget.background#303030
  • editorSuggestWidget.foreground#c6c6c6
  • editorSuggestWidget.highlightForeground#d787d7
  • editorSuggestWidget.selectedBackground#4e4e4e
  • editorWarning.foreground#ffd787
  • editorWhitespace.foreground#303030
  • editorWidget.background#303030
  • editorWidget.foreground#c6c6c6
  • focusBorder#5fafff
  • foreground#c6c6c6
  • gitDecoration.addedResourceForeground#5fd75f
  • gitDecoration.conflictingResourceForeground#ff5f5f
  • gitDecoration.deletedResourceForeground#d78787
  • gitDecoration.ignoredResourceForeground#585858
  • gitDecoration.modifiedResourceForeground#5fafff
  • gitDecoration.untrackedResourceForeground#5fd7d7
  • input.background#303030
  • input.border#767676
  • input.foreground#c6c6c6
  • inputOption.activeBackground#005f87
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#ff5f5f
  • inputValidation.errorForeground#ffffff
  • inputValidation.warningBackground#ffd787
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#005f87
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#4e4e4e
  • list.highlightForeground#ffd787
  • list.hoverBackground#262626
  • list.inactiveSelectionBackground#303030
  • list.inactiveSelectionForeground#c6c6c6
  • minimap.background#000000
  • minimapSlider.background#76767644
  • minimapSlider.hoverBackground#76767688
  • notifications.background#303030
  • notifications.foreground#c6c6c6
  • notificationsErrorIcon.foreground#ff5f5f
  • notificationsInfoIcon.foreground#5fafff
  • notificationsWarningIcon.foreground#ffd787
  • panel.background#000000
  • panel.border#767676
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#767676
  • peekViewEditor.background#000000
  • peekViewResult.background#303030
  • peekViewResult.selectionBackground#4e4e4e
  • peekViewTitle.background#000000
  • progressBar.background#5fafff
  • scrollbarSlider.activeBackground#c6c6c6aa
  • scrollbarSlider.background#76767655
  • scrollbarSlider.hoverBackground#76767699
  • selection.background#005f87
  • sideBar.background#000000
  • sideBar.border#303030
  • sideBar.foreground#c6c6c6
  • sideBarSectionHeader.background#303030
  • sideBarSectionHeader.foreground#e4e4e4
  • statusBar.background#000000
  • statusBar.foreground#c6c6c6
  • statusBarItem.hoverBackground#303030
  • tab.activeBackground#000000
  • tab.activeBorderTop#5fafff
  • tab.activeForeground#ffffff
  • tab.border#303030
  • tab.inactiveBackground#303030
  • tab.inactiveForeground#767676
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5fafff
  • terminal.ansiBrightBlack#585858
  • terminal.ansiBrightBlue#87afff
  • terminal.ansiBrightCyan#5fafaf
  • terminal.ansiBrightGreen#afff87
  • terminal.ansiBrightMagenta#d787d7
  • terminal.ansiBrightRed#ff87ff
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffaf
  • terminal.ansiCyan#5fd7d7
  • terminal.ansiGreen#5fd75f
  • terminal.ansiMagenta#ff87ff
  • terminal.ansiRed#ff5f5f
  • terminal.ansiWhite#e4e4e4
  • terminal.ansiYellow#ffd787
  • terminal.background#000000
  • terminal.foreground#c6c6c6
  • terminalCursor.foreground#ffffff
  • testing.iconFailed#ff5f5f
  • testing.iconPassed#5fd75f
  • testing.iconQueued#ffd787
  • testing.iconUnset#767676
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#c6c6c6
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#767676
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5fafffitalic
string, string.quoted, string.template, constant.other.symbol#ffd787
constant, constant.numeric, constant.language, variable.other.constant#ff87ff
keyword, keyword.control, storage, storage.type, entity.name.tag#e4e4e4bold
keyword.control.directive, keyword.other.directive, entity.name.function.preprocessor#5fd7d7
entity.name.type, support.type, storage.type, entity.other.inherited-class#5fd75f
entity.name.function, support.function, meta.function-call, variable.function#5fafaf
variable, variable.other, meta.definition.variable#c6c6c6
variable.language, support.variable, support.constant, support.class#5fafaf
entity.name.namespace, entity.name.module, support.other.namespace#d787d7
entity.name.selector, entity.other.attribute-name, meta.property-name#5fd7d7
punctuation, meta.brace, meta.delimiter#5fafaf
support.type.property-name, variable.other.property, meta.object-literal.key#5fafff
markup.heading, markup.bold#e4e4e4bold
markup.italic#c6c6c6italic
markup.underline, string.other.link#ffd787underline
markup.inline.raw, markup.raw#ffd787
invalid, invalid.illegal#ffffff
message.error, markup.deleted#d78787
markup.inserted#5fd75f
markup.changed#5fafff
entity.name.function, support.function, meta.function#5fafaf