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#171717
  • activityBar.border#242424
  • activityBarBadge.background#343434
  • button.background#0971f1
  • button.foreground#ffffff
  • contrastBorder#242424
  • dropdown.background#171717
  • dropdown.border#242424
  • dropdown.foreground#ffffff
  • editor.background#171717
  • editor.foreground#b5b5bc
  • editor.hoverHighlightBackground#343434
  • editor.inactiveSelectionBackground#343434
  • editor.lineHighlightBackground#242424
  • editor.lineHighlightBorder#242424
  • editor.rangeHighlightBackground#242424
  • editor.selectionBackground#3794e050
  • editor.selectionHighlightBackground#242424
  • editor.wordHighlightBackground#343434
  • editor.wordHighlightStrongBackground#545454
  • editorBracketMatch.background#242424
  • editorBracketMatch.border#555555
  • editorCodeLens.foreground#999999
  • editorCursor.background#171717
  • editorCursor.foreground#ffffff
  • editorError.border#242424
  • editorError.foreground#e1270e
  • editorGroup.border#242424
  • editorGroup.dropBackground#3793e01a
  • editorGroup.emptyBackground#171717
  • editorGroupHeader.tabsBackground#171717
  • editorGroupHeader.tabsBorder#242424
  • editorGutter.background#171717
  • editorHoverWidget.background#171717
  • editorHoverWidget.border#242424
  • editorIndentGuide.background#2e2e2e
  • editorLineNumber.activeForeground#e6e6e6
  • editorLineNumber.foreground#757575
  • editorLink.activeForeground#999999
  • editorMarkerNavigation.background#171717
  • editorMarkerNavigationError.background#171717
  • editorMarkerNavigationWarning.background#242424
  • editorOverviewRuler.border#242424
  • editorOverviewRuler.commonContentForeground#242424
  • editorOverviewRuler.currentContentForeground#e1270e
  • editorOverviewRuler.incomingContentForeground#5bc266
  • editorRuler.foreground#999999
  • editorSuggestWidget.background#171717
  • editorSuggestWidget.border#242424
  • editorSuggestWidget.foreground#999999
  • editorSuggestWidget.selectedBackground#242424
  • editorWarning.border#242424
  • editorWarning.foreground#ff453a
  • editorWhitespace.foreground#343434
  • editorWidget.background#171717
  • editorWidget.border#242424
  • errorForeground#e1270e
  • focusBorder#242424
  • foreground#e6e6e6
  • input.background#242424
  • input.border#040404
  • input.foreground#ffffff
  • input.placeholderForeground#999999
  • inputOption.activeBorder#343434
  • inputValidation.errorBorder#e1270e
  • inputValidation.infoBorder#bf5af2
  • inputValidation.warningBorder#fbcc43
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#171717
  • list.errorForeground#e1270e
  • list.focusBackground#242424
  • list.highlightForeground#6cc7f6
  • list.hoverBackground#242424
  • list.inactiveSelectionBackground#242424
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#fbcc43
  • menu.background#171717
  • menu.selectionBackground#242424
  • peekView.border#343434
  • peekViewEditor.background#242424
  • peekViewEditor.matchHighlightBackground#3793e033
  • peekViewResult.background#242424
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#3793e033
  • peekViewResult.selectionBackground#242424
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#242424
  • peekViewTitleDescription.foreground#535bcf
  • peekViewTitleLabel.foreground#ffffff
  • scrollbarSlider.activeBackground#ffffff
  • selection.background#3793e040
  • sideBar.background#171717
  • sideBar.border#242424
  • sideBar.foreground#999999
  • sideBarSectionHeader.background#171717
  • sideBarSectionHeader.border#242424
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#242424
  • statusBar.border#242424
  • statusBar.debuggingBackground#7f1d1d
  • statusBar.debuggingForeground#e7e5e4
  • statusBar.foreground#999
  • statusBar.noFolderBackground#242424
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.prominentBackground#e1270e
  • statusBarItem.prominentHoverBackground#fbcc43
  • tab.activeBackground#171717
  • tab.activeBorder#6cc7f6
  • tab.activeForeground#ffffff
  • tab.border#242424
  • tab.inactiveBackground#171717
  • tab.inactiveForeground#757575
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedInactiveForeground#757575
  • terminal.background#171717
  • terminal.foreground#b5b5bc
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#ffffff
  • titleBar.border#242424
  • titleBar.inactiveBackground#171717
  • titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#b5b5bc
emphasisitalic
strongbold
header#000080
comment#5C6370
constant.language#a76fb7
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#d4a171
constant.regexp#646695
entity.name.tag#E06C75
entity.name.tag.css#d4a171
entity.other.attribute-name#d4a171
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#d4a171
invalid#f44747
markup.underlineunderline
markup.bold#d7ba7dbold
markup.heading#6796e6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#98C379
markup.changed#a76fb7
punctuation.definition.quote.begin.markdown#5C6370
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#98C379
punctuation.definition.tag#a3a3a3f1
meta.preprocessor, entity.name.function.preprocessor#a76fb7
meta.preprocessor.string#98C379
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#b5b5bc
meta.diff.header#a76fb7
storage#a76fb7
storage.type#a76fb7
storage.modifier, keyword.operator.noexcept#a76fb7
string, meta.embedded.assembly#98C379
string.tag#98C379
string.value#98C379
string.regexp#56B6C2
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#BE5046
meta.template.expression#b5b5bc
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#b5b5bc
keyword#a76fb7
keyword.control#a76fb7
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#a76fb7
keyword.other.unit#d4a171
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.function.git-rebase#b5b5bc
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#b5b5bc
variable.language#a76fb7
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#61AFEF
support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, 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#56B6C2
entity.name.class, entity.name.type.class, entity.other.inherited-class, support.class, entity.name.type#E5C07B
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#56B6C2
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#a76fb7
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#b5b5bc
variable.other.constant, variable.other.enummember#E06C75
meta.object-literal.key#b5b5bc
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#98C379
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#98C379
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#a76fb7
keyword.operator.quantifier.regexp#56B6C2
constant.character#a76fb7
constant.character.escape#56B6C2
entity.name.label#C8C8C8
keyword.operator, punctuation.accessor.optional#56b5c2
support.type.property-name.json#E06C75
customalabaster by Abraham - VS Code Theme