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#7fbbb3bb
  • activityBar.background#1e222a
  • activityBar.foreground#ffffffbb
  • activityBarBadge.background#7fbbb3
  • activityBarBadge.foreground#1e222a
  • breadcrumb.activeSelectionForeground#89d185
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffffff23
  • button.background#d3c6aa50
  • button.hoverBackground#d3c6aa99
  • button.secondaryHoverBackground#232831
  • debugToolBar.background#1e222a
  • diffEditor.diagonalFill#cccccc33
  • diffEditor.insertedTextBackground#89d18533
  • diffEditor.removedTextBackground#f4877133
  • dropdown.background#1e222a
  • editor.background#1e222a
  • editor.findMatchBackground#515c6a
  • editor.findMatchHighlightBackground#d3c6aa50
  • editor.foreground#cad2c5
  • editor.hoverHighlightBackground#d3c6aa50
  • editor.inactiveSelectionBackground#d3c6aa20
  • editor.lineHighlightBorder#1e222a00
  • editor.selectionBackground#d3c6aa30
  • editor.selectionHighlightBackground#d3c6aa80
  • editor.wordHighlightStrongBackground#d3c6aa50
  • editorBracketHighlight.foreground1#CAD2C5
  • editorBracketHighlight.foreground2#B9C8B7
  • editorBracketHighlight.foreground3#d3c6aa
  • editorBracketHighlight.foreground4#a7c080
  • editorBracketHighlight.foreground5#7fbbb3
  • editorBracketHighlight.foreground6#52796F
  • editorCursor.foreground#7fbbb3
  • editorError.foreground#e06c75
  • editorGroupHeader.tabsBackground#1e222a
  • editorGutter.addedBackground#89d185
  • editorGutter.modifiedBackground#d3c6aa50
  • editorHoverWidget.background#1e222a
  • editorHoverWidget.border#343b41
  • editorHoverWidget.foreground#cccccc
  • editorHoverWidget.statusBarBackground#1e222a
  • editorIndentGuide.activeBackground#1e222a
  • editorIndentGuide.background#404040
  • editorLineNumber.foreground#ffffff23
  • editorLink.activeForeground#4e94ce
  • editorOverviewRuler.addedForeground#89d18599
  • editorOverviewRuler.border#ff000000
  • editorOverviewRuler.findMatchForeground#cca700
  • editorOverviewRuler.incomingContentForeground#d3c6aa50
  • editorOverviewRuler.modifiedForeground#d3c6aa99
  • editorOverviewRuler.rangeHighlightForeground#d3c6aa50
  • editorPane.background#1e222a
  • editorSuggestWidget.background#1e222a
  • editorSuggestWidget.highlightForeground#d3c6aa
  • editorUnnecessaryCode.opacity#00000088
  • editorWidget.background#1e222a
  • extensionBadge.remoteBackground#d3c6aa99
  • extensionButton.prominentBackground#89d185
  • focusBorder#d3c6aa50
  • input.background#1e222a
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#d3c6aa50
  • inputOption.activeBorder#007acc00
  • inputValidation.infoBackground#1e222a
  • inputValidation.infoBorder#d3c6aa50
  • keybindingLabel.background#d3c6aa2b
  • list.activeSelectionBackground#d3c6aa30
  • list.activeSelectionForeground#ffffffee
  • list.dropBackground#383b3d
  • list.filterMatchBackground#d3c6aa60
  • list.focusBackground#d3c6aa60
  • list.focusForeground#ffffff
  • list.focusOutline#d3c6aa50
  • list.highlightForeground#d3c6aa50
  • list.hoverBackground#d3c6aa30
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#d3c6aa50
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#d3c6aa60
  • menu.background#1e222a
  • menu.foreground#cccccc
  • menu.selectionBackground#d3c6aa50
  • menubar.selectionBackground#1e222a
  • menubar.selectionBorder#373241
  • menubar.selectionForeground#ffffff
  • minimap.selectionHighlight#d3c6aa50
  • minimapGutter.modifiedBackground#d3c6aa50
  • notebook.cellInsertionIndicator#d3c6aa99
  • notebook.focusedEditorBorder#d3c6aa50
  • notificationLink.foreground#d3c6aa50
  • notifications.background#1e222a
  • panel.background#1e222a
  • peekView.border#d3c6aa
  • peekViewEditor.background#1e222a
  • peekViewResult.matchHighlightBackground#cca70086
  • pickerGroup.border#d3c6aa50
  • pickerGroup.foreground#d3c6aa50
  • progressBar.background#d3c6aa99
  • scrollbarSlider.activeBackground#d3c6aa50
  • scrollbarSlider.background#d3c6aa20
  • scrollbarSlider.hoverBackground#d3c6aa30
  • searchEditor.findMatchBackground#cca70078
  • settings.checkboxBorder#d3c6aa50
  • settings.modifiedItemIndicator#d3c6aa
  • settings.numberInputBackground#1e222a
  • settings.textInputBackground#1e222a
  • sideBar.background#1e222a
  • sideBar.border#373241
  • sideBar.dropBackground#1e222a
  • sideBar.foreground#ffffff5b
  • sideBarSectionHeader.background#1e222a
  • sideBarSectionHeader.foreground#ffffff8e
  • sideBarTitle.foreground#ffffff2f
  • statusBar.background#1e222a
  • statusBar.debuggingBackground#7fbbb3
  • statusBar.debuggingForeground#1e222a
  • statusBar.foreground#ffffff8f
  • statusBar.noFolderBackground#d3c6aa
  • statusBar.noFolderForeground#1e222a
  • statusBarItem.hoverBackground#23283120
  • statusBarItem.prominentBackground#d3c6aa25
  • statusBarItem.remoteBackground#d3c6aa
  • symbolIcon.colorForeground#d3c6aa50
  • tab.activeBackground#d3c6aa25
  • tab.inactiveBackground#1e222a
  • terminal.ansiBlack#1e222a
  • terminal.ansiBlue#7fbbb3
  • terminal.ansiBrightBlack#5A6374
  • terminal.ansiBrightBlue#7fbbb3
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#1e222a
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#DCDFE4
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#1e222a
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#DCDFE4
  • terminal.ansiYellow#E5C07B
  • terminal.border#373241
  • terminal.selectionBackground#d3c6aa50
  • testing.iconSkipped#848484
  • testing.iconUnset#848484
  • textBlockQuote.border#d3c6aa50
  • textLink.activeForeground#d3c6aa50
  • textLink.foreground#d3c6aa99
  • titleBar.activeBackground#1e222a
  • titleBar.activeForeground#ffffff5b
  • titleBar.inactiveBackground#1e222a
  • titleBar.inactiveForeground#ffffff5b
  • toolbar.hoverBackground#d3c6aa50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#cad2c5
emphasisitalic
strongbold
header#52796f
comment#708072b0italic
constant.language#7fbbb3
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#cad2c5
constant.regexp#d3c6aa
entity.name.tag#7fbbb3
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#7fbbb3bold
markup.heading#7fbbb3bold
markup.italicitalic
markup.inserted#cad2c5
markup.deleted#e67e80
markup.changed#7fbbb3
punctuation.definition.quote.begin.markdown#a7c080
punctuation.definition.list.begin.markdown#7fbbb3
markup.inline.raw#e67e80
punctuation.definition.tag#d3c6aa
meta.preprocessor, entity.name.function.preprocessor#7fbbb3
meta.preprocessor.string#e67e80
meta.preprocessor.numeric#cad2c5
meta.structure.dictionary.key.python#d3c6aa
meta.diff.header#7fbbb3
storage#7fbbb3
storage.type.function.arrow, meta.objectliteral, meta.brace.round
storage.type.function.arrow, variable.language.super#E5C07B
storage.type, storage.modifier#7fbbb3italic
storage.modifier, keyword.operator.noexcept#7fbbb3
string, meta.embedded.assembly#e67e80
string.tag#e67e80
string.value#e67e80
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#7fbbb3
meta.template.expression#cad2c5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#d3c6aa
keyword#7fbbb3
keyword.control#7fbbb3
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#7fbbb3
keyword.other.unit#cad2c5
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#7fbbb3
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#7fbbb3italic
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#dbbc7f
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#a7c080italic
variable, meta.definition.variable.name, support.variable, entity.name.variable#d3c6aa
variable.other.constant, variable.other.enummember#d3c6aa
meta.object-literal.key#d3c6aa
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#e67e80
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#e67e80
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#7fbbb3
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#7fbbb3
token.warn-token#E5C07B
token.error-token#f14c4c
token.debug-token#cad2c5
entity.other.attribute-name.html, meta.decoratoritalic