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#282c34
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#282c34
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#ffbeb8
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • focusBorder#464646
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#ffbeb8
  • menu.foreground#c8c8c8
  • panelSectionHeader.background#21252b
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#282c34
  • statusBar.background#21252b
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#282c34
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#21252b
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#a5e075
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#e6e6e6
  • terminal.ansiYellow#d18f52
  • terminal.background#282c34
  • terminal.border#abb2bf
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textLink.foreground#61afef
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d

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#c2adfc
variable.other.generic-type.haskell#fcade7
storage.type.haskell#ffbeb8
support.variable.magic.python#c2adfc
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#abb2bf
variable.parameter.function.language.special.self.python#fcdfad
storage.modifier.lifetime.rust#abb2bf
support.function.std.rust#61afef
entity.name.lifetime.rust#fcdfad
variable.language.rust#c2adfc
support.constant.edge#fcade7
constant.other.character-class.regexp#c2adfc
keyword.operator.quantifier.regexp#ffbeb8
punctuation.definition.string.begin,punctuation.definition.string.end#79c3a4
variable.parameter.function#abb2bf
comment markup.link#5c6370
markup.changed.diff#fcdfad
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#61afef
markup.inserted.diff#79c3a4
markup.deleted.diff#c2adfc
meta.function.c,meta.function.cpp#c2adfc
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#fcdfad
support.constant.property.math#ffbeb8
variable.other.constant#fcdfad
storage.type.annotation.java, storage.type.object.array.java#fcdfad
source.java#c2adfc
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#fcdfad
keyword.operator.instanceof.java#fcade7
meta.definition.variable.name.java#c2adfc
keyword.operator.logical#b0f4fd
keyword.operator.bitwise#b0f4fd
keyword.operator.channel#b0f4fd
support.constant.property-value.scss,support.constant.property-value.css#f7bfdf
keyword.operator.css,keyword.operator.scss,keyword.operator.less#b0f4fd
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#ffbeb8
punctuation.separator.list.comma.css#abb2bf
support.constant.color.w3c-standard-color-name.css#ffbeb8
support.type.vendored.property-name.css#79C3A4
support.function.misc.scss, support.function.css#79C3A4
support.module.node,support.type.object.module,support.module.node#fcdfad
entity.name.type.module#fcdfad
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#c2adfc
support.constant.json#ffbeb8
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#df9fc7
support.type.object.console#c2adfc
support.variable.property.process#ffbeb8
entity.name.function,support.function.console#61afef
keyword.operator.misc.rust#abb2bf
keyword.operator.sigil.rust#fcade7
keyword.operator.delete#fcade7
support.type.object.dom#b0f4fd
support.variable.dom,support.variable.property.dom#c2adfc
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#b0f4fd
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#fcade7
punctuation.separator.delimiter#abb2bf
punctuation.separator.c,punctuation.separator.cpp#fcade7
support.type.posix-reserved.c,support.type.posix-reserved.cpp#b0f4fd
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#fcade7
variable.parameter.function.language.python#ffbeb8
support.type.python#b0f4fd
keyword.operator.logical.python#fcade7
variable.parameter.function.python#ffbeb8
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#ffbeb8
keyword.operator#abb2bf
keyword.operator.assignment.compound#fcade7
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#b0f4fd
keyword#fcade7
entity.name.namespace#fcdfad
variable#c2adfc
variable.c#abb2bf
variable.language#fcdfad
token.variable.parameter.java#abb2bf
import.storage.java#fcdfad
token.package.keyword#fcade7
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#71d0fc
entity.name.type.namespace#fcdfad
support.class, entity.name.type.class#fcdfad
entity.name.class.identifier.namespace.type#fcdfad
entity.name.class, variable.other.class.js, variable.other.class.ts#fcdfad
variable.other.class.php#c2adfc
entity.name.type#bffcad
keyword.control#fcade7
control.elements, keyword.operator.less#ffbeb8
keyword.other.special-method#61afef
storage#fcade7
token.storage#fcade7
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#fcade7
token.storage.type.java#fcdfad
support.function#b0f4fd
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#ffbeb8
meta.tag#abb2bf
string#79c3a4
entity.other.inherited-class#fcdfad
constant.other.symbol#b0f4fd
constant.numeric#ffbeb8
constant.numeric.css#FCDFAD
meta.property-value.scss#71D0FC
constant#ffbeb8
punctuation.definition.constant#ffbeb8
entity.name.tag#f7bfdf
entity.other.attribute-name#ffbeb8
entity.other.attribute-name.id#61afefnormal
entity.other.attribute-name.class.css#C2ADFCnormal
meta.selector#fcade7
markup.heading#c2adfc
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#f7bfdf
variable.scss#FFBEB8
markup.bold,todo.bold#ffbeb8
punctuation.definition.bold#fcdfad
markup.italic, punctuation.definition.italic,todo.emphasis#fcade7
emphasis md#fcade7
entity.name.section.markdown#c2adfc
punctuation.definition.heading.markdown#c2adfc
punctuation.definition.list.begin.markdown#c2adfc
markup.heading.setext#abb2bf
punctuation.definition.bold.markdown#ffbeb8
markup.inline.raw.markdown#79c3a4
markup.inline.raw.string.markdown#79c3a4
punctuation.definition.list.markdown#c2adfc
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#c2adfc
beginning.punctuation.definition.list.markdown#c2adfc
punctuation.definition.metadata.markdown#c2adfc
markup.underline.link.markdown,markup.underline.link.image.markdown#fcade7
string.other.link.title.markdown,string.other.link.description.markdown#61afef
string.regexp#b0f4fd
constant.character.escape#b0f4fd
punctuation.section.embedded, variable.interpolation#c2adfc
punctuation.section.embedded.begin,punctuation.section.embedded.end#fcade7
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#abb2bf
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#c2adfc
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#c2adfc
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#79c3a4
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#b0f4fd
support.type.property-name.json#c2adfc
support.type.property-name.json punctuation#c2adfc
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#fcade7
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#fcade7
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#fcdfad
keyword.operator.error-control.php#fcade7
keyword.operator.type.php#fcade7
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#fcdfad
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#ffbeb8
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#ffbeb8
entity.name.goto-label.php,support.other.php#61afef
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#b0f4fd
keyword.operator.regexp.php#fcade7
keyword.operator.comparison.php#b0f4fd
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#fcade7
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#b0f4fd
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
constant.language.symbol.ruby#b0f4fd
rgb-value#b0f4fd
inline-color-decoration rgb-value#ffbeb8
less rgb-value#ffbeb8
selector.sass#c2adfc
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#fcdfad
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#fcdfad
entity.name.variable.local.cs#c2adfc
token.info-token#61afef
token.warn-token#ffbeb8
token.error-token#f44747
token.debug-token#fcade7
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#fcade7
meta.template.expression#abb2bf
keyword.operator.module#fcade7
support.type.type.flowtype#61afef
support.type.primitive#fcdfad
meta.property.object#c2adfc
variable.parameter.function.js#c2adfc
keyword.other.template.begin#79c3a4
keyword.other.template.end#79c3a4
keyword.other.substitution.begin#79c3a4
keyword.other.substitution.end#79c3a4
keyword.operator.assignment#b0f4fd
keyword.operator.assignment.go#fcdfad
keyword.operator.arithmetic.go, keyword.operator.address.go#fcade7
entity.name.package.go#fcdfad
support.type.prelude.elm#b0f4fd
support.constant.elm#ffbeb8
punctuation.quasi.element#fcade7
constant.character.entity#c2adfc
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#79C3A4
entity.global.clojure#fcdfad
meta.symbol.clojure#c2adfc
constant.keyword.clojure#b0f4fd
meta.arguments.coffee, variable.parameter.function.coffee#c2adfc
source.ini#79c3a4
meta.scope.prerequisites.makefile#c2adfc
source.makefile#fcdfad
storage.modifier.import.groovy#fcdfad
meta.method.groovy#61afef
meta.definition.variable.name.groovy#c2adfc
meta.definition.class.inherited.classes.groovy#79c3a4
support.variable.semantic.hlsl#fcdfad
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#fcade7
text.variable, text.bracketed#c2adfc
support.type.swift, support.type.vb.asp#fcdfad
entity.name.function.xi#fcdfad
entity.name.class.xi#b0f4fd
constant.character.character-class.regexp.xi#c2adfc
constant.regexp.xi#fcade7
keyword.control.xi#b0f4fd
invalid.xi#abb2bf
beginning.punctuation.definition.quote.markdown.xi#79c3a4
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#61afef
accent.xi#61afef
wikiword.xi#ffbeb8
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#5c6370
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#fcdfad
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#c2adfc
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#b0f4fd
entity.name.variable.parameter.cs#fcdfad
entity.name.variable.field.cs#c2adfc
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