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#6E609Da8
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#6B6391b7
  • button.background#6B6391
  • button.foreground#FFFFFF
  • button.secondaryHoverBackground#7D78A1
  • editor.background#2E2743
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#6E609D
  • editor.lineHighlightBackground#6E609D
  • editor.selectionBackground#6E609D
  • editorBracketMatch.background#A93F55
  • editorBracketMatch.border#A93F55
  • editorCursor.foreground#FFD6E5
  • editorError.foreground#FF7B7B
  • editorGroup.border#6E609D
  • editorGroup.dropBackground#A93F55
  • editorGroupHeader.tabsBackground#6E609D
  • editorGutter.addedBackground#6B6391
  • editorGutter.background#2E2743
  • editorGutter.deletedBackground#FF7B7B
  • editorGutter.modifiedBackground#A93F55
  • editorHoverWidget.background#6E609D
  • editorHoverWidget.border#6E609D
  • editorHoverWidget.statusBarBackground#6E609D
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#BC88F1
  • editorMarkerNavigation.background#6E609D
  • editorMarkerNavigationError.background#FF7B7B
  • editorMarkerNavigationWarning.background#FFBF75
  • editorOverviewRuler.border#6E609D
  • editorOverviewRuler.findMatchForeground#FFFFFF
  • editorOverviewRuler.rangeHighlightForeground#FFFFFF
  • editorOverviewRuler.selectionHighlightForeground#FFFFFF
  • editorOverviewRuler.wordHighlightForeground#FFFFFF
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF
  • editorRuler.foreground#FFFFFF
  • editorSuggestWidget.background#6E609D
  • editorSuggestWidget.border#6E609D
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#A8A8A8
  • editorSuggestWidget.selectedBackground#2E2743
  • editorWarning.foreground#FFBF75
  • editorWhitespace.foreground#7D78A1
  • editorWidget.background#6E609D
  • editorWidget.border#6E609D
  • extensionBadge.remoteBackground#6B6391ca
  • list.activeSelectionBackground#2E274359
  • list.activeSelectionForeground#A8A8A8
  • list.focusOutline#A8A8A814
  • list.hoverBackground#6B639136
  • list.inactiveSelectionBackground#FFFFFF1d
  • list.inactiveSelectionForeground#FFFFFFE6
  • notificationCenterHeader.background#6E609D
  • sideBar.background#6E609D
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#6E609D
  • statusBar.border#6E609D
  • statusBar.debuggingBackground#FF7B7B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBarItem.activeBackground#A93F55cf
  • statusBarItem.hoverBackground#6B639159
  • statusBarItem.prominentBackground#6B639196
  • tab.inactiveBackground#2E2743
  • titleBar.activeBackground#6E609D
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#6E609D
  • titleBar.inactiveForeground#7D78A1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9384A3italic
string#FFA2B1—
keyword#FFABCAbold
entity.name.function#FFA2B1—
variable#D9DBE9—
constant.numeric#D9DBE9—
constant.language.boolean#D9DBE9—
storage#FFA2B1—
punctuation#D9DBE9—
keyword.operator#D9DBE9—
punctuation.definition.string#FFCC66—
constant#BC88F1E6bold
punctuation.definition.arguments.begin#FFFFFFCC—
punctuation.definition.arguments.end#FFFFFFCC—
support#FFA2B1—
entity.name.type#FFA2B1—
markup#FFA2B1—
meta#FFA2B1—
entity.name.tag#FFA2B1—
entity.other.attribute-name#FFA2B1—
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—
ThemeDatabase All Themes by enes ozturk - VS Code Theme