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#21232Fa8
  • activityBar.foreground#BFA3D0
  • activityBarBadge.background#8D86A7b7
  • button.background#8133FF
  • button.foreground#FFFFFF
  • button.secondaryHoverBackground#8B449350
  • editor.background#1A1C24
  • editor.foreground#BFA3D0
  • editor.hoverHighlightBackground#AC86C3
  • editor.lineHighlightBackground#21232F
  • editor.selectionBackground#2F3140
  • editorBracketMatch.background#483D5A
  • editorBracketMatch.border#483D5A
  • editorCursor.foreground#8D86A7
  • editorError.foreground#FF7B7B
  • editorGroup.border#21232F
  • editorGroup.dropBackground#2F3140
  • editorGroupHeader.tabsBackground#21232F
  • editorGutter.addedBackground#C7B8E0
  • editorGutter.background#1A1C24
  • editorGutter.deletedBackground#E08C98
  • editorGutter.modifiedBackground#BFA3D082
  • editorHoverWidget.background#1A1C24
  • editorHoverWidget.border#1A1C24
  • editorHoverWidget.statusBarBackground#1A1C24
  • editorLineNumber.activeForeground#BFA3D0
  • editorLineNumber.foreground#6C79A7
  • editorMarkerNavigation.background#21232F
  • editorMarkerNavigationError.background#FF7B7B
  • editorMarkerNavigationWarning.background#FFBF75
  • editorOverviewRuler.border#21232F
  • editorOverviewRuler.findMatchForeground#8D86A7
  • editorOverviewRuler.rangeHighlightForeground#8D86A7
  • editorOverviewRuler.selectionHighlightForeground#8D86A7
  • editorOverviewRuler.wordHighlightForeground#8D86A7
  • editorOverviewRuler.wordHighlightStrongForeground#8D86A7
  • editorRuler.foreground#8D86A7
  • editorSuggestWidget.background#1A1C24
  • editorSuggestWidget.border#1A1C24
  • editorSuggestWidget.foreground#BFA3D0
  • editorSuggestWidget.highlightForeground#8D86A7
  • editorSuggestWidget.selectedBackground#2F3140
  • editorWarning.foreground#FFBF75
  • editorWhitespace.foreground#21232F
  • editorWidget.background#1A1C24
  • editorWidget.border#1A1C24
  • extensionBadge.remoteBackground#C39BD0ca
  • list.activeSelectionBackground#4E547393
  • list.activeSelectionForeground#DB89F9
  • list.focusOutline#82159B14
  • list.hoverBackground#9167A436
  • list.inactiveSelectionBackground#C26CD71D
  • list.inactiveSelectionForeground#D9A2DDE6
  • notificationCenterHeader.background#21232F
  • sideBar.background#21232F
  • sideBar.foreground#BFA3D0
  • sideBarTitle.foreground#BFA3D0
  • statusBar.background#21232F
  • statusBar.border#21232F
  • statusBar.debuggingBackground#E08C98
  • statusBar.debuggingForeground#BFA3D0
  • statusBar.foreground#BFA3D0
  • statusBarItem.activeBackground#C7B8E0cf
  • statusBarItem.hoverBackground#AC86C359
  • statusBarItem.prominentBackground#D6A8D296
  • tab.inactiveBackground#10071d74
  • titleBar.activeBackground#21232F
  • titleBar.activeForeground#BFA3D0
  • titleBar.inactiveBackground#21232F
  • titleBar.inactiveForeground#6C79A7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8F79C7italic
string#B7A1DB
keyword#ED9AE9bold
entity.name.function#9DC3F0
variable#BFA3D0
constant.numeric#BFA3D0
constant.language.boolean#BFA3D0
storage#9AC2ED
punctuation#BFA3D0
keyword.operator#BFA3D0
punctuation.definition.string#AC79B8DB
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