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#1c1c2a
  • activityBar.border#14141f
  • activityBar.foreground#9090b2
  • activityBarBadge.background#9d50ba
  • activityBarBadge.foreground#ffffff
  • badge.background#9d50ba
  • badge.foreground#ffffff
  • button.background#9d50ba
  • button.foreground#ffffff
  • dropdown.background#1c1c2a
  • dropdown.border#1c1c2a
  • dropdown.foreground#9090b2
  • editor.background#202030
  • editor.foreground#d5d5e8
  • editor.hoverHighlightBackground#9d50ba22
  • editor.lineHighlightBackground#262639
  • editor.selectionBackground#84c4ce20
  • editor.wordHighlightBackground#ffd23f22
  • editor.wordHighlightStrongBackground#9d50ba22
  • editorBracketMatch.background#9d50ba44
  • editorBracketMatch.border#9d50ba
  • editorCursor.foreground#f8f8f0
  • editorGroup.background#262639
  • editorGroupHeader.tabsBackground#262639
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#202030
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#34344f
  • editorLineNumber.foreground#49496d
  • editorLink.activeForeground#9d50ba
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#9d50ba55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#34344f
  • editorSuggestWidget.foreground#9090b2
  • editorSuggestWidget.highlightForeground#FF6666
  • editorSuggestWidget.selectedBackground#303048
  • editorWhitespace.foreground#34344f
  • editorWidget.background#1c1c2a
  • editorWidget.border#1c1c2a
  • extensionButton.prominentBackground#9d50ba
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#b175c8
  • focusBorder#9d50ba
  • foreground#9090b2
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#5d5d8c
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.activeBorder#9d50ba
  • input.background#161621
  • input.border#3f3f5e
  • input.foreground#9090b2
  • input.placeholderForeground#454567
  • inputOption.activeBorder#9d50ba
  • list.activeSelectionBackground#9d50ba
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3f3f5e
  • list.hoverBackground#262639
  • list.inactiveSelectionBackground#262639
  • notification.background#2a2a3f
  • notification.buttonBackground#9d50ba
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#9090b2
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#202030
  • panel.border#14141f
  • panelTitle.activeBorder#9d50ba
  • panelTitle.inactiveForeground#68689a
  • peekView.border#9d50ba
  • peekViewEditor.background#181824
  • peekViewEditor.matchHighlightBackground#9d50ba55
  • peekViewEditorGutter.background#1c1c2a
  • peekViewResult.background#2a2a3f
  • peekViewResult.fileForeground#8484aa
  • peekViewResult.lineForeground#72729d
  • peekViewResult.matchHighlightBackground#9d50ba55
  • peekViewResult.selectionBackground#242436
  • peekViewResult.selectionForeground#9090b2
  • peekViewTitle.background#1c1c2a
  • peekViewTitleDescription.foreground#8787ac
  • peekViewTitleLabel.foreground#9090b2
  • progressBar.background#ffd23f
  • scrollbar.shadow#0c0c11
  • scrollbarSlider.activeBackground#9d50baaa
  • scrollbarSlider.background#49496daa
  • scrollbarSlider.hoverBackground#9d50ba55
  • sideBar.background#1c1c2a
  • sideBar.border#14141f
  • sideBar.foreground#9090b2
  • sideBarSectionHeader.background#303048
  • sideBarSectionHeader.foreground#9090b2
  • statusBar.background#9d50ba
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#9d50ba
  • tab.inactiveBackground#28283c
  • tab.inactiveForeground#7777a5
  • terminal.ansiBlack#2a2a3f
  • terminal.ansiBlue#ffd23f
  • terminal.ansiBrightBlack#49496d
  • terminal.ansiBrightBlue#ffeaa5
  • terminal.ansiBrightCyan#f6a0b2
  • terminal.ansiBrightGreen#c699d7
  • terminal.ansiBrightMagenta#ffffff
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ccccdc
  • terminal.ansiBrightYellow#f6a0b2
  • terminal.ansiCyan#ee4266
  • terminal.ansiGreen#9d50ba
  • terminal.ansiMagenta#f3fcf0
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#9f9fbc
  • terminal.ansiYellow#ee4266
  • terminal.background#161621
  • terminal.foreground#9090b2
  • titleBar.activeBackground#181824

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant.edge#FF6666
constant.other.character-class.regexp#d5d5e8
keyword.operator.quantifier.regexp#56CBF9
punctuation.definition.string.begin,punctuation.definition.string.end#FFA69E
variable.parameter.function#d5d5e8
comment, punctuation.definition.comment#9090b2italic
comment markup.link#4c4c70
markup.changed.diff#CCFF66
meta.diff.header.from-file,punctuation.definition.from-file.diff#FFC43D
markup.inserted.diff#FFA69E
markup.deleted.diff#d5d5e8
meta.function.c#d5d5e8
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#d5d5e8
punctuation.separator.key-value#d5d5e8
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
variable.language.super#CCFF66
keyword.operator.expression.import#FFC43D
support.constant.math#d5d5e8
support.constant.property.math#56CBF9
variable.other.constant#d5d5e8
storage.type.annotation.java#CCFF66
source.java#d5d5e8
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,meta.method.body.java#d5d5e8
meta.method.java#FFC43D
storage.modifier.import.java,storage.type.java#CCFF66
meta.definition.variable.name.java#d5d5e8
keyword.operator.logical.js#81F4E1
keyword.operator.bitwise#FFD166
keyword.operator.channel#FFD166
support.constant.property-value.scss,support.constant.property-value.css#56CBF9
keyword.operator.css,keyword.operator.scss,keyword.operator.less#FFD166
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#FF6666
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#56CBF9
punctuation.separator.list.comma.css#d5d5e8
support.constant.color.w3c-standard-color-name.css#56CBF9
support.type.vendored.property-name.css#FFD166
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#d5d5e8
support.module.node,support.type.object.module,support.module.node#CCFF66
entity.name.type.module#CCFF66
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#d5d5e8
comment.line.double-slash,comment.block.documentationitalic
support.constant.json#56CBF9
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional#81F4E1
support.type.object.console#d5d5e8
support.variable.property.process#56CBF9
entity.name.function,support.function.console#FFC43D
keyword.operator#FFD166
support.type.object.dom#FFD166
support.variable.dom,support.variable.property.dom#d5d5e8
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment#81F4E1
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c#FF6666
punctuation.separator.delimiter#d5d5e8
punctuation.separator.c#FF6666
support.type.posix-reserved.c#FFD166
keyword.operator.sizeof.c#FF6666
variable.parameter.function.language.python#FFFD82
support.type.python#FFD166
keyword.operator.logical.python#FF6666
meta.function-call.arguments.python#d5d5e8
meta.function-call.python#d5d5e8
variable.parameter.function.python#56CBF9
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#d5d5e8
meta.function-call.generic.python#FFC43D
constant.character.format.placeholder.other.python#FFA69E
none#d5d5e8
keyword.operator#81F4E1
keyword.operator.assignment.compound#FF6666
keyword#FF6666
variable.parameter, parameters variable.function#FFFD82
variable#d5d5e8
token.variable.parameter.java#d5d5e8
import.storage.java#CCFF66
token.package.keyword#FF6666
token.package#d5d5e8
entity.name.function, meta.require, support.function.any-method, variable.function#FFC43D
entity.name.type.namespace#CCFF66
support.class, entity.name.type.class#CCFF66
entity.name.class.identifier.namespace.type#CCFF66
entity.name.class, variable.other.class.js, variable.other.class.ts#CCFF66
variable.other.class.php#d5d5e8
entity.name.type#CCFF66
keyword.control#81F4E1
keyword.control.import.python,keyword.control.flow.python
control.elements, keyword.operator.less#56CBF9
keyword.other.special-method#FFC43D
storage#FF6666
token.storage#FF6666
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#81F4E1
token.storage.type.java#CCFF66
support.function#FFD166
support.type.property-name#d5d5e8
support.constant.property-value#d5d5e8
support.constant.font-name#56CBF9
meta.tag#d5d5e8
string#FFA69E
entity.other.inherited-class#CCFF66
constant.other.symbol#FFD166
constant.numeric#56CBF9
none#56CBF9
none#56CBF9
constant#56CBF9
punctuation.definition.constant#56CBF9
entity.name.tag#CCFF66
entity.other.attribute-name#FFFD82
entity.other.attribute-name.id#FFC43Dnormal
entity.other.attribute-name.class.css#CCFF66normal
meta.selector#FF6666
none#56CBF9
markup.heading#d5d5e8bold
markup.heading punctuation.definition.heading, entity.name.section#FFC43D
keyword.other.unit#81F4E1
markup.bold,todo.bold#56CBF9bold
punctuation.definition.bold#CCFF66
markup.italic, punctuation.definition.italic,todo.emphasis#FF6666
emphasis md#FF6666
entity.name.section.markdown#d5d5e8
punctuation.definition.heading.markdown#d5d5e8
punctuation.definition.list.begin.markdown#d5d5e8
markup.heading.setext#d5d5e8
punctuation.definition.bold.markdown#56CBF9
markup.inline.raw.markdown#FFA69E
markup.inline.raw.string.markdown#FFA69E
punctuation.definition.list.markdown#d5d5e8
markup.quote.markdown#4c4c70italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#d5d5e8
beginning.punctuation.definition.list.markdown#d5d5e8
punctuation.definition.metadata.markdown#d5d5e8
markup.underline.link.markdown,markup.underline.link.image.markdown#FF6666
string.other.link.title.markdown,string.other.link.description.markdown#FFC43D
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#FFD166
constant.character.escape#FFD166
punctuation.section.embedded, variable.interpolation#d5d5e8
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#d5d5e8
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#d5d5e8
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#FFA69E
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#FFD166
support.type.property-name.json#FFFD82
support.type.property-name.json punctuation#FFFD82
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#FF6666
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#FF6666
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#CCFF66
keyword.operator.error-control.php#FF6666
keyword.operator.type.php#FF6666
punctuation.section.array.begin.php#d5d5e8
punctuation.section.array.end.php#d5d5e8
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#CCFF66
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#FFC43D
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#d5d5e8
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#56CBF9
entity.name.goto-label.php,support.other.php#FFC43D
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#FFD166
keyword.operator.regexp.php#FF6666
keyword.operator.comparison.php#FFD166
punctuation.definition.variable.php#d5d5e8
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#FF6666
meta.function.decorator.python#FFC43D
support.token.decorator.python,meta.function.decorator.identifier.python#FFD166
function.parameter#56CBF9
function.parameter#d5d5e8
function.brace#d5d5e8
function.parameter.ruby, function.parameter.cs#d5d5e8
constant.language.symbol.ruby#FFD166
rgb-value#FFD166
inline-color-decoration rgb-value#56CBF9
less rgb-value#56CBF9
selector.sass#d5d5e8
variable.language.special.self.python, variable.parameter.function.language.special.self.python#CCFF66
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#CCFF66italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#CCFF66
block.scope.end,block.scope.begin#d5d5e8
storage.type.cs#CCFF66
entity.name.variable.local.cs#d5d5e8
token.info-token#FFC43D
token.warn-token#56CBF9
token.error-token#f44747
token.debug-token#FF6666
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#FF6666
meta.template.expression#d5d5e8
keyword.operator.module#FF6666
support.type.type.flowtype#FFC43D
support.type.primitive#CCFF66
meta.property.object#d5d5e8
variable.parameter.function.js#d5d5e8
keyword.other.template.begin#FFA69E
keyword.other.template.end#FFA69E
keyword.other.substitution.begin#FFA69E
keyword.other.substitution.end#FFA69E
keyword.operator.assignment#d5d5e8
keyword.operator.assignment.go, keyword.operator.address.go#81F4E1
entity.name.package.go#CCFF66
support.type.prelude.elm#FFD166
support.constant.elm#56CBF9
punctuation.quasi.element#FF6666
constant.character.entity#d5d5e8
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FFD166
entity.global.clojure#CCFF66
meta.symbol.clojure#d5d5e8
constant.keyword.clojure#FFD166
meta.arguments.coffee, variable.parameter.function.coffee#d5d5e8
source.ini#FFA69E
meta.scope.prerequisites.makefile#d5d5e8
source.makefile#CCFF66
storage.modifier.import.groovy#CCFF66
meta.method.groovy#FFC43D
meta.definition.variable.name.groovy#d5d5e8
meta.definition.class.inherited.classes.groovy#FFA69E
support.variable.semantic.hlsl#CCFF66
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#FF6666
text.variable, text.bracketed#d5d5e8
support.type.swift, support.type.vb.asp#CCFF66