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.

  • actionBar.toggledBackground#dddddd
  • activityBar.activeBorder#005fb8
  • activityBar.background#f8f8f8
  • activityBar.border#e5e5e5
  • activityBar.foreground#1f1f1f
  • activityBar.inactiveForeground#616161
  • activityBarBadge.background#005fb8
  • activityBarBadge.foreground#ffffff
  • badge.background#cccccc
  • badge.foreground#3b3b3b
  • button.background#005fb8
  • button.border#0000001a
  • button.foreground#ffffff
  • button.hoverBackground#0258a8
  • button.secondaryBackground#e5e5e5
  • button.secondaryForeground#3b3b3b
  • button.secondaryHoverBackground#cccccc
  • chat.editedFileForeground#895503
  • chat.slashCommandBackground#d2ecff
  • chat.slashCommandForeground#306ca2
  • checkbox.background#f8f8f8
  • checkbox.border#cecece
  • descriptionForeground#3b3b3b
  • diffEditor.unchangedRegionBackground#f8f8f8
  • dropdown.background#ffffff
  • dropdown.border#cecece
  • dropdown.foreground#3b3b3b
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.foreground#3b3b3b
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.selectionHighlightBackground#add6ff80
  • editorGroup.border#e5e5e5
  • editorGroupHeader.tabsBackground#f8f8f8
  • editorGroupHeader.tabsBorder#e5e5e5
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#005fb8
  • editorIndentGuide.activeBackground1#939393
  • editorIndentGuide.background1#d3d3d3
  • editorLineNumber.activeForeground#171184
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#e5e5e5
  • editorSuggestWidget.background#f8f8f8
  • editorWidget.background#f8f8f8
  • errorForeground#f85149
  • focusBorder#005fb8
  • foreground#3b3b3b
  • icon.foreground#3b3b3b
  • input.background#ffffff
  • input.border#cecece
  • input.foreground#3b3b3b
  • input.placeholderForeground#767676
  • inputOption.activeBackground#bed6ed
  • inputOption.activeBorder#005fb8
  • inputOption.activeForeground#000000
  • keybindingLabel.foreground#3b3b3b
  • list.activeSelectionBackground#e8e8e8
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.focusAndSelectionOutline#005fb8
  • list.hoverBackground#f2f2f2
  • menu.border#cecece
  • menu.selectionBackground#005fb8
  • menu.selectionForeground#ffffff
  • notebook.cellBorderColor#e5e5e5
  • notebook.selectedCellBackground#c8ddf150
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#3b3b3b
  • notifications.background#ffffff
  • notifications.border#e5e5e5
  • notifications.foreground#3b3b3b
  • panel.background#f8f8f8
  • panel.border#e5e5e5
  • panelInput.border#e5e5e5
  • panelTitle.activeBorder#005fb8
  • panelTitle.activeForeground#3b3b3b
  • panelTitle.inactiveForeground#3b3b3b
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#e5e5e5
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#005fb8
  • quickInput.background#f8f8f8
  • quickInput.foreground#3b3b3b
  • searchEditor.textInputBorder#cecece
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#cecece
  • settings.headerForeground#1f1f1f
  • settings.modifiedItemIndicator#bb800966
  • settings.numberInputBorder#cecece
  • settings.textInputBorder#cecece
  • sideBar.background#f8f8f8
  • sideBar.border#e5e5e5
  • sideBar.foreground#3b3b3b
  • sideBarSectionHeader.background#f8f8f8
  • sideBarSectionHeader.border#e5e5e5
  • sideBarSectionHeader.foreground#3b3b3b
  • sideBarTitle.foreground#3b3b3b
  • statusBar.background#f8f8f8
  • statusBar.border#e5e5e5
  • statusBar.debuggingBackground#fd716c
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#005fb8
  • statusBar.foreground#3b3b3b
  • statusBar.noFolderBackground#f8f8f8
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.focusBorder#005fb8
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#005fb8
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#f8f8f8
  • tab.activeBorderTop#005fb8
  • tab.activeForeground#3b3b3b
  • tab.border#e5e5e5
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f8f8f8
  • tab.inactiveForeground#868686
  • tab.lastPinnedBorder#d4d4d4
  • tab.selectedBackground#ffffffa5
  • tab.selectedBorderTop#68a3da
  • tab.selectedForeground#333333b3
  • tab.unfocusedActiveBorder#f8f8f8
  • tab.unfocusedActiveBorderTop#e5e5e5
  • tab.unfocusedHoverBackground#f8f8f8
  • terminal.foreground#3b3b3b
  • terminal.inactiveSelectionBackground#e5ebf1
  • terminal.tab.activeBorder#005fb8
  • terminalCursor.foreground#005fb8
  • textBlockQuote.background#f8f8f8
  • textBlockQuote.border#e5e5e5
  • textCodeBlock.background#f8f8f8
  • textLink.activeForeground#005fb8
  • textLink.foreground#005fb8
  • textPreformat.background#0000001f
  • textPreformat.foreground#3b3b3b
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#f8f8f8
  • titleBar.activeForeground#1e1e1e
  • titleBar.border#e5e5e5
  • titleBar.inactiveBackground#f8f8f8
  • titleBar.inactiveForeground#8b949e
  • welcomePage.tileBackground#f3f3f3
  • widget.border#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#b0b0b0
constant.language#ff00ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#0097b9
constant.regexp#646695
entity.name.tag#ff00ff
entity.name.tag.css#D7BA7D
entity.other.attribute-name#ff8888
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#D7BA7D
invalid#F44747
markup.underlineunderline
markup.bold#ff00ffbold
markup.heading#ff00ffbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#0097b9
markup.deleted#856840
markup.changed#ff00ff
punctuation.definition.quote.begin.markdown#b0b0b0
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#856840
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#ff00ff
meta.preprocessor.string#856840
meta.preprocessor.numeric#0097b9
meta.structure.dictionary.key.python#ff8888
meta.diff.header#ff00ff
storage#ff00ff
storage.type#ff00ff
storage.modifier, keyword.operator.noexcept#ff00ff
string, meta.embedded.assembly#856840
string.tag#856840
string.value#856840
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#ff00ff
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#ff8888
keyword#ff00ff
keyword.control#ff00ff
keyword.operator#D4D4D4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#ff00ff
keyword.other.unit#0097b9
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff00ff
support.function.git-rebase#ff8888
constant.sha.git-rebase#0097b9
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#ff00ff
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#07d100
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#0088FF
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#0088FF
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#ff00ff
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#ff8888
variable.other.constant, variable.other.enummember#ff8888
meta.object-literal.key#ff8888
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#856840
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#856840
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#07d100
keyword.operator.quantifier.regexp#D7BA7D
constant.character#ff00ff
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
string.quoted, string.template#856840
constant.numeric#0097b9
constant.language.boolean#bb00ff
variable.language.this#ff8888bold
constant.language.null, constant.language.undefined#dd88ddbold
variable.other.property#ff8888
support.type.property-name#ff8888
storage.type#ff00ff
storage.modifier#ff00ff
keyword#ff00ff
keyword.operator#666666
keyword.operator.new, keyword.operator.expression#ff00ff
support.type.primitive#00ddffbold
support.type.builtin#00ddffbold
punctuation.definition, punctuation.section, meta.brace#FFFFFF
punctuation.terminator#aaaaaa
punctuation.definition.string#856840
comment, punctuation.definition.comment#b0b0b0italic
entity.name.function#07d100italic
meta.jsx.children#856840
entity.name.tag#00ddff
support.class.component#0088FFbold
entity.other.attribute-name#ff8888
entity.name.section.markdown#0088FF
markup.inline.raw.string#856840
ergonomic-theme by hw104 - VS Code Theme