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
emphasis—bold
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.string—bold
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.underline—underline
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.go—bold
storage.type.function.arrow—
storage.type.java, punctuation.definition.string.template—bold
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.primitive—bold
source.java variable.parameter—underline
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—
Crow by John Kennedy - VS Code Theme