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#3E384Fa8
  • activityBar.foreground#DADADA
  • activityBarBadge.background#6B6391b7
  • button.background#6B6391
  • button.foreground#FFFFFF
  • button.secondaryHoverBackground#7D78A1
  • editor.background#1A1A1A
  • editor.foreground#E0E0E0
  • editor.hoverHighlightBackground#3D3D3D
  • editor.lineHighlightBackground#333333
  • editor.selectionBackground#363636
  • editorBracketMatch.background#4D465E
  • editorBracketMatch.border#4D465E
  • editorCursor.foreground#FFFFFF
  • editorError.foreground#FF7B7B
  • editorGroup.border#3E384F
  • editorGroup.dropBackground#4D465E
  • editorGroupHeader.tabsBackground#3E384F
  • editorGutter.addedBackground#6B6391
  • editorGutter.background#1A1A1A
  • editorGutter.deletedBackground#FF7B7B
  • editorGutter.modifiedBackground#7D78A182
  • editorHoverWidget.background#3E384F
  • editorHoverWidget.border#3E384F
  • editorHoverWidget.statusBarBackground#3E384F
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#666666
  • editorMarkerNavigation.background#3E384F
  • editorMarkerNavigationError.background#FF7B7B
  • editorMarkerNavigationWarning.background#FFBF75
  • editorOverviewRuler.border#333333
  • editorOverviewRuler.findMatchForeground#FFFFFF
  • editorOverviewRuler.rangeHighlightForeground#FFFFFF
  • editorOverviewRuler.selectionHighlightForeground#FFFFFF
  • editorOverviewRuler.wordHighlightForeground#FFFFFF
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#FFFFFF
  • editorSuggestWidget.background#3E384F
  • editorSuggestWidget.border#3E384F
  • editorSuggestWidget.foreground#DADADA
  • editorSuggestWidget.highlightForeground#A8A8A8
  • editorSuggestWidget.selectedBackground#423D52
  • editorWarning.foreground#FFBF75
  • editorWhitespace.foreground#555555
  • editorWidget.background#3E384F
  • editorWidget.border#3E384F
  • extensionBadge.remoteBackground#6B6391ca
  • list.activeSelectionBackground#423D5293
  • list.activeSelectionForeground#A8A8A8
  • list.focusOutline#A8A8A814
  • list.hoverBackground#6B639136
  • list.inactiveSelectionBackground#DADADA1d
  • list.inactiveSelectionForeground#DADADAE6
  • notificationCenterHeader.background#3E384F
  • sideBar.background#3E384F
  • sideBar.foreground#DADADA
  • sideBarTitle.foreground#DADADA
  • statusBar.background#3E384F
  • statusBar.border#3E384F
  • statusBar.debuggingBackground#FF7B7B
  • statusBar.debuggingForeground#DADADA
  • statusBar.foreground#DADADA
  • statusBarItem.activeBackground#4D465Ecf
  • statusBarItem.hoverBackground#6B639159
  • statusBarItem.prominentBackground#6B639196
  • tab.inactiveBackground#1A1A1A74
  • titleBar.activeBackground#3E384F
  • titleBar.activeForeground#DADADA
  • titleBar.inactiveBackground#3E384F
  • titleBar.inactiveForeground#7D78A1

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—