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#f6f7fb
  • activityBar.foreground#19a5f0
  • activityBarBadge.background#FF16B0
  • activityBarBadge.foreground#fcfcfc
  • badge.background#FF16B0
  • badge.foreground#fcfcfc
  • breadcrumbPicker.background#e6e9f0
  • button.background#2c9fdd
  • button.foreground#000000
  • button.hoverBackground#00a6ff
  • debugToolBar.background#dbe3f0
  • diffEditor.insertedTextBackground#00809B33
  • diffEditor.removedTextBackground#FF16B033
  • dropdown.background#f6f7fb
  • dropdown.border#cbd2e1
  • editor.background#fcfcfc
  • editor.foreground#222222
  • editorBracketMatch.background#FF16B033
  • editorBracketMatch.border#FF16B0
  • editorCursor.foreground#FF16B0
  • editorError.foreground#FF16B0
  • editorGroup.border#cbd2e1
  • editorGroupHeader.tabsBackground#f6f7fb
  • editorHoverWidget.background#e6e9f0
  • editorHoverWidget.border#cbd2e1
  • editorIndentGuide.activeBackground1#2c9fdd
  • editorIndentGuide.background1#b0c4de
  • editorLineNumber.foreground#7b7f86
  • editorOverviewRuler.border#cbd2e1
  • editorRuler.foreground#3B4D66
  • editorSuggestWidget.background#e6e9f0
  • editorSuggestWidget.border#cbd2e1
  • editorSuggestWidget.selectedBackground#ccd6e4
  • editorWarning.foreground#fcee54
  • editorWidget.background#f6f7fb
  • editorWidget.border#cbd2e1
  • errorForeground#FF16B0
  • extensionButton.prominentBackground#FF16B0
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#2c9fdd
  • gitDecoration.addedResourceForeground#2c9fdd
  • gitDecoration.deletedResourceForeground#FF16B0
  • gitDecoration.ignoredResourceForeground#7b7f86
  • gitDecoration.modifiedResourceForeground#fca054
  • gitDecoration.untrackedResourceForeground#8bd42c
  • input.background#ffffff
  • input.border#cbd2e1
  • input.foreground#222222
  • list.activeSelectionBackground#2c9fdd
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ccd6e4
  • list.highlightForeground#FF16B0
  • list.hoverBackground#ccd6e4
  • list.inactiveSelectionBackground#fdd4f0
  • list.inactiveSelectionForeground#333
  • pickerGroup.border#FF16B0
  • progressBar.background#2c9fdd
  • scrollbar.shadow#cbd2e1
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#bfc7d5
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#f6f7fb
  • sideBar.foreground#888
  • sideBarSectionHeader.background#f6f7fb
  • statusBar.background#f6f7fb
  • statusBar.debuggingBackground#FF16B0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#f6f7fb
  • statusBarItem.hoverBackground#ccd6e4
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#FF16B0
  • tab.border#FF16B0
  • tab.hoverBackground#e6e9f0
  • tab.hoverBorder#FF16B0
  • tab.inactiveBackground#f6f7fb
  • tab.inactiveForeground#b4bac4
  • terminal.foreground#222222
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.foreground#B3F361
  • titleBar.activeBackground#f6f7fb
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#cbd2e1
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#e6e9f0
  • widget.shadow#cbd2e1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8f939bitalic
string.quoted, string.template, punctuation.definition.string#bd6dd9
string.template meta.embedded.line#2c9fdd
variable, entity.name.variable#838de9
variable.language, variable.other.object.js#2c9fdd
variable.parameter#838de9
storage.type, storage.modifier#FF16B0
constant#838de9
string.regexp#838de9
meta.jsx.children.js, meta.property-value.css, text.html.derivative#2c9fdd
constant.numeric#FF16B0
constant.language#838de9
constant.character.escape#FFFFFF
entity.name#2c9fdd
entity.name.tag#2c9fdd
punctuation.definition.tag#2c9fdd
entity.other.attribute-name#838de9
entity.name.type#2c9fdd
entity.other.inherited-class#2c9fdd
entity.name.function, variable.function#2c9fdd
keyword#FF16B0
keyword.control#FF16B0
keyword.operator#FF16B0
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FF16B0
keyword.other.unit#838de9
support#2c9fdd
support.function#2c9fdd
support.variable#838de9
meta.object-literal.key, support.type.property-name#2c9fdd
variable.other.property.js#FF16B0
punctuation.separator.key-value#FF16B0
punctuation.section.embedded#FF16B0
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF16B0
support.type.property-name.css, support.type.vendored.property-name.css#FF16B0
constant.other.color#FF16B0
support.constant.font-name#838de9
entity.other.attribute-name.id#FF16B0
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#FF16B0
markup.heading, entity.name.section#838de9
markup.quote#FF407B
beginning.punctuation.definition.list#838de9
markup.underline.link#F2F2F2
string.other.link.description#838de9
meta.function-call.generic.python#2c9fdd
storage.type.cs#FF16B0
entity.name.variable.local.cs#838de9
entity.name.variable.field.cs, entity.name.variable.property.cs#838de9
source.cpp keyword.operator#FF16B0
punctuation.definition.heading.markdown#96a0ff7c
punctuation.definition.bold.markdown#ff16b17a
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic
1986 by Brian Canzanella - VS Code Theme