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#ffcc00
  • activityBar.background#000000
  • activityBar.border#35426b
  • activityBar.foreground#ffcc00
  • activityBar.inactiveForeground#676166
  • activityBarBadge.background#222222
  • activityBarBadge.foreground#ffffff
  • badge.background#222222
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ff0000
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#00ff00
  • breadcrumb.foreground#00fffb
  • breadcrumbPicker.background#111111
  • button.background#12122c
  • button.hoverBackground#2b2b5a
  • debugToolBar.background#191936
  • debugToolBar.border#191936
  • dropdown.background#000000
  • dropdown.border#999999
  • editor.background#000000ff
  • editor.findMatchBackground#ff802bcc
  • editor.findMatchBorder#ff802b
  • editor.findMatchHighlightBackground#ff444437
  • editor.findMatchHighlightBorder#ff4444aa
  • editor.findRangeHighlightBackground#3a3a3a
  • editor.findRangeHighlightBorder#334155
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#1c1c1c
  • editor.rangeHighlightBackground#3a3a3a
  • editor.rangeHighlightBorder#334155
  • editor.selectionBackground#ffffff33
  • editor.selectionForeground#000000cc
  • editor.selectionHighlightBackground#e9ba0083
  • editor.selectionHighlightBorder#00fffb
  • editor.wordHighlightBackground#575757
  • editorBracketMatch.background#ff0000
  • editorCursor.background#5f3b23
  • editorCursor.foreground#ffffff
  • editorGroup.border#676166
  • editorGroup.dropBackground#2b2b5acc
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#014601
  • editorGutter.background#050505
  • editorGutter.commentRangeForeground#f1ff28
  • editorIndentGuide.activeBackground#707070
  • editorWhitespace.foreground#ffffff40
  • editorWidget.background#000000
  • editorWidget.border#ffffff
  • focusBorder#00fffb
  • foreground#ffffff
  • input.background#000000
  • input.border#999999
  • list.activeSelectionBackground#111111
  • list.activeSelectionForeground#00fffb
  • list.hoverBackground#2c145f7a
  • menu.background#000000
  • menu.foreground#81fa68
  • menubar.selectionBackground#111111
  • panel.background#000000
  • panel.border#ff0000
  • panelTitle.activeBorder#ff0000
  • panelTitle.activeForeground#ffffff
  • peekView.border#00fffb
  • peekViewEditor.background#000033
  • peekViewEditorGutter.background#00074b
  • peekViewResult.background#090b13
  • peekViewResult.fileForeground#7998fd
  • peekViewTitle.background#000099
  • progressBar.background#ff5500
  • sash.hoverBorder#6285a7
  • scrollbarSlider.activeBackground#3d4b5f80
  • scrollbarSlider.background#3d4b5f33
  • scrollbarSlider.hoverBackground#3d4b5f4d
  • selection.background#ffffff33
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#000000
  • sideBar.border#35426b
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#000033
  • sideBarSectionHeader.border#000033
  • sideBarTitle.foreground#b9b9ff
  • statusBar.background#000000
  • statusBar.debuggingBackground#2b2b5a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#dddddd
  • statusBarItem.errorBackground#ff8585
  • statusBarItem.errorForeground#000000
  • statusBarItem.prominentBackground#2b2b5a
  • statusBarItem.prominentForeground#000000
  • statusBarItem.remoteBackground#ffcc00
  • statusBarItem.remoteForeground#000000
  • statusBarItem.warningBackground#f3d09b
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#00fffb
  • tab.activeForeground#00fffb
  • tab.border#000000
  • tab.hoverBackground#000033
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#cccccc
  • tab.inactiveModifiedBorder#ffcc00
  • terminal.ansiBlack#000000ff
  • terminal.ansiBlue#70b8ff
  • terminal.ansiBrightBlack#000000ff
  • terminal.ansiBrightBlue#70b8ff
  • terminal.ansiBrightCyan#9ee0e0
  • terminal.ansiBrightGreen#87c591
  • terminal.ansiBrightMagenta#aea3ff
  • terminal.ansiBrightRed#ff8585
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f3d09b
  • terminal.ansiCyan#9ee0e0
  • terminal.ansiGreen#87c591
  • terminal.ansiMagenta#aea3ff
  • terminal.ansiRed#ff8585
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#f3d09b
  • terminal.background#000000
  • terminal.border#ff0000
  • terminal.foreground#ffffff
  • terminalCursor.background#000000ff
  • terminalCursor.foreground#ffffff
  • textBlockQuote.border#00fffb
  • textCodeBlock.background#000000
  • textLink.activeForeground#ffff00
  • textLink.foreground#ffcc00
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#45daff
  • toolbar.hoverBackground#000000
  • tree.indentGuidesStroke#ffcc00
  • welcomePage.background#222222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#74d349italic
emphasisbold
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts#c2dcfa
punctuation, meta.brace, meta.attribute punctuation.separator#c2dcfa
punctuation.terminator, punctuation.separator#c2dcfa99
constant, entity.name.constant, variable.language, meta.definition.variable#f1a57e
source entity, source entity.name, variable.parameter.function, meta.body.function.definition.special, support.function, meta.function, meta.function-call.python#f3d09b
entity.name.tag, tag.html#ff8585
entity.name.function, entity.name.function.member#f3d09b
source keyword, storage.type.java, entity.name.package, entity.name.import, keyword.operator.expression.infer, keyword.operator.expression.is.ts, keyword.control.satisfies, keyword.control.as.ts#aea3ff
storage.type.annotation.java#70b8ff
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#aea3ff
string, string punctuation.section.embedded source, attribute.value, meta.attribute-selector.scss, entity.name.import.go#ce9178
punctuation.definition.string, punctuation.support.type.property-value#ce9178
support#9cdcfe
property, meta.property-name, meta.attribute, meta.object-literal.key, attribute.name, entity.other.attribute-name, variable.other.object.property, variable.other.property#9cdcfe
entity.name.tag.yaml, meta.attribute entity.other.attribute-name.html, source.css entity.other.attribute-name, source.css support.type.property-name.media, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.xml#ee9834
source.css support.type.property-name#9cdcfe
source variable, identifier, constant.other.table-name, invalid.deprecated.entity.other.attribute-name.html, support.type.property-name.toml, support.type.property-name.array.toml, keyword.other.definition.ini, variable.other.normal.shell#f3d09b
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#58ffde
variable.other.readwrite.alias, meta.definition.variable, meta.object-binding-pattern-variable#c2dcfa
source variable.other.constant#348aee
meta.object-literal.key#9cdcfe
support.type.property-name.json, entity.name.tag.yaml#9cdcfe
support.type.property-value.json, string.quoted.double.yaml, string.unquoted.plain.out.yaml#ce9178
support.type.primitive, entity.name.type.instance.jsdoc#57f8d8
entity.name.type.parameter#f3d09bbold
entity.name.type.parameter.cpp, entity.name.type.ts#57f8d8
meta.type keyword.operator.expression.typeof, meta.type keyword.operator.expression.keyof#aea3ffitalic
namespace#eea0ca
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#c2dcfa
invalid#ff8585strikethrough
message.error#ff8585
string variable#ce9178
source.regexp, string.regexp#87c591
string.regexp punctuation.definition.stringbold
keyword.control.anchor.regexp, storage.modifier.reference
punctuation.definition.character-class.regexp#c2dcfa
string.regexp.character-class, constant.character.escape, constant.other.character-class.regexp, string.regexp string.regexp.arbitrary-repitition, string.regexp constant.character.escape, constant.other.placeholder#70b8ff
support.constant#f1a57e
constant.numeric, constant.numeric.hex storage.type.number, number#ccea7b
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, punctuation.definition.entity.css#70b8ff
source.css variable#9ee0e0
keyword.other.unit#70b8ff
source.css support.function#aea3ff
constant.language.boolean, constant.language#aea3ff
meta.module-reference#f3d09b
entity.name.section#aea3ff
punctuation.definition.list.begin.markdown#c2dcfa
markup.heading, markup.heading entity.name#aea3ffbold
markup.quote#9ee0e0
markup.italic#f1a57eitalic
markup.bold#f1a57ebold
markup.inline.raw, fenced_code.block.language.markdown, fenced_code.block.language#ff8585
markup.deleted, punctuation.definition.deleted#ff8585
markup.inserted, punctuation.definition.inserted#87c591
markup.changed, punctuation.definition.changed#f3d09b
markup.ignored, markup.untracked#74d349
meta.diff.range#aea3ffbold
meta.diff.header#70b8ff
meta.separator#f3d09bbold
meta.output#f3d09b
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#c2dcfa
brackethighlighter.unmatched#ff8585
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.heading.setext#70b8ff
string.other.link.description, string.other.link.title#ce9178
variable.other.link.underlineunderline
markup.underline.link.markdown, markup.underline.link.image.markdown#70b8ffunderline
variable.parameter, variable.other.jsdoc, meta.import variable#ee9834
type.identifier, entity.other.inherited-class, entity.name.type.class, entity.name.type.module, meta.parameter.initialization#57f8d8
entity.name.section.group-title, support.type.property-name.table.toml#aea3ff
support.class.component.js, support.class.component.vue, support.class.component.tsx#9ee0e0
punctuation.definition.template-expression#9ee0e0
meta.fstring.python constant.character.format.placeholder#9ee0e0
invalid.illegal.unrecognized-tag.html
keyword.control.directive, keyword.control.import, keyword.control.from, keyword.control.export, keyword.package, keyword.other.package, keyword.import, meta.use.rust keyword, variable.language.this, variable.language.super, keyword.operator.new, keyword.control.trycatch, storage.modifier.package, storage.modifier.import, keyword.operator.expression.import, source.css keyword.other.important, keyword.other.using#ff84f5
keyword.control.import.python#aea3ff
keyword.control.ternary.java#ff84f5
source keyword.control, keyword.function, keyword.type, keyword.other.new, keyword.other.this, storage.type, storage.modifier, variable.language.this#aea3ffitalic
source.go storage.type
keyword.channel.gobold
storage.type.function.arrow
storage.type.java, punctuation.definition.string.templatebold
entity.name.variable.local.cs, variable.other.object.cs, variable.other.object.property.cs, variable.other.readwrite.cs#9cdcfe
keyword.control.cs, keyword.other.using.cs#ff84f5
keyword.other.var.cs#aea3ffitalic
entity.name.type.cs, entity.name.type.namespace.cs#57f8d8
source.java storage.type.primitivebold
source.java variable.parameterunderline
storage.type.object.array.java, meta.class.java storage.type.java, entity.name.type.class.java#f1a57ebold
entity.name.namespace#f3d09b
meta.jsx.children#ffffff