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#191c1e
  • activityBar.foreground#baafc0
  • activityBarBadge.background#00b0ff
  • activityBarBadge.foreground#20232b
  • badge.background#00b0ff
  • badge.foreground#20232b
  • button.background#00e8c5cc
  • button.hoverBackground#07d4b6cc
  • debugExceptionWidget.background#ff9f2e60
  • debugExceptionWidget.border#ff9f2e60
  • debugToolBar.background#20232a
  • diffEditor.insertedTextBackground#29bf1220
  • diffEditor.removedTextBackground#f21b3f20
  • dropdown.background#2b303b
  • dropdown.border#363c49
  • editor.background#191c1e
  • editor.findMatchBackground#f39d1256
  • editor.findMatchBorder#f39d12b6
  • editor.findMatchHighlightBackground#59b8b377
  • editor.foreground#d5ced9
  • editor.hoverHighlightBackground#373941
  • editor.lineHighlightBackground#2e323d
  • editor.lineHighlightBorder#2e323d
  • editor.rangeHighlightBackground#372f3c
  • editor.selectionBackground#3d4352
  • editor.selectionHighlightBackground#4f435580
  • editor.wordHighlightBackground#4f4355
  • editor.wordHighlightStrongBackground#db45a280
  • editorBracketMatch.background#746f77
  • editorBracketMatch.border#746f77
  • editorCodeLens.foreground#746f77
  • editorCursor.foreground#ffffff
  • editorError.foreground#fc644d
  • editorGroup.dropBackground#495061d7
  • editorGroupHeader.tabsBackground#191c1e
  • editorGutter.addedBackground#9bc53dbb
  • editorGutter.deletedBackground#fc644dbb
  • editorGutter.modifiedBackground#5bc0ebbb
  • editorHoverWidget.background#373941
  • editorHoverWidget.border#00e8c5cc
  • editorIndentGuide.activeBackground#585c66
  • editorIndentGuide.background#333844
  • editorLineNumber.foreground#746f77
  • editorLink.activeForeground#3b79c7
  • editorOverviewRuler.border#1b1d23
  • editorRuler.foreground#4f4355
  • editorSuggestWidget.background#20232a
  • editorSuggestWidget.border#372f3c
  • editorSuggestWidget.selectedBackground#373941
  • editorWarning.foreground#ff9f2e
  • editorWhitespace.foreground#333844
  • editorWidget.background#20232a
  • errorForeground#fc644d
  • extensionButton.prominentBackground#07d4b6cc
  • extensionButton.prominentHoverBackground#07d4b5b0
  • focusBorder#746f77
  • foreground#d5ced9
  • gitDecoration.ignoredResourceForeground#555555
  • input.background#2b303b
  • input.placeholderForeground#746f77
  • inputOption.activeBorder#c668ba
  • inputValidation.errorBackground#d65343
  • inputValidation.errorBorder#d65343
  • inputValidation.infoBackground#3a6395
  • inputValidation.infoBorder#3a6395
  • inputValidation.warningBackground#de9237
  • inputValidation.warningBorder#de9237
  • list.activeSelectionBackground#191c1e
  • list.activeSelectionForeground#00e8c6
  • list.dropBackground#3a404e
  • list.focusBackground#282b35
  • list.focusForeground#eeeeee
  • list.hoverBackground#191c1e
  • list.hoverForeground#eeeeee
  • list.inactiveSelectionBackground#191c1e
  • list.inactiveSelectionForeground#00e8c6
  • merge.currentContentBackground#f9267240
  • merge.currentHeaderBackground#f92672
  • merge.incomingContentBackground#3b79c740
  • merge.incomingHeaderBackground#3b79c7bb
  • minimapSlider.activeBackground#60698060
  • minimapSlider.background#58607460
  • minimapSlider.hoverBackground#60698060
  • panel.background#191c1e
  • panel.border#1b1d23
  • panelTitle.activeBorder#191c1e
  • panelTitle.inactiveForeground#746f77
  • peekView.border#191c1e
  • peekViewEditor.background#1a1c22
  • peekViewEditor.matchHighlightBackground#ff9f2e60
  • peekViewResult.background#1a1c22
  • peekViewResult.matchHighlightBackground#ff9f2e60
  • peekViewResult.selectionBackground#191c1e
  • peekViewTitle.background#1a1c22
  • peekViewTitleDescription.foreground#746f77
  • pickerGroup.border#4f4355
  • pickerGroup.foreground#746f77
  • progressBar.background#c668ba
  • scrollbar.shadow#191c1e
  • scrollbarSlider.activeBackground#3a3f4ccc
  • scrollbarSlider.background#3a3f4c77
  • scrollbarSlider.hoverBackground#3a3f4caa
  • selection.background#746f77
  • sideBar.background#191c1e
  • sideBar.foreground#999999
  • sideBarSectionHeader.background#191c1e
  • sideBarTitle.foreground#00e8c6
  • statusBar.background#191c1e
  • statusBar.debuggingBackground#fc644d
  • statusBar.noFolderBackground#191c1e
  • statusBarItem.activeBackground#00e8c5cc
  • statusBarItem.hoverBackground#07d4b5b0
  • statusBarItem.prominentBackground#07d4b5b0
  • statusBarItem.prominentHoverBackground#00e8c5cc
  • tab.activeBackground#191c1e
  • tab.activeForeground#00e8c6
  • tab.inactiveBackground#191c1e
  • tab.inactiveForeground#746f77
  • terminal.ansiBlue#7cb7ff
  • terminal.ansiBrightBlue#7cb7ff
  • terminal.ansiBrightCyan#00e8c6
  • terminal.ansiBrightGreen#96e072
  • terminal.ansiBrightMagenta#ff00aa
  • terminal.ansiBrightRed#ee5d43
  • terminal.ansiBrightYellow#ffe66d
  • terminal.ansiCyan#00e8c6
  • terminal.ansiGreen#96e072
  • terminal.ansiMagenta#ff00aa
  • terminal.ansiRed#ee5d43
  • terminal.ansiYellow#ffe66d
  • terminalCursor.background#191c1e
  • terminalCursor.foreground#ffe66d
  • titleBar.activeBackground#191c1e
  • walkThrough.embeddedEditorBackground#191c1e
  • widget.shadow#14151a

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#FF0014
variable.other.generic-type.haskell#C500FF
storage.type.haskell#FF7C00
support.variable.magic.python#FF0014
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#FFFFFF
variable.parameter.function.language.special.self.python#FFA600
storage.modifier.lifetime.rust#FFFFFF
support.function.std.rust#008CFF
entity.name.lifetime.rust#FFA600
variable.language.rust#FF0014
support.constant.edge#C500FF
constant.other.character-class.regexp#FF0014
keyword.operator.quantifier.regexp#FF7C00
punctuation.definition.string.begin,punctuation.definition.string.end#6BFF00
variable.parameter.function#FFFFFF
comment markup.link#D3D3D3
markup.changed.diff#FFA600
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#008CFF
markup.inserted.diff#6BFF00
markup.deleted.diff#FF0014
meta.function.c,meta.function.cpp#FF0014
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#FFFFFF
punctuation.separator.key-value#FFFFFF
keyword.operator.expression.import#008CFF
support.constant.math#FFA600
support.constant.property.math#FF7C00
variable.other.constant#FFA600
storage.type.annotation.java, storage.type.object.array.java#FFA600
source.java#FF0014
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#FFFFFF
meta.method.java#008CFF
storage.modifier.import.java,storage.type.java,storage.type.generic.java#FFA600
keyword.operator.instanceof.java#C500FF
meta.definition.variable.name.java#FF0014
keyword.operator.logical#00E3FF
keyword.operator.bitwise#00E3FF
keyword.operator.channel#00E3FF
support.constant.property-value.scss,support.constant.property-value.css#FF7C00
keyword.operator.css,keyword.operator.scss,keyword.operator.less#00E3FF
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#FF7C00
punctuation.separator.list.comma.css#FFFFFF
support.constant.color.w3c-standard-color-name.css#FF7C00
support.type.vendored.property-name.css#00E3FF
support.module.node,support.type.object.module,support.module.node#FFA600
entity.name.type.module#FFA600
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#FF0014
support.constant.json#FF7C00
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#C500FF
support.type.object.console#FF0014
support.variable.property.process#FF7C00
entity.name.function,support.function.console#008CFF
keyword.operator.misc.rust#FFFFFF
keyword.operator.sigil.rust#C500FF
keyword.operator.delete#C500FF
support.type.object.dom#00E3FF
support.variable.dom,support.variable.property.dom#FF0014
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#00E3FF
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#C500FF
punctuation.separator.delimiter#FFFFFF
punctuation.separator.c,punctuation.separator.cpp#C500FF
support.type.posix-reserved.c,support.type.posix-reserved.cpp#00E3FF
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#C500FF
variable.parameter.function.language.python#FF7C00
support.type.python#00E3FF
keyword.operator.logical.python#C500FF
variable.parameter.function.python#FF7C00
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#FFFFFF
meta.function-call.generic.python#008CFF
constant.character.format.placeholder.other.python#FF7C00
keyword.operator#FFFFFF
keyword.operator.assignment.compound#C500FF
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#00E3FF
keyword#C500FF
entity.name.namespace#FFA600
variable#FF0014
variable.c#FFFFFF
variable.language#FFA600
token.variable.parameter.java#FFFFFF
import.storage.java#FFA600
token.package.keyword#C500FF
token.package#FFFFFF
entity.name.function, meta.require, support.function.any-method, variable.function#008CFF
entity.name.type.namespace#FFA600
support.class, entity.name.type.class#FFA600
entity.name.class.identifier.namespace.type#FFA600
entity.name.class, variable.other.class.js, variable.other.class.ts#FFA600
variable.other.class.php#FF0014
entity.name.type#FFA600
keyword.control#C500FF
control.elements, keyword.operator.less#FF7C00
keyword.other.special-method#008CFF
storage#C500FF
token.storage#C500FF
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#C500FF
token.storage.type.java#FFA600
support.function#00E3FF
support.type.property-name#FFFFFF
support.constant.property-value#FFFFFF
support.constant.font-name#FF7C00
meta.tag#FFFFFF
string#6BFF00
entity.other.inherited-class#FFA600
constant.other.symbol#00E3FF
constant.numeric#FF7C00
constant#FF7C00
punctuation.definition.constant#FF7C00
entity.name.tag#FF0014
entity.other.attribute-name#FF7C00
entity.other.attribute-name.id#008CFFnormal
entity.other.attribute-name.class.css#FF7C00normal
meta.selector#C500FF
markup.heading#FF0014
markup.heading punctuation.definition.heading, entity.name.section#008CFF
keyword.other.unit#FF0014
markup.bold,todo.bold#FF7C00
punctuation.definition.bold#FFA600
markup.italic, punctuation.definition.italic,todo.emphasis#C500FF
emphasis md#C500FF
entity.name.section.markdown#FF0014
punctuation.definition.heading.markdown#FF0014
punctuation.definition.list.begin.markdown#FF0014
markup.heading.setext#FFFFFF
punctuation.definition.bold.markdown#FF7C00
markup.inline.raw.markdown#6BFF00
markup.inline.raw.string.markdown#6BFF00
punctuation.definition.list.markdown#FF0014
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#FF0014
beginning.punctuation.definition.list.markdown#FF0014
punctuation.definition.metadata.markdown#FF0014
markup.underline.link.markdown,markup.underline.link.image.markdown#C500FF
string.other.link.title.markdown,string.other.link.description.markdown#008CFF
string.regexp#00E3FF
constant.character.escape#00E3FF
punctuation.section.embedded, variable.interpolation#FF0014
punctuation.section.embedded.begin,punctuation.section.embedded.end#C500FF
invalid.illegal#FFFFFF
invalid.illegal.bad-ampersand.html#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#FF0014
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#FF0014
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#6BFF00
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#00E3FF
support.type.property-name.json#FF0014
support.type.property-name.json punctuation#FF0014
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C500FF
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C500FF
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#FFA600
keyword.operator.error-control.php#C500FF
keyword.operator.type.php#C500FF
punctuation.section.array.begin.php#FFFFFF
punctuation.section.array.end.php#FFFFFF
invalid.illegal.non-null-typehinted.php#F44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#FFA600
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#008CFF
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#FFFFFF
support.constant.core.rust#FF7C00
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#FF7C00
entity.name.goto-label.php,support.other.php#008CFF
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#00E3FF
keyword.operator.regexp.php#C500FF
keyword.operator.comparison.php#00E3FF
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#C500FF
meta.function.decorator.python#008CFF
support.token.decorator.python,meta.function.decorator.identifier.python#00E3FF
function.parameter#FFFFFF
function.brace#FFFFFF
function.parameter.ruby, function.parameter.cs#FFFFFF
constant.language.symbol.ruby#00E3FF
rgb-value#00E3FF
inline-color-decoration rgb-value#FF7C00
less rgb-value#FF7C00
selector.sass#FF0014
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#FFA600
block.scope.end,block.scope.begin#FFFFFF
storage.type.cs#FFA600
entity.name.variable.local.cs#FF0014
token.info-token#008CFF
token.warn-token#FF7C00
token.error-token#F44747
token.debug-token#C500FF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C500FF
meta.template.expression#FFFFFF
keyword.operator.module#C500FF
support.type.type.flowtype#008CFF
support.type.primitive#FFA600
meta.property.object#FF0014
variable.parameter.function.js#FF0014
keyword.other.template.begin#6BFF00
keyword.other.template.end#6BFF00
keyword.other.substitution.begin#6BFF00
keyword.other.substitution.end#6BFF00
keyword.operator.assignment#00E3FF
keyword.operator.assignment.go#FFA600
keyword.operator.arithmetic.go, keyword.operator.address.go#C500FF
entity.name.package.go#FFA600
support.type.prelude.elm#00E3FF
support.constant.elm#FF7C00
punctuation.quasi.element#C500FF
constant.character.entity#FF0014
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#00E3FF
entity.global.clojure#FFA600
meta.symbol.clojure#FF0014
constant.keyword.clojure#00E3FF
meta.arguments.coffee, variable.parameter.function.coffee#FF0014
source.ini#6BFF00
meta.scope.prerequisites.makefile#FF0014
source.makefile#FFA600
storage.modifier.import.groovy#FFA600
meta.method.groovy#008CFF
meta.definition.variable.name.groovy#FF0014
meta.definition.class.inherited.classes.groovy#6BFF00
support.variable.semantic.hlsl#FFA600
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#C500FF
text.variable, text.bracketed#FF0014
support.type.swift, support.type.vb.asp#FFA600
entity.name.function.xi#FFA600
entity.name.class.xi#00E3FF
constant.character.character-class.regexp.xi#FF0014
constant.regexp.xi#C500FF
keyword.control.xi#00E3FF
invalid.xi#FFFFFF
beginning.punctuation.definition.quote.markdown.xi#6BFF00
beginning.punctuation.definition.list.markdown.xi#D3D3D3
constant.character.xi#008CFF
accent.xi#008CFF
wikiword.xi#FF7C00
constant.other.color.rgb-value.xi#FFFFFF
punctuation.definition.tag.xi#D3D3D3
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#FFA600
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FF0014
meta.brace.square#FFFFFF
comment, punctuation.definition.comment#D3D3D3
markup.quote.markdown#D3D3D3
punctuation.definition.block.sequence.item.yaml#FFFFFF
constant.language.symbol.elixir#00E3FF
markup.italic.markdownitalic
comment.line, comment.block, comment.line.double-slash#CCEFF3
punctuation.definition.comment#CCEFF3bold
variable.parameter#00FFFF
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, keyword.operator.new, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.assignment.compound#FFA8CA
storage.type#FDAC8Cbold
variable.other.constant#FF7676
variable.other.readwrite#D8BABA
entity.name.function#C0BDFF
storage.modifier.async#FF733B
keyword.control.loop, keyword.control.conditional, keyword.operator.ternary#7571FC
string#06FF12
support.type.property-name.json.comments, punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments#00FFFF
support.type.primitive.tsx#FEDB39
variable.other.object.property#FCB05A
variable.other.property#E0CF10
meta.object-literal.key.tsx#FF0000
keyword.control.import, keyword.control.from, keyword.control.export#FF0000
entity.other.attribute-name#C6BFB8bold