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—