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—