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#3E4159a8
  • activityBar.foreground#D9DBE9
  • activityBarBadge.background#9CA1B5b7
  • button.background#8133FF
  • button.foreground#FFFFFF
  • button.secondaryHoverBackground#8B449350
  • editor.background#2B2E42
  • editor.foreground#D9DBE9
  • editor.hoverHighlightBackground#A5B1CC
  • editor.lineHighlightBackground#3E4159
  • editor.selectionBackground#52566F
  • editorBracketMatch.background#FFCC66
  • editorBracketMatch.border#FFCC66
  • editorCursor.foreground#FFCC66
  • editorError.foreground#FF7B7B
  • editorGroup.border#3E4159
  • editorGroup.dropBackground#52566F
  • editorGroupHeader.tabsBackground#3E4159
  • editorGutter.addedBackground#B3E5B8
  • editorGutter.background#2B2E42
  • editorGutter.deletedBackground#FF9AA2
  • editorGutter.modifiedBackground#D9DBE982
  • editorHoverWidget.background#2B2E42
  • editorHoverWidget.border#2B2E42
  • editorHoverWidget.statusBarBackground#2B2E42
  • editorLineNumber.activeForeground#D9DBE9
  • editorLineNumber.foreground#9CA1B5
  • editorMarkerNavigation.background#3E4159
  • editorMarkerNavigationError.background#FF7B7B
  • editorMarkerNavigationWarning.background#FFBF75
  • editorOverviewRuler.border#3E4159
  • editorOverviewRuler.findMatchForeground#FFCC66
  • editorOverviewRuler.rangeHighlightForeground#FFCC66
  • editorOverviewRuler.selectionHighlightForeground#FFCC66
  • editorOverviewRuler.wordHighlightForeground#FFCC66
  • editorOverviewRuler.wordHighlightStrongForeground#FFCC66
  • editorRuler.foreground#FFCC66
  • editorSuggestWidget.background#2B2E42
  • editorSuggestWidget.border#2B2E42
  • editorSuggestWidget.foreground#D9DBE9
  • editorSuggestWidget.highlightForeground#FFCC66
  • editorSuggestWidget.selectedBackground#52566F
  • editorWarning.foreground#FFBF75
  • editorWhitespace.foreground#3E4159
  • editorWidget.background#2B2E42
  • editorWidget.border#2B2E42
  • extensionBadge.remoteBackground#9CA1B5ca
  • list.activeSelectionBackground#36394693
  • list.activeSelectionForeground#FFCC66
  • list.focusOutline#2B2E4214
  • list.hoverBackground#665E7A36
  • list.inactiveSelectionBackground#BFA3D01d
  • list.inactiveSelectionForeground#D9DBE9e6
  • notificationCenterHeader.background#3E4159
  • sideBar.background#3E4159
  • sideBar.foreground#D9DBE9
  • sideBarTitle.foreground#D9DBE9
  • statusBar.background#3E4159
  • statusBar.border#3E4159
  • statusBar.debuggingBackground#FF9AA2
  • statusBar.debuggingForeground#D9DBE9
  • statusBar.foreground#D9DBE9
  • statusBarItem.activeBackground#B3E5B8cf
  • statusBarItem.hoverBackground#A5B1CC59
  • statusBarItem.prominentBackground#D9DBE996
  • tab.inactiveBackground#10071d74
  • titleBar.activeBackground#3E4159
  • titleBar.activeForeground#D9DBE9
  • titleBar.inactiveBackground#3E4159
  • titleBar.inactiveForeground#9CA1B5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9CA1B5italic
string#B3E5B8
keyword#FF9AA2bold
entity.name.function#A5B1CC
variable#D9DBE9
constant.numeric#D9DBE9
constant.language.boolean#D9DBE9
storage#A5B1CC
punctuation#D9DBE9
keyword.operator#D9DBE9
punctuation.definition.string#FFCC66
constant#BC88F1E6bold
punctuation.definition.arguments.begin#FFFFFFCC
punctuation.definition.arguments.end#FFFFFFCC
support#D4A5F9
entity.name.type#F1A7F2
markup#F1A7F2
meta#D4A5F9
entity.name.tag#F1A7F2
entity.other.attribute-name#F1A7F2
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