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.markdown—bold
markup.italic.markdown—italic