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#6E609Da8
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#6B6391b7
  • button.background#6B6391
  • button.foreground#FFFFFF
  • button.secondaryHoverBackground#7D78A1
  • editor.background#2E2743
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#6E609D
  • editor.lineHighlightBackground#6E609D
  • editor.selectionBackground#6E609D
  • editorBracketMatch.background#A93F55
  • editorBracketMatch.border#A93F55
  • editorCursor.foreground#FFD6E5
  • editorError.foreground#FF7B7B
  • editorGroup.border#6E609D
  • editorGroup.dropBackground#A93F55
  • editorGroupHeader.tabsBackground#6E609D
  • editorGutter.addedBackground#6B6391
  • editorGutter.background#2E2743
  • editorGutter.deletedBackground#FF7B7B
  • editorGutter.modifiedBackground#A93F55
  • editorHoverWidget.background#6E609D
  • editorHoverWidget.border#6E609D
  • editorHoverWidget.statusBarBackground#6E609D
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#BC88F1
  • editorMarkerNavigation.background#6E609D
  • editorMarkerNavigationError.background#FF7B7B
  • editorMarkerNavigationWarning.background#FFBF75
  • editorOverviewRuler.border#6E609D
  • editorOverviewRuler.findMatchForeground#FFFFFF
  • editorOverviewRuler.rangeHighlightForeground#FFFFFF
  • editorOverviewRuler.selectionHighlightForeground#FFFFFF
  • editorOverviewRuler.wordHighlightForeground#FFFFFF
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#FFFFFF
  • editorSuggestWidget.background#6E609D
  • editorSuggestWidget.border#6E609D
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#A8A8A8
  • editorSuggestWidget.selectedBackground#2E2743
  • editorWarning.foreground#FFBF75
  • editorWhitespace.foreground#7D78A1
  • editorWidget.background#6E609D
  • editorWidget.border#6E609D
  • extensionBadge.remoteBackground#6B6391ca
  • list.activeSelectionBackground#2E274359
  • list.activeSelectionForeground#A8A8A8
  • list.focusOutline#A8A8A814
  • list.hoverBackground#6B639136
  • list.inactiveSelectionBackground#FFFFFF1d
  • list.inactiveSelectionForeground#FFFFFFE6
  • notificationCenterHeader.background#6E609D
  • sideBar.background#6E609D
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#6E609D
  • statusBar.border#6E609D
  • statusBar.debuggingBackground#FF7B7B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBarItem.activeBackground#A93F55cf
  • statusBarItem.hoverBackground#6B639159
  • statusBarItem.prominentBackground#6B639196
  • tab.inactiveBackground#2E2743
  • titleBar.activeBackground#6E609D
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#6E609D
  • titleBar.inactiveForeground#7D78A1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9384A3italic
string#FFA2B1
keyword#FFABCAbold
entity.name.function#FFA2B1
variable#D9DBE9
constant.numeric#D9DBE9
constant.language.boolean#D9DBE9
storage#FFA2B1
punctuation#D9DBE9
keyword.operator#D9DBE9
punctuation.definition.string#FFCC66
constant#BC88F1E6bold
punctuation.definition.arguments.begin#FFFFFFCC
punctuation.definition.arguments.end#FFFFFFCC
support#FFA2B1
entity.name.type#FFA2B1
markup#FFA2B1
meta#FFA2B1
entity.name.tag#FFA2B1
entity.other.attribute-name#FFA2B1
invalid#FF6B6B
diff.added#A9F1A7
diff.removed#FF6B6B
diff.changed#F1A7F2
entity.name.function.decorator#C792EA
entity.name.type.class#B2CCD6
meta.function-call#82AAFF
punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.section.embedded#FFCC66
variable.parameter#89DDFF
constant.language#C792EA
string.regexp#F78C6C
constant.character.escape#89DDFF
support.other.module#82AAFF
variable.parameter.function#89DDFF
meta.function.decorator#82AAFF
variable.other#C792EA