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#0366d617
  • editor.lineHighlightBackground#f6f8fa
  • editor.linkedEditingBackground#0366d611
  • editor.selectionBackground#0366d62e
  • 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#d03592
  • editorBracketHighlight.foreground3#5a32a3
  • editorBracketHighlight.foreground4#005cc5
  • editorBracketHighlight.foreground5#e36209
  • editorBracketHighlight.foreground6#5a32a3
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d05800
  • editorCursor.foreground#044289
  • editorError.foreground#cb2431
  • editorGhostText.background#0366d61f
  • editorGroup.border#e1e4e8
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#d7dbe0
  • editorIndentGuide.background#e1e4e880
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#1b1f234d
  • editorOverviewRuler.border#fff
  • editorStickyScroll.background#fff
  • editorStickyScroll.border#e1e4e8
  • editorStickyScroll.shadow#fafbfc
  • editorStickyScrollHover.background#f6f8fa
  • editorWarning.foreground#005cc5
  • 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#fafbfc
  • 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
  • sideBarStickyScroll.border#e1e4e8
  • sideBarStickyScroll.shadow#f6f8fa
  • 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#959da5
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8
  • widget.shadow#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737ditalic
entity.name, meta.export.default, meta.definition.variable#e36209
constant, entity.name.constant, meta.definition.variable, variable.other.constant, variable.other.enummember, variable.language, entity#005cc5
variable.parameter.function#24292eitalic
entity.name.type.instance.jsdoc, variable.other.jsdocregular
entity.name.type.instance.jsdoc#005cc5
variable.other#24292e
meta.decorator, entity.name.decorator#6f42c1
entity.name.tag, support.type.property-name.json#22863a
entity.name.function, support.function, entity.name.function.templated, entity.name.function.member.static, entity.name.command.shell#6f42c1
entity.other.inherited-class#e36209
entity.other.attribute-name#6f42c1
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.css#22863a
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css, entity.other.attribute-name.pseudo-element.css#6f42c1italic
meta.selector.css#6f42c1
keyword#d73a49
storage.js, storage.ts, storage.type, keyword.type.go, keyword.control, source.cpp keyword.other, source.rust keyword.other, keyword.proto#d73a49italic
storage.type.function.arrow.ts, storage.type.function.arrow.js#d73a49regular
keyword.control.flow.block-scalar.literal.yamlregular
storage.modifier#d73a49italic
storage.modifier.package, storage.modifier.import, storage.type.java#24292e
string, punctuation.definition.string, string punctuation.section.embedded source#032f62
punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.tag, punctuation.section.embedded.end, punctuation.section.embedded.begin, punctuation.definition.typeparameters, punctuation.separator.comma, punctuation.definition.table.inline.toml, punctuation.definition.markdown, punctuation.semi, punctuation.comma, keyword.operator.key-value.rust, punctuation.brackets.angle, punctuation.separator#959da5
punctuation.definition.heading#959da5regular
markup.fenced_code.block.markdown#444d56
source.json meta.mapping.key string punctuation.definition.string, source.yaml meta.mapping.key string punctuation.definition.string#959da5
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, source.json meta.mapping.key string.quoted.single.json punctuation.definition.string.begin, source.json meta.mapping.key string.quoted.single.json punctuation.definition.string.end, support.type.property-name.json punctuation.definition.string#959da5
source.json meta.mapping.key string - punctuation#005cc5
support#005cc5
meta.property-name#005cc5
variable#e36209
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#005cc5italic
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#e36209
invalid.broken#b31d28italic
invalid.deprecated#b31d28italic
invalid.illegal#b31d28italic
invalid.unimplemented#b31d28italic
carriage-return#fafbfcitalic underline
punctuation.terminator#6a737d
message.error#b31d28
string variable#005cc5
source.regexp, string.regexp#032f62
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#032f62
entity.name.type.rust, source.js entity.name.type, entity.name.type#005cc5
keyword.other.fn.rustitalic
entity.name.lifetime.rust#d73a49
meta.type_params.rust#24292e
meta.annotation.rust, variable.language.rust#005cc5italic
source.ansible entity.name.tag#22863a
support.function.builtin.python, meta.function-call.generic.python#005cc5
meta.function-call.python meta.function-call.arguments.python#24292e
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#d73a49
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#005cc5
constant.other.elm#005cc5
keyword.other.parenthesis.elm, punctuation.definition.block.begin.svelte, punctuation.definition.block.end.svelte#959da5
storage.type.built-in, storage.type.numeric, source.go storage.type#005cc5regular
storage.modifier.referenceregular
string.regexp constant.character.escape#22863abold
entity.name.tag.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#22863a
entity.other.attribute-name.id.css#e36209
support.type.vendor-prefix.css#586069
support.type.property-name.css, meta.property-name.scss#444d56
support.type.vendored.property-name.css#444d56italic
source.json meta.mapping.key string#005cc5
source.yaml meta.mapping.key string#d73a49
entity.other.jinja2.delimiter#586069
source.jinja2 variable.other.jinja2.block#22863a
source.jinja2 variable.other.jinja2#e36209
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#586069
constant.other.citation.latex#005cc5
support.constant.handlebars#586069
entity.name.function.operator, keyword.function, keyword.package#d73a49italic
entity.name.operator.custom-literal.string#032f62
entity.name.operator.custom-literal.number#005cc5
punctuation.section.embedded#e36209
support.constant#005cc5
support.variable#005cc5
meta.module-reference#005cc5
punctuation.definition.list.begin.markdown#e36209
markup.heading, markup.heading entity.name#005cc5bold
markup.quote#22863aitalic
support.type.property-name.toml, support.type.property-name.array.toml, support.type.property-name.table.toml, keyword.other.definition.ini#22863a
markup.italic#24292eitalic
markup.bold#24292ebold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#005cc5
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863a
markup.changed, punctuation.definition.changed#e36209
markup.ignored, markup.untracked#f6f8fa
meta.diff.range#6f42c1bold
meta.diff.header#005cc5
meta.separator#005cc5bold
meta.output#005cc5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
source.json meta.mapping.key string.quoted.double.json punctuation.definition.string.begin, source.json meta.mapping.key string.quoted.double.json punctuation.definition.string.end, source.json meta.mapping.key string.quoted.single.json punctuation.definition.string.begin, source.json meta.mapping.key string.quoted.single.json punctuation.definition.string.end, support.type.property-name.json punctuation.definition.string, punctuation.section.angle-brackets, punctuation.eq.toml#6a737d
support.type.property-name.json string.quoted.double.json - punctuation, support.type.property-name.json string.quoted.single.json - punctuation, source.json meta.mapping.key string.quoted.double.json - punctuation, source.json meta.mapping.key string.quoted.single.json - punctuation, source.json meta.object-literal.key string.quoted.double.json - punctuation, source.json meta.object-literal.key string.quoted.single.json - punctuation#005cc5
support.type.property-name.json string.quoted.double.json punctuation.definition.string.begin, support.type.property-name.json string.quoted.double.json punctuation.definition.string.end, support.type.property-name.json string.quoted.single.json punctuation.definition.string.begin, support.type.property-name.json string.quoted.single.json punctuation.definition.string.end, source.json meta.object-literal.key string.quoted.double.json punctuation.definition.string.begin, source.json meta.object-literal.key string.quoted.double.json punctuation.definition.string.end, source.json meta.object-literal.key string.quoted.single.json punctuation.definition.string.begin, source.json meta.object-literal.key string.quoted.single.json punctuation.definition.string.end#6a737d
brackethighlighter.unmatched#b31d28
constant.other.reference.link, string.other.link#032f62underline
entity.name.type.class#005cc5
meta.function.definition.rust variable.other#e36209
meta.attribute.rust#586069
meta.type.parameters.ts entity.name.type.parameter, entity.name.type.ts#e36209
keyword.other.crate.rust, support.function.target.PHONY.makefile#cb2431
variable.language.self.rust, variable.language.this.js, variable.language.this.ts#e36209italic
constant.character.escape#e36209
entity.name.function.preprocessor#4c2889
entity.other.attribute-name.pragma.preprocessor.cpp#e36209