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.activeBorder#abe9b3
  • activityBar.background#191C23
  • activityBar.foreground#d1d1d1
  • activityBarBadge.background#abe9b3
  • activityBarBadge.foreground#191C23
  • breadcrumb.activeSelectionForeground#abe9b3
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#d1d1d1
  • button.background#abe9b3
  • button.foreground#191C23
  • button.hoverBackground#a1f19b
  • button.secondaryBackground#191C23
  • button.secondaryForeground#d1d1d1
  • button.secondaryHoverBackground#272c37
  • debugToolBar.background#191C23
  • diffEditor.diagonalFill#cccccc33
  • diffEditor.insertedTextBackground#abe9b333
  • diffEditor.removedTextBackground#f4877133
  • dropdown.background#191C23
  • dropdown.border#171F21
  • dropdown.foreground#f0f0f0
  • editor.background#191C23
  • editor.findMatchBackground#171F21
  • editor.findMatchHighlightBackground#171F2177
  • editor.foreground#d1d1d1
  • editor.hoverHighlightBackground#abe9b333
  • editor.inactiveSelectionBackground#abe9b333
  • editor.lineHighlightBorder#191C23
  • editor.selectionBackground#abe9b333
  • editor.selectionHighlightBackground#171F2177
  • editor.wordHighlightStrongBackground#abe9b333
  • editorBracketHighlight.foreground1#CAD2C5
  • editorBracketHighlight.foreground2#B9C8B7
  • editorBracketHighlight.foreground3#d3c6aa
  • editorBracketHighlight.foreground4#abe9b3
  • editorBracketHighlight.foreground5#89b4fa
  • editorBracketHighlight.foreground6#52796F
  • editorCursor.foreground#abe9b3
  • editorError.foreground#f38ba8
  • editorGroupHeader.tabsBackground#191C23
  • editorGutter.addedBackground#abe9b3
  • editorGutter.modifiedBackground#abe9b333
  • editorHoverWidget.background#191C23
  • editorHoverWidget.border#171F21
  • editorHoverWidget.foreground#cccccc
  • editorHoverWidget.statusBarBackground#191C23
  • editorIndentGuide.activeBackground1#191C23
  • editorIndentGuide.background1#404040
  • editorLineNumber.foreground#d1d1d177
  • editorLink.activeForeground#abe9b3
  • editorOverviewRuler.addedForeground#abe9b399
  • editorOverviewRuler.border#ff000000
  • editorOverviewRuler.findMatchForeground#cca70077
  • editorOverviewRuler.incomingContentForeground#d3c6aa50
  • editorOverviewRuler.modifiedForeground#d3c6aa99
  • editorOverviewRuler.rangeHighlightForeground#d3c6aa50
  • editorPane.background#191C23
  • editorSuggestWidget.background#191C23
  • editorSuggestWidget.highlightForeground#d3c6aa
  • editorUnnecessaryCode.opacity#00000088
  • editorWidget.background#191C23
  • extensionBadge.remoteBackground#d3c6aa99
  • extensionButton.prominentBackground#abe9b3
  • focusBorder#abe9b333
  • input.background#191C23
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#abe9b333
  • inputOption.activeBorder#007acc00
  • inputValidation.infoBackground#191C23
  • inputValidation.infoBorder#d3c6aa50
  • keybindingLabel.background#d3c6aa2b
  • list.activeSelectionBackground#abe9b333
  • list.activeSelectionForeground#ffffffee
  • list.dropBackground#383b3d
  • list.filterMatchBackground#abe9b333
  • list.focusBackground#abe9b333
  • list.focusForeground#ffffff
  • list.focusOutline#d3c6aa50
  • list.highlightForeground#abe9b333
  • list.hoverBackground#abe9b333
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#abe9b333
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#abe9b333
  • menu.background#191C23
  • menu.foreground#cccccc
  • menu.selectionBackground#abe9b333
  • menubar.selectionBackground#191C23
  • menubar.selectionBorder#373241
  • menubar.selectionForeground#ffffff
  • minimap.selectionHighlight#d3c6aa50
  • minimapGutter.modifiedBackground#d3c6aa50
  • notebook.cellInsertionIndicator#d3c6aa99
  • notebook.focusedEditorBorder#d3c6aa50
  • notificationLink.foreground#d3c6aa50
  • notifications.background#191C23
  • panel.background#191C23
  • peekView.border#d3c6aa
  • peekViewEditor.background#191C23
  • peekViewResult.matchHighlightBackground#cca70086
  • pickerGroup.border#d3c6aa50
  • pickerGroup.foreground#d3c6aa50
  • progressBar.background#d3c6aa99
  • scrollbarSlider.activeBackground#abe9b333
  • scrollbarSlider.background#abe9b333
  • scrollbarSlider.hoverBackground#abe9b3
  • searchEditor.findMatchBackground#cca70078
  • settings.checkboxBorder#171F21
  • settings.modifiedItemIndicator#d3c6aa
  • settings.numberInputBackground#191C23
  • settings.textInputBackground#191C23
  • sideBar.background#191C23
  • sideBar.border#171F21
  • sideBar.dropBackground#191C23
  • sideBar.foreground#ffffff5b
  • sideBarSectionHeader.background#191C23
  • sideBarSectionHeader.foreground#ffffff8e
  • sideBarTitle.foreground#ffffff2f
  • statusBar.background#191C23
  • statusBar.debuggingBackground#89b4fa
  • statusBar.debuggingForeground#191C23
  • statusBar.foreground#ffffff8f
  • statusBar.noFolderBackground#abe9b3
  • statusBar.noFolderForeground#191C23
  • statusBarItem.errorBackground#f38ba8
  • statusBarItem.errorForeground#191C23
  • statusBarItem.hoverBackground#23283120
  • statusBarItem.prominentBackground#d3c6aa25
  • statusBarItem.remoteBackground#abe9b3
  • symbolIcon.colorForeground#d3c6aa50
  • tab.activeBackground#abe9b333
  • tab.inactiveBackground#191C23
  • terminal.ansiBlack#191C23
  • terminal.ansiBlue#89b4fa
  • terminal.ansiBrightBlack#5A6374
  • terminal.ansiBrightBlue#89b4fa
  • terminal.ansiBrightCyan#89dceb
  • terminal.ansiBrightGreen#abe9b3
  • terminal.ansiBrightMagenta#d699b6
  • terminal.ansiBrightRed#f38ba8
  • terminal.ansiBrightWhite#DCDFE4
  • terminal.ansiBrightYellow#fae3b0
  • terminal.ansiCyan#89dceb
  • terminal.ansiGreen#abe9b3
  • terminal.ansiMagenta#d699b6
  • terminal.ansiRed#f38ba8
  • terminal.ansiWhite#DCDFE4
  • terminal.ansiYellow#fae3b0
  • terminal.border#373241
  • terminal.selectionBackground#d3c6aa50
  • testing.iconSkipped#848484
  • testing.iconUnset#848484
  • textBlockQuote.border#d3c6aa50
  • textLink.activeForeground#d3c6aa50
  • textLink.foreground#d3c6aa99
  • titleBar.activeBackground#191C23
  • titleBar.activeForeground#ffffff5b
  • titleBar.inactiveBackground#191C23
  • titleBar.inactiveForeground#ffffff5b
  • toolbar.hoverBackground#26202E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#cad2c5
emphasisitalic
strongbold
header#52796f
comment#cccccc77italic
constant.language#89b4fa
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#cad2c5
constant.regexp#d3c6aa
entity.name.tag#89b4fa
entity.name.tag.css#D7BA7D
entity.other.attribute-name#cad2c5
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#89b4fabold
markup.heading#89b4fabold
markup.italicitalic
markup.inserted#cad2c5
markup.deleted#f38ba8
markup.changed#89b4fa
punctuation.definition.quote.begin.markdown, entity.name.type.interface#abe9b3
punctuation.definition.list.begin.markdown#89b4fa
markup.inline.raw#f38ba8
punctuation.definition.tag#d3c6aa
meta.preprocessor, entity.name.function.preprocessor#89b4fa
meta.preprocessor.string#f38ba8
meta.preprocessor.numeric#cad2c5
meta.structure.dictionary.key.python#d3c6aa
meta.diff.header#89b4fa
storage#89b4fa
storage.type.function.arrow, meta.objectliteral, meta.brace.round
storage.type.function.arrow, variable.language.super#fae3b0
storage.type, storage.modifier#89b4faitalic
storage.modifier, keyword.operator.noexcept#89b4fa
string, meta.embedded.assembly#f38ba8
string.tag#f38ba8
string.value#f38ba8
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#89b4fa
meta.template.expression#cad2c5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#C4DFFF
keyword#89b4fa
keyword.control#89b4fa
keyword.operator#cad2c5
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#89b4fa
keyword.other.unit#cad2c5
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#89b4fa
support.function.git-rebase#d3c6aa
constant.sha.git-rebase#cad2c5
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#cad2c5
variable.language#89b4faitalic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDCAA
meta.return-type, 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#f8bd96
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#e69875
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#abe9b3
variable, meta.definition.variable.name, support.variable, entity.name.variable, variable.other.constant, variable.other.enummember, meta.object-literal.key#C4DFFF
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#f38ba8
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#f38ba8
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#DCDCAA
keyword.operator.quantifier.regexp#D7BA7D
constant.character#89b4fa
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#89b4fa
token.warn-token#fae3b0
token.error-token#f14c4c
token.debug-token#cad2c5
entity.other.attribute-name.html, meta.decoratoritalic
abelFubu-Dark+ by Abelfubu - VS Code Theme