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#ec775c
  • activityBar.background#22272e
  • activityBar.border#444c56
  • activityBar.foreground#adbac7
  • activityBar.inactiveForeground#768390
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#cdd9e5
  • badge.background#316dca
  • badge.foreground#cdd9e5
  • breadcrumb.activeSelectionForeground#768390
  • breadcrumb.focusForeground#adbac7
  • breadcrumb.foreground#768390
  • breadcrumbPicker.background#2d333b
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#3d444d
  • button.secondaryForeground#adbac7
  • button.secondaryHoverBackground#444c56
  • checkbox.background#2d333b
  • checkbox.border#444c56
  • debugToolBar.background#2d333b
  • descriptionForeground#768390
  • diffEditor.insertedTextBackground#46954a26
  • diffEditor.removedTextBackground#e5534b26
  • dropdown.background#2d333b
  • dropdown.border#444c56
  • dropdown.foreground#adbac7
  • dropdown.listBackground#2d333b
  • editor.background#22272e
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#eac55f80
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#636e7b1a
  • editor.foreground#adbac7
  • editor.inactiveSelectionBackground#539bf512
  • editor.lineHighlightBackground#636e7b1a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionBackground#539bf533
  • editor.selectionHighlightBackground#57ab5a40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#636e7b80
  • editor.wordHighlightBorder#636e7b99
  • editor.wordHighlightStrongBackground#636e7b4d
  • editor.wordHighlightStrongBorder#636e7b99
  • editorBracketMatch.background#57ab5a40
  • editorBracketMatch.border#57ab5a99
  • editorCursor.foreground#539bf5
  • editorGroup.border#444c56
  • editorGroupHeader.tabsBackground#1c2128
  • editorGroupHeader.tabsBorder#444c56
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorIndentGuide.activeBackground#444c56
  • editorIndentGuide.background#373e47
  • editorLineNumber.activeForeground#adbac7
  • editorLineNumber.foreground#768390
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#545d68
  • editorWidget.background#2d333b
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#adbac7
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#545d68
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#768390
  • gitDecoration.untrackedResourceForeground#57ab5a
  • input.background#22272e
  • input.border#444c56
  • input.foreground#adbac7
  • input.placeholderForeground#545d68
  • list.activeSelectionBackground#636e7b66
  • list.activeSelectionForeground#adbac7
  • list.focusBackground#4184e426
  • list.focusForeground#adbac7
  • list.highlightForeground#539bf5
  • list.hoverBackground#636e7b1a
  • list.hoverForeground#adbac7
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#636e7b66
  • list.inactiveSelectionForeground#adbac7
  • notificationCenterHeader.background#2d333b
  • notificationCenterHeader.foreground#768390
  • notifications.background#2d333b
  • notifications.border#444c56
  • notifications.foreground#adbac7
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#1c2128
  • panel.border#444c56
  • panelInput.border#444c56
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#adbac7
  • panelTitle.inactiveForeground#768390
  • peekViewEditor.background#636e7b1a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#22272e
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#444c56
  • pickerGroup.foreground#768390
  • progressBar.background#316dca
  • quickInput.background#2d333b
  • quickInput.foreground#adbac7
  • scrollbar.shadow#545d6833
  • scrollbarSlider.activeBackground#636e7b87
  • scrollbarSlider.background#636e7b33
  • scrollbarSlider.hoverBackground#636e7b45
  • settings.headerForeground#768390
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#1c2128
  • sideBar.border#444c56
  • sideBar.foreground#adbac7
  • sideBarSectionHeader.background#1c2128
  • sideBarSectionHeader.border#444c56
  • sideBarSectionHeader.foreground#adbac7
  • sideBarTitle.foreground#adbac7
  • statusBar.background#22272e
  • statusBar.border#444c56
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#cdd9e5
  • statusBar.foreground#768390
  • statusBar.noFolderBackground#22272e
  • statusBarItem.prominentBackground#2d333b
  • tab.activeBackground#22272e
  • tab.activeBorder#22272e
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#adbac7
  • tab.border#444c56
  • tab.hoverBackground#22272e
  • tab.inactiveBackground#1c2128
  • tab.inactiveForeground#768390
  • tab.unfocusedActiveBorder#22272e
  • tab.unfocusedActiveBorderTop#444c56
  • tab.unfocusedHoverBackground#636e7b1a
  • terminal.ansiBlack#545d68
  • terminal.ansiBlue#539bf5
  • terminal.ansiBrightBlack#636e7b
  • terminal.ansiBrightBlue#6cb6ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#6bc46d
  • terminal.ansiBrightMagenta#dcbdfb
  • terminal.ansiBrightRed#ff938a
  • terminal.ansiBrightWhite#cdd9e5
  • terminal.ansiBrightYellow#daaa3f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#57ab5a
  • terminal.ansiMagenta#b083f0
  • terminal.ansiRed#f47067
  • terminal.ansiWhite#909dab
  • terminal.ansiYellow#c69026
  • terminal.foreground#768390
  • textBlockQuote.background#1c2128
  • textBlockQuote.border#444c56
  • textCodeBlock.background#636e7b66
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.foreground#768390
  • textSeparator.foreground#373e47
  • titleBar.activeBackground#22272e
  • titleBar.activeForeground#768390
  • titleBar.border#444c56
  • titleBar.inactiveBackground#1c2128
  • titleBar.inactiveForeground#768390
  • tree.indentGuidesStroke#373e47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#ededed
variable.other.generic-type.haskell#787FDD
storage.type.haskell#D19A66
support.variable.magic.python#ededed
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#ABB2BF
variable.parameter.function.language.special.self.python#E5C07B
storage.modifier.lifetime.rust#ABB2BF
support.function.std.rust#61AFEF
entity.name.lifetime.rust#E5C07B
variable.language.rust#ededed
support.constant.edge#787FDD
constant.other.character-class.regexp#ededed
keyword.operator.quantifier.regexp#D19A66
punctuation.definition.string.begin,punctuation.definition.string.end#98C379
variable.parameter.function#ABB2BF
comment markup.link#5C6370
markup.changed.diff#E5C07B
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#61AFEF
markup.inserted.diff#98C379
markup.deleted.diff#ededed
meta.function.c,meta.function.cpp#ededed
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#ABB2BF
punctuation.separator.key-value#ABB2BF
keyword.operator.expression.import#61AFEF
support.constant.math#E5C07B
support.constant.property.math#D19A66
variable.other.constant#E5C07B
storage.type.annotation.java, storage.type.object.array.java#E5C07B
source.java#ededed
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,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,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#ABB2BF
meta.method.java#61AFEF
storage.modifier.import.java,storage.type.java,storage.type.generic.java#E5C07B
keyword.operator.instanceof.java#787FDD
meta.definition.variable.name.java#ededed
keyword.operator.logical#56B6C2
keyword.operator.bitwise#56B6C2
keyword.operator.channel#56B6C2
support.constant.property-value.scss,support.constant.property-value.css#D19A66
keyword.operator.css,keyword.operator.scss,keyword.operator.less#56B6C2
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#D19A66
punctuation.separator.list.comma.css#ABB2BF
support.constant.color.w3c-standard-color-name.css#D19A66
support.type.vendored.property-name.css#56B6C2
support.module.node,support.type.object.module,support.module.node#E5C07B
entity.name.type.module#E5C07B
entity.name.variable.property.cs,variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#e8e8e8
support.constant.json#D19A66
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#787FDD
support.type.object.console#ededed
support.variable.property.process#D19A66
entity.name.function,support.function.console#61AFEF
keyword.operator.misc.rust#ABB2BF
keyword.operator.sigil.rust#787FDD
keyword.operator.delete#787FDD
support.type.object.dom#56B6C2
support.variable.dom,support.variable.property.dom#ededed
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#56B6C2
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#787FDD
punctuation.separator.delimiter#ABB2BF
punctuation.separator.c,punctuation.separator.cpp#787FDD
support.type.posix-reserved.c,support.type.posix-reserved.cpp#56B6C2
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#787FDD
variable.parameter.function.language.python#D19A66
support.type.python#56B6C2
keyword.operator.logical.python#787FDD
variable.parameter.function.python#D19A66
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#ABB2BF
meta.function-call.generic.python#61AFEF
constant.character.format.placeholder.other.python#D19A66
keyword.operator#ABB2BF
keyword.operator.assignment.compound#787FDD
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#56B6C2
keyword#68AD87
entity.name.namespace#E5C07B
variable#ededed
variable.c#ABB2BF
variable.language#E5C07B
token.variable.parameter.java#ABB2BF
import.storage.java#E5C07B
token.package.keyword#787FDD
token.package#ABB2BF
entity.name.function, meta.require, support.function.any-method, variable.function#61AFEF
entity.name.type.namespace#E5C07B
support.class, entity.name.type.class#E5C07B
entity.name.class.identifier.namespace.type#E5C07B
entity.name.class, variable.other.class.js, variable.other.class.ts#E5C07B
variable.other.class.php, source.dart#ededed
entity.name.type#E5C07B
keyword.control#787FDD
control.elements, keyword.operator.less#D19A66
keyword.other.special-method#61AFEF
storage#787FDD
token.storage#787FDD
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#787FDD
token.storage.type.java#E5C07B
support.function#56B6C2
support.type.property-name#ABB2BF
support.constant.property-value#ABB2BF
support.constant.font-name#D19A66
meta.tag#ABB2BF
string#98C379
entity.other.inherited-class#E5C07B
constant.other.symbol#56B6C2
constant.numeric#D19A66
constant#D19A66
punctuation.definition.constant#D19A66
entity.name.tag#787FDD
entity.name.tag.html, invalid.illegal.unrecognized-tag.html#61AFEF
text.aspnetcorerazor#EDEDED
entity.other.attribute-name#D19A66
entity.other.attribute-name.id#61AFEF
entity.other.attribute-name.class.css#D19A66
meta.selector#787FDD
markup.heading#ededed
markup.heading punctuation.definition.heading, entity.name.section#61AFEF
keyword.other.unit#ededed
markup.bold,todo.bold#D19A66
punctuation.definition.bold#E5C07B
markup.italic, punctuation.definition.italic,todo.emphasis#787FDD
emphasis md#787FDD
entity.name.section.markdown#ededed
punctuation.definition.heading.markdown#ededed
punctuation.definition.list.begin.markdown#ededed
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#D19A66
markup.inline.raw.markdown#98C379
markup.inline.raw.string.markdown#98C379
punctuation.definition.list.markdown#ededed
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ededed
beginning.punctuation.definition.list.markdown#ededed
punctuation.definition.metadata.markdown#ededed
markup.underline.link.markdown,markup.underline.link.image.markdown#787FDD
string.other.link.title.markdown,string.other.link.description.markdown#61AFEF
string.regexp#56B6C2
constant.character.escape#56B6C2
punctuation.section.embedded, variable.interpolation#ededed
punctuation.section.embedded.begin,punctuation.section.embedded.end#787FDD
invalid.illegal#ededed
invalid.illegal.bad-ampersand.html#ABB2BF
invalid.broken#ededed
invalid.deprecated#ededed
invalid.unimplemented#ededed
source.json meta.structure.dictionary.json > string.quoted.json#ededed
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ededed
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#98C379
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56B6C2
support.type.property-name.json#ededed
support.type.property-name.json punctuation#ededed
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#787FDD
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#787FDD
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#E5C07B
keyword.operator.error-control.php#787FDD
keyword.blade,meta.directive.blade#61AFEF
punctuation.definition.tag.begin.html,punctuation.definition.tag.end.html#787FDD
punctuation.definition.variable.php#61AFEF
keyword.operator.type.php#787FDD
punctuation.section.array.begin.php#ABB2BF
punctuation.section.array.end.php#ABB2BF
invalid.illegal.non-null-typehinted.php#F44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#E5C07B
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61AFEF
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#ABB2BF
support.constant.core.rust#D19A66
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#D19A66
entity.name.goto-label.php,support.other.php#61AFEF
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56B6C2
keyword.operator.regexp.php#787FDD
keyword.operator.comparison.php#56B6C2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#787FDD
meta.function.decorator.python#61AFEF
support.token.decorator.python,meta.function.decorator.identifier.python#56B6C2
function.parameter#ABB2BF
function.brace#ABB2BF
function.parameter.ruby, function.parameter.cs#ABB2BF
constant.language.symbol.ruby#56B6C2
rgb-value#56B6C2
inline-color-decoration rgb-value#D19A66
less rgb-value#D19A66
selector.sass#ededed
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#E5C07B
block.scope.end,block.scope.begin#ABB2BF
storage.type.cs#E5C07B
entity.name.variable.local.cs#ededed
token.info-token#61AFEF
token.warn-token#D19A66
token.error-token#F44747
token.debug-token#787FDD
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#787FDD
meta.template.expression#ABB2BF
keyword.operator.module#787FDD
support.type.type.flowtype#61AFEF
support.type.primitive#E5C07B
meta.property.object#ededed
variable.parameter.function.js#ededed
keyword.other.template.begin#98C379
keyword.other.template.end#98C379
keyword.other.substitution.begin#98C379
keyword.other.substitution.end#98C379
keyword.operator.assignment#56B6C2
keyword.operator.assignment.go#E5C07B
keyword.operator.arithmetic.go, keyword.operator.address.go#787FDD
entity.name.package.go#E5C07B
support.type.prelude.elm#56B6C2
support.constant.elm#D19A66
punctuation.quasi.element#787FDD
constant.character.entity#ededed
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56B6C2
entity.global.clojure#E5C07B
meta.symbol.clojure#ededed
constant.keyword.clojure#56B6C2
meta.arguments.coffee, variable.parameter.function.coffee#ededed
source.ini#98C379
meta.scope.prerequisites.makefile#ededed
source.makefile#E5C07B
storage.modifier.import.groovy#E5C07B
meta.method.groovy#61AFEF
meta.definition.variable.name.groovy#ededed
meta.definition.class.inherited.classes.groovy#98C379
support.variable.semantic.hlsl#E5C07B
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#787FDD
text.variable, text.bracketed#ededed
support.type.swift, support.type.vb.asp#E5C07B
entity.name.function.xi#E5C07B
entity.name.class.xi#56B6C2
constant.character.character-class.regexp.xi#ededed
constant.regexp.xi#787FDD
keyword.control.xi#56B6C2
invalid.xi#ABB2BF
beginning.punctuation.definition.quote.markdown.xi#98C379
keyword.operator.class.php#98C379
beginning.punctuation.definition.list.markdown.xi#7F848E
constant.character.xi#61AFEF
accent.xi#61AFEF
wikiword.xi#D19A66
constant.other.color.rgb-value.xi#ededed
punctuation.definition.tag.xi#5C6370
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#E5C07B
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ededed
meta.brace.square#ABB2BF
comment, punctuation.definition.comment#7F848Eitalic
markup.quote.markdown#5C6370
punctuation.definition.block.sequence.item.yaml#ABB2BF
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#56B6C2
entity.name.variable.parameter.cs#E5C07B
entity.name.variable.field.cs#ededed
markup.deleted#ededed
markup.inserted#98C379
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#ABB2BF
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
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...