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#2A2D3Da8
  • activityBar.foreground#D9DBE9
  • activityBarBadge.background#7E85A4b7
  • button.background#4B6CB7
  • button.foreground#FFFFFF
  • button.secondaryHoverBackground#527AB0
  • editor.background#1A1B2A
  • editor.foreground#D9DBE9
  • editor.hoverHighlightBackground#6372B2
  • editor.lineHighlightBackground#2A2D3D
  • editor.selectionBackground#3E4159
  • editorBracketMatch.background#82AAFF
  • editorBracketMatch.border#82AAFF
  • editorCursor.foreground#82AAFF
  • editorError.foreground#FF7B7B
  • editorGroup.border#2A2D3D
  • editorGroup.dropBackground#3E4159
  • editorGroupHeader.tabsBackground#2A2D3D
  • editorGutter.addedBackground#82AAFF
  • editorGutter.background#1A1B2A
  • editorGutter.deletedBackground#FF7B7B
  • editorGutter.modifiedBackground#D9DBE982
  • editorHoverWidget.background#1A1B2A
  • editorHoverWidget.border#1A1B2A
  • editorHoverWidget.statusBarBackground#1A1B2A
  • editorLineNumber.activeForeground#D9DBE9
  • editorLineNumber.foreground#7E85A4
  • editorMarkerNavigation.background#2A2D3D
  • editorMarkerNavigationError.background#FF7B7B
  • editorMarkerNavigationWarning.background#FFBF75
  • editorOverviewRuler.border#2A2D3D
  • editorOverviewRuler.findMatchForeground#82AAFF
  • editorOverviewRuler.rangeHighlightForeground#82AAFF
  • editorOverviewRuler.selectionHighlightForeground#82AAFF
  • editorOverviewRuler.wordHighlightForeground#82AAFF
  • editorOverviewRuler.wordHighlightStrongForeground#82AAFF
  • editorRuler.foreground#82AAFF
  • editorSuggestWidget.background#1A1B2A
  • editorSuggestWidget.border#1A1B2A
  • editorSuggestWidget.foreground#D9DBE9
  • editorSuggestWidget.highlightForeground#82AAFF
  • editorSuggestWidget.selectedBackground#3E4159
  • editorWarning.foreground#FFBF75
  • editorWhitespace.foreground#2A2D3D
  • editorWidget.background#1A1B2A
  • editorWidget.border#1A1B2A
  • extensionBadge.remoteBackground#7E85A4ca
  • list.activeSelectionBackground#36394693
  • list.activeSelectionForeground#82AAFF
  • list.focusOutline#1A1B2A14
  • list.hoverBackground#665E7A36
  • list.inactiveSelectionBackground#4D4D4D1d
  • list.inactiveSelectionForeground#D9DBE9e6
  • notificationCenterHeader.background#2A2D3D
  • sideBar.background#2A2D3D
  • sideBar.foreground#D9DBE9
  • sideBarTitle.foreground#D9DBE9
  • statusBar.background#2A2D3D
  • statusBar.border#2A2D3D
  • statusBar.debuggingBackground#FF7B7B
  • statusBar.debuggingForeground#D9DBE9
  • statusBar.foreground#D9DBE9
  • statusBarItem.activeBackground#82AAFFcf
  • statusBarItem.hoverBackground#6372B259
  • statusBarItem.prominentBackground#D9DBE996
  • tab.inactiveBackground#10071d74
  • titleBar.activeBackground#2A2D3D
  • titleBar.activeForeground#D9DBE9
  • titleBar.inactiveBackground#2A2D3D
  • titleBar.inactiveForeground#7E85A4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
string#8AB6F2—
keyword#78DCE8bold
entity.name.function#FFC29E—
variable#C3E88D—
constant.numeric#FF5370—
constant.language.boolean#C3E88D—
storage#82AAFF—
punctuation#CCCCCC—
keyword.operator#CCCCCC—
punctuation.definition.string#82AAFF—
constant#FFC29Ebold
punctuation.definition.arguments.begin#CCCCCC—
punctuation.definition.arguments.end#CCCCCC—
support#82AAFF—
entity.name.type#78DCE8—
markup#78DCE8—
meta#82AAFF—
entity.name.tag#78DCE8—
entity.other.attribute-name#78DCE8—
invalid#FF5370—
diff.added#C3E88D—
diff.removed#FF5370—
diff.changed#78DCE8—
entity.name.function.decorator#78DCE8—
entity.name.type.class#82AAFF—
meta.function-call#82AAFF—
punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.section.embedded#8AB6F2—
variable.parameter#CCCCCC—
constant.language#FFC29E—
string.regexp#FF5370—
constant.character.escape#CCCCCC—
support.other.module#82AAFF—
variable.parameter.function#CCCCCC—
meta.function.decorator#78DCE8—
variable.other#C3E88D—