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#f9826c
  • activityBar.background#fff
  • activityBar.border#e1e4e8
  • activityBar.foreground#2f363d
  • activityBar.inactiveForeground#959da5
  • activityBarBadge.background#2188ff
  • activityBarBadge.foreground#fff
  • badge.background#dbedff
  • badge.foreground#005cc5
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#2f363d
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#fafbfc
  • button.background#159739
  • button.foreground#fff
  • button.hoverBackground#138934
  • button.secondaryBackground#e1e4e8
  • button.secondaryForeground#1b1f23
  • button.secondaryHoverBackground#d1d5da
  • checkbox.background#fafbfc
  • checkbox.border#d1d5da
  • debugToolBar.background#fff
  • descriptionForeground#6a737d
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#fafbfc
  • dropdown.border#e1e4e8
  • dropdown.foreground#2f363d
  • dropdown.listBackground#fff
  • editor.background#fff
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.focusedStackFrameHighlightBackground#28a74525
  • editor.foldBackground#d1d5da11
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#0366d611
  • editor.lineHighlightBackground#f6f8fa
  • editor.linkedEditingBackground#0366d611
  • editor.selectionBackground#0366d625
  • editor.selectionHighlightBackground#34d05840
  • editor.selectionHighlightBorder#34d05800
  • editor.stackFrameHighlightBackground#ffd33d33
  • editor.wordHighlightBackground#34d05800
  • editor.wordHighlightBorder#24943e99
  • editor.wordHighlightStrongBackground#34d05800
  • editor.wordHighlightStrongBorder#24943e50
  • editorBracketHighlight.foreground1#005cc5
  • editorBracketHighlight.foreground2#e36209
  • editorBracketHighlight.foreground3#5a32a3
  • editorBracketHighlight.foreground4#005cc5
  • editorBracketHighlight.foreground5#e36209
  • editorBracketHighlight.foreground6#5a32a3
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d05800
  • editorCursor.foreground#044289
  • editorError.foreground#cb2431
  • editorGroup.border#e1e4e8
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#d7dbe0
  • editorIndentGuide.background#eff2f6
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#1b1f234d
  • editorOverviewRuler.border#fff
  • editorWarning.foreground#f9c513
  • editorWhitespace.foreground#d1d5da
  • editorWidget.background#f6f8fa
  • errorForeground#cb2431
  • focusBorder#2188ff
  • foreground#444d56
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#e36209
  • gitDecoration.deletedResourceForeground#d73a49
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#005cc5
  • gitDecoration.submoduleResourceForeground#959da5
  • gitDecoration.untrackedResourceForeground#28a745
  • input.background#fafbfc
  • input.border#e1e4e8
  • input.foreground#2f363d
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#e2e5e9
  • list.activeSelectionForeground#2f363d
  • list.focusBackground#cce5ff
  • list.hoverBackground#ebf0f4
  • list.hoverForeground#2f363d
  • list.inactiveFocusBackground#dbedff
  • list.inactiveSelectionBackground#e8eaed
  • list.inactiveSelectionForeground#2f363d
  • notificationCenterHeader.background#e1e4e8
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#fafbfc
  • notifications.border#e1e4e8
  • notifications.foreground#2f363d
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#005cc5
  • notificationsWarningIcon.foreground#e36209
  • panel.background#f6f8fa
  • panel.border#e1e4e8
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#2f363d
  • panelTitle.inactiveForeground#6a737d
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#2f363d
  • progressBar.background#2188ff
  • quickInput.background#fafbfc
  • quickInput.foreground#2f363d
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#2f363d
  • settings.modifiedItemIndicator#2188ff
  • sideBar.background#f6f8fa
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#2f363d
  • sideBarTitle.foreground#2f363d
  • statusBar.background#fff
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#f9826c
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#586069
  • statusBar.noFolderBackground#fff
  • statusBarItem.prominentBackground#e8eaed
  • statusBarItem.remoteBackground#fff
  • statusBarItem.remoteForeground#586069
  • tab.activeBackground#fff
  • tab.activeBorder#fff
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#2f363d
  • tab.border#e1e4e8
  • tab.hoverBackground#fff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#fff
  • tab.unfocusedActiveBorderTop#e1e4e8
  • tab.unfocusedHoverBackground#fff
  • terminal.ansiBlack#24292e
  • terminal.ansiBlue#0366d6
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#005cc5
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#22863a
  • terminal.ansiBrightMagenta#5a32a3
  • terminal.ansiBrightRed#cb2431
  • terminal.ansiBrightWhite#d1d5da
  • terminal.ansiBrightYellow#b08800
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#28a745
  • terminal.ansiMagenta#5a32a3
  • terminal.ansiRed#d73a49
  • terminal.ansiWhite#6a737d
  • terminal.ansiYellow#dbab09
  • terminal.foreground#586069
  • terminal.tab.activeBorder#f9826c
  • terminalCursor.background#d1d5da
  • terminalCursor.foreground#005cc5
  • textBlockQuote.background#fafbfc
  • textBlockQuote.border#e1e4e8
  • textCodeBlock.background#f6f8fa
  • textLink.activeForeground#005cc5
  • textLink.foreground#0366d6
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#fff
  • titleBar.activeForeground#2f363d
  • titleBar.border#e1e4e8
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#000000—
comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python#8C8C8Citalic
string.quoted, string.template, punctuation.definition.string#003366—
entity.name.type#D73A49—
storage.type.function, punctuation.separator.annotation.result.python#000000—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.annotation, meta.method.identifier.java, punctuation.definition.annotation#0033B3—
keyword.control#0033B3—
keyword.operator#000000—
entity.name.function, variable.function, support.function#067D17—
entity.name#D73A49—
entity.name.namespace, keyword.other.import#0033B3—
constant#871094—
string.regexp#CE54B8—
constant.other.color#D73A49—
support.constant.font-name#D73A49—
markup.underline.link#DD5500—
string.other.link.description#D73A49—
keyword.other.unit#D73A49—
entity.other.inherited-class#DD5500—
punctuation.separator.delimiter#000000—
variable.language#0033B3—
storage.modifier#0033B3—
storage.type#0033B3—
constant.numeric#0033CC—
constant.language#0033CC—
constant.character.escape#067D17—
support.variable#00627A—
punctuation.separator.key-value#000—
punctuation.section.embedded#0033B3—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF957E—
markup.heading, entity.name.section#CE54B8—
keyword.operator.assignment#000000—
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#CE54B8—
markup.underline.link.markdown, markup.inline.raw.string.markdown#067D17italic
string.other.link.title.markdown#0033B3—
markup.heading.markdown, entity.name.section.markdown#CE54B8bold
markup.italic.markdown#00627Aitalic
markup.bold.markdown#00627Abold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#067D17—
source.dart, source.python, source.scala#CE54B8ff—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#0033B3—
support#DB5F70—
support.type.primitive.ts#0033B3—
punctuation.definition.tag#00627A—
string.template meta.embedded.line#000000—
switch-block.expr.js#067D17—
entity.other.attribute-name.pseudo-element#00627A—
support.function.misc.css#067D17—
constant.numeric.css#E36209—
keyword.other.unit.px.css, keyword.other.unit.deg.css, keyword.other.unit.s.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.ch.css, keyword.other.unit.cw.css#D73A49—
entity.other.keyframe-offset.css#00627A—
variable.parameter.keyframe-list.css, constant.other.color.rgb-value.hex.css, punctuation.definition.constant.css#00627A—
entity.other.attribute-name.css#0033B3—
meta.object-literal.key, support.type.property-name#CE54B8—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key#0033B3—
support.constant.font-name, meta.definition.variable#000—
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#D73A49—
entity.other.attribute-name.id#00627A—
entity.name.tag.css#0033B3—
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference#000—
meta.property-list#00627a—
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#E36209—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#D73A49—
meta.property-list meta.property-list#00627a—
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include#6F42C1—
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword#6f42c1—
meta.property-list meta.at-rule.include#c0caf5—
support.constant.property-value#E36209—
source.json meta.structure.dictionary.json support.type.property-name.json#067D17—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E03030—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#14ACB8—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#AA8DE0—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#000000—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0db9d7—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D73A49—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DB5F70—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9ece6a—
punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments, punctuation.separator.dictionary.key-value.json.comments#3F48CC—
entity.name.tag, meta.tag.sgml#0033B3—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#0033B3—
entity.other.attribute-name.html#D73A49italic
meta.attribute.class.html#fe4450—
string.quoted.double.html#067D17—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html#6E6E6E—
text.html#000000—
entity.name.function.python#00627A—
entity.name.function.decorator.python#D73A49—
variable.parameter.function.language.special.self.python#E36209—
storage.type.function.python#0033B3—
punctuation.separator.colon.python, punctuation.section.function.begin.python, punctuation.separator.dict.python, punctuation.separator.arguments.python, punctuation.separator.period.python, punctuation.separator.element.python, punctuation.separator.parameters.python, punctuation.section.class.begin.python, punctuation.separator.annotation.python#000000—
variable.other.constant.property.js, variable.other.property.js#CE54B8—
keyword.control.export.js, keyword.control.import.js#D73A49—
keyword.control.java#0033B3—
storage.type.primitive.java#0033B3—