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#2B3040
  • activityBar.border#262936
  • activityBar.foreground#c6d0f5
  • activityBar.inactiveForeground#99A3C4
  • activityBarBadge.background#ca9ee6
  • activityBarBadge.foreground#000000
  • badge.background#ca9ee6
  • badge.foreground#000000
  • button.background#ca9ee6
  • button.foreground#000000
  • button.hoverBackground#8bb4ff
  • button.secondaryBackground#31374A
  • button.secondaryForeground#c6d0f5
  • button.secondaryHoverBackground#383F54
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • disabledForeground#51576D
  • dropdown.background#303446
  • dropdown.border#262936
  • dropdown.foreground#c6d0f5
  • editor.background#303446
  • editor.findMatchBackground#ca9ee644
  • editor.findMatchHighlightBackground#ca9ee622
  • editor.foreground#c6d0f5
  • editor.hoverHighlightBackground#ca9ee610
  • editor.lineHighlightBackground#3A405566
  • editor.selectionBackground#ca9ee622
  • editor.selectionHighlightBackground#ca9ee610
  • editor.wordHighlightBackground#ca9ee610
  • editor.wordHighlightStrongBackground#ca9ee622
  • editorCursor.foreground#ca9ee6
  • editorError.foreground#f28fad
  • editorGroup.border#262936
  • editorGroupHeader.tabsBackground#2B3040
  • editorGroupHeader.tabsBorder#262936
  • editorGutter.background#303446
  • editorHoverWidget.background#353A4C
  • editorHoverWidget.border#ca9ee6
  • editorIndentGuide.activeBackground1#ca9ee6
  • editorIndentGuide.background1#505873
  • editorInfo.foreground#8bb4ff
  • editorLineNumber.activeForeground#babbf1
  • editorLineNumber.foreground#96A0BE
  • editorSuggestWidget.background#353A4C
  • editorSuggestWidget.border#262936
  • editorSuggestWidget.foreground#c6d0f5
  • editorSuggestWidget.selectedBackground#31374A
  • editorWarning.foreground#e5c890
  • editorWhitespace.foreground#51576D
  • editorWidget.background#353A4C
  • editorWidget.border#262936
  • focusBorder#ca9ee6
  • foreground#c6d0f5
  • gitDecoration.addedResourceForeground#a6d189
  • gitDecoration.conflictingResourceForeground#e5c890
  • gitDecoration.deletedResourceForeground#f28fad
  • gitDecoration.ignoredResourceForeground#99A3C4
  • gitDecoration.modifiedResourceForeground#e5c890
  • gitDecoration.untrackedResourceForeground#a6d189
  • input.background#303446
  • input.border#262936
  • input.foreground#c6d0f5
  • input.placeholderForeground#7E86A8
  • inputOption.activeBorder#ca9ee6
  • list.activeSelectionBackground#434A6199
  • list.activeSelectionForeground#c6d0f5
  • list.focusBackground#31374A
  • list.focusForeground#c6d0f5
  • list.highlightForeground#ca9ee6
  • list.hoverBackground#383F54
  • list.hoverForeground#c6d0f5
  • list.inactiveSelectionBackground#434A6199
  • list.inactiveSelectionForeground#c6d0f5
  • menu.background#353A4C
  • menu.border#262936
  • menu.foreground#c6d0f5
  • menu.selectionBackground#31374A
  • menu.selectionForeground#c6d0f5
  • menubar.selectionBackground#31374A
  • menubar.selectionBorder#262936
  • menubar.selectionForeground#c6d0f5
  • minimap.background#303446
  • panel.background#2B3040
  • panel.border#262936
  • panelTitle.activeBorder#ca9ee6
  • panelTitle.activeForeground#c6d0f5
  • panelTitle.inactiveForeground#99A3C4
  • pickerGroup.border#262936
  • pickerGroup.foreground#ca9ee6
  • quickInput.background#353A4C
  • quickInput.foreground#c6d0f5
  • quickInputList.focusBackground#31374A
  • quickInputList.focusForeground#c6d0f5
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#717A9699
  • scrollbarSlider.background#59617A66
  • scrollbarSlider.hoverBackground#717A9699
  • settings.checkboxBackground#303446
  • settings.checkboxBorder#262936
  • settings.checkboxForeground#c6d0f5
  • settings.dropdownBackground#303446
  • settings.dropdownBorder#262936
  • settings.dropdownForeground#c6d0f5
  • settings.focusedRowBackground#31374A
  • settings.focusedRowBorder#ca9ee6
  • settings.headerBorder#262936
  • settings.headerForeground#c6d0f5
  • settings.modifiedItemIndicator#ca9ee6
  • settings.numberInputBackground#303446
  • settings.numberInputBorder#262936
  • settings.numberInputForeground#c6d0f5
  • settings.rowHoverBackground#383F54
  • settings.settingsHeaderHoverForeground#c6d0f5
  • settings.textInputBackground#303446
  • settings.textInputBorder#262936
  • settings.textInputForeground#c6d0f5
  • sideBar.background#2B3040
  • sideBar.border#262936
  • sideBar.foreground#c6d0f5
  • sideBarSectionHeader.background#2B3040
  • sideBarSectionHeader.border#262936
  • sideBarSectionHeader.foreground#c6d0f5
  • sideBarTitle.foreground#c6d0f5
  • statusBar.background#2B3040
  • statusBar.border#262936
  • statusBar.foreground#c6d0f5
  • statusBar.noFolderBackground#2B3040
  • statusBar.noFolderForeground#c6d0f5
  • tab.activeBackground#31374A
  • tab.activeBorderTop#262936
  • tab.activeForeground#c6d0f5
  • tab.activeModifiedBorder#ca9ee6
  • tab.border#262936
  • tab.hoverBackground#383F54
  • tab.hoverForeground#c6d0f5
  • tab.inactiveBackground#2B3040
  • tab.inactiveForeground#99A3C4
  • tab.inactiveModifiedBorder#7E86A8
  • terminal.ansiBlack#838BA7
  • terminal.ansiBlue#8caaee
  • terminal.ansiBrightBlack#99A3C4
  • terminal.ansiBrightBlue#8caaee
  • terminal.ansiBrightCyan#81c8be
  • terminal.ansiBrightGreen#a6d189
  • terminal.ansiBrightMagenta#f4b8e4
  • terminal.ansiBrightRed#e78284
  • terminal.ansiBrightWhite#c6d0f5
  • terminal.ansiBrightYellow#e5c890
  • terminal.ansiCyan#81c8be
  • terminal.ansiGreen#a6d189
  • terminal.ansiMagenta#f4b8e4
  • terminal.ansiRed#e78284
  • terminal.ansiWhite#b5bfe2
  • terminal.ansiYellow#e5c890
  • terminal.background#303446
  • terminal.foreground#c6d0f5
  • terminal.selectionBackground#ca9ee622
  • titleBar.activeBackground#2B3040
  • titleBar.activeForeground#c6d0f5
  • titleBar.inactiveBackground#262936
  • titleBar.inactiveForeground#99A3C4
  • window.activeBorder#262936
  • window.inactiveBorder#262936

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation, comment.line#9aa0b8italic
variable, variable.other, variable.object#c6d0f5—
variable.language, variable.language.this, variable.language.self, variable.language.super#81c8be—
variable.other.readwrite.instance, variable.other.enummember#ca9ee6—
variable.parameter, variable.parameter.function, meta.function.parameters variable#f2b5a8—
variable.other.property, variable.other.member, variable.other.object.property, support.variable.property#aab8ff—
constant, constant.numeric, constant.language, constant.character, variable.other.constant#ef9f76—
string, string.quoted, punctuation.definition.string#a6d189—
string.regexp, constant.character.escape#99d1db—
punctuation.definition.template-expression#ca9ee6—
entity.name.namespace, entity.name.module, entity.name.package, support.module#85c1dc—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#e5c890—
support.type.builtin, storage.type.builtin, storage.type.primitive#e5c890—
entity.name.function.macro, support.function.macro#f4b8e4—
entity.name.function, support.function, variable.function, meta.function-call#8bb4ff—
entity.other.attribute-name, entity.other.attribute-name.html, meta.annotation, storage.type.annotation, punctuation.definition.annotation#f28fad—
keyword, keyword.control, keyword.operator.new, storage.modifier, storage.type.function#ca9ee6—
keyword.operator, keyword.operator.expression, punctuation.accessor#a5adce—
punctuation, punctuation.definition.block, punctuation.definition.parameters, punctuation.section, meta.brace#969bb2—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json#aab8ff—
markup.heading, entity.name.section#8bb4ffbold
markup.bold#f2b5a8bold
markup.italic#f2b5a8italic
markup.underline.link#8bb4ffitalic
markup.inline.raw, markup.raw.block, markup.fenced_code.block#a6d189—
markup.inserted, markup.inserted.diff#a6d189—
markup.deleted, markup.deleted.diff#f28fad—
invalid, invalid.illegal#f28fadbold