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#000A14
  • activityBar.foreground#6473F7
  • activityBarBadge.background#2340FA
  • activityBarBadge.foreground#f8fafd
  • badge.background#000A14
  • button.background#404754
  • debugToolBar.background#020627
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#020627
  • dropdown.border#020627
  • editor.background#000A14
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#9EA7FA
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#9EA7FA26
  • 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#020627
  • editorHoverWidget.background#020627
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#020627
  • editorRuler.foreground#9EA7FA26
  • editorSuggestWidget.background#020627
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#9ea3fab7
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#020627
  • focusBorder#464646
  • input.background#1d1f23
  • list.activeSelectionBackground#9EA3FAb7
  • list.activeSelectionForeground#040864
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#3f52fc
  • list.inactiveSelectionBackground#9EA3FAb7
  • list.inactiveSelectionForeground#060C74
  • list.warningForeground#d19a66
  • menu.foreground#c8c8c8
  • panelSectionHeader.background#020627
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#020627
  • sideBarSectionHeader.background#000A14
  • statusBar.background#020627
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#020627
  • statusBarItem.hoverBackground#9EA3FA
  • statusBarItem.remoteBackground#2340FA
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#000A14
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#3650FC
  • tab.inactiveBackground#020627
  • tab.unfocusedHoverBackground#3650FC
  • 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#6473F7
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#e6e6e6
  • terminal.ansiYellow#d18f52
  • terminal.background#000A14
  • terminal.border#bfabab
  • terminal.foreground#9EA7FA
  • terminal.selectionBackground#9EA7FA30
  • textLink.foreground#61afef
  • titleBar.activeBackground#000A14
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#020627
  • 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#EBEDFF
variable.other.generic-type.haskell#C54455
storage.type.haskell#d19a66
support.variable.magic.python#EBEDFF
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#9EA7FA
variable.parameter.function.language.special.self.python#e5c07b
storage.modifier.lifetime.rust#9EA7FA
support.function.std.rust#61afef
entity.name.lifetime.rust#e5c07b
variable.language.rust#EBEDFF
support.constant.edge#C54455
constant.other.character-class.regexp#EBEDFF
keyword.operator.quantifier.regexp#d19a66
punctuation.definition.string.begin,punctuation.definition.string.end#98c379
variable.parameter.function#9EA7FA
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#EBEDFF
meta.function.c,meta.function.cpp#EBEDFF
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#9EA7FA
punctuation.separator.key-value#9EA7FA
keyword.operator.expression.import#61afef
support.constant.math#e5c07b
support.constant.property.math#d19a66
variable.other.constant#f9c74f
variable.other.object#f9c74fitalic
storage.type.annotation.java, storage.type.object.array.java#e5c07b
source.java#EBEDFF
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#9EA7FA
meta.method.java#61afef
storage.modifier.import.java,storage.type.java,storage.type.generic.java#e5c07b
keyword.operator.instanceof.java#C54455
meta.definition.variable.name.java#EBEDFF
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#9EA7FA
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
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#EBEDFF
support.constant.json#d19a66
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#f9844a
support.type.object.console#EBEDFF
support.variable.property.process#d19a66
entity.name.function,support.function.console#61afef
keyword.operator.misc.rust#9EA7FA
keyword.operator.sigil.rust#C54455
keyword.operator.delete#C54455
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#EBEDFF
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#C54455
punctuation.separator.delimiter#9EA7FA
punctuation.separator.c,punctuation.separator.cpp#C54455
support.type.posix-reserved.c,support.type.posix-reserved.cpp#56b6c2
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#C54455
variable.parameter.function.language.python#d19a66
support.type.python#56b6c2
keyword.operator.logical.python#C54455
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#9EA7FA
meta.function-call.generic.python#61afef
constant.character.format.placeholder.other.python#d19a66
keyword.operator#9EA7FA
keyword.operator.assignment.compound#C54455
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#56b6c2
keyword#C54455
entity.name.namespace#e5c07b
variable#EBEDFF
variable.c#9EA7FA
variable.language#e5c07b
token.variable.parameter.java#9EA7FA
import.storage.java#e5c07b
token.package.keyword#C54455
token.package#9EA7FA
entity.name.function, meta.require, support.function.any-method, variable.function#61afef
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#ff6b6b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class, variable.other.class.js, variable.other.class.ts#e5c07b
variable.other.class.php#EBEDFF
entity.name.type#e5c07b
keyword.control#8d99ae
keyword.control.flow#FF4B33italic bold
keyword.control.trycatch#FF4B33italic
control.elements, keyword.operator.less#d19a66
keyword.other.special-method#61afef
storage#676fffitalic
storage.modifier.async#FF4B33italic bold
token.storage#C54455
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#C54455
token.storage.type.java#e5c07b
support.function#56b6c2
support.type.property-name#9EA7FA
support.constant.property-value#9EA7FA
support.constant.font-name#d19a66
meta.tag#9EA7FA
string#C9FC22
entity.other.inherited-class#e5c07b
constant.other.symbol#56b6c2
constant.numeric#f8961e
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#EBEDFF
entity.other.attribute-name#d19a66
entity.other.attribute-name.id#61afefnormal
entity.other.attribute-name.class.css#d19a66normal
meta.selector#C54455
markup.heading#EBEDFF
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#EBEDFF
markup.bold,todo.bold#d19a66
punctuation.definition.bold#e5c07b
markup.italic, punctuation.definition.italic,todo.emphasis#C54455
emphasis md#C54455
entity.name.section.markdown#EBEDFF
punctuation.definition.heading.markdown#EBEDFF
punctuation.definition.list.begin.markdown#EBEDFF
markup.heading.setext#9EA7FA
punctuation.definition.bold.markdown#d19a66
markup.inline.raw.markdown#98c379
markup.inline.raw.string.markdown#98c379
punctuation.definition.list.markdown#EBEDFF
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#EBEDFF
beginning.punctuation.definition.list.markdown#EBEDFF
punctuation.definition.metadata.markdown#EBEDFF
markup.underline.link.markdown,markup.underline.link.image.markdown#C54455
string.other.link.title.markdown,string.other.link.description.markdown#61afef
string.regexp#56b6c2
constant.character.escape#56b6c2
punctuation.section.embedded, variable.interpolation#EBEDFF
punctuation.section.embedded.begin,punctuation.section.embedded.end#C54455
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#9EA7FA
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#EBEDFF
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#EBEDFF
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#EBEDFF
support.type.property-name.json punctuation#EBEDFF
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C54455
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C54455
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#e5c07b
keyword.operator.error-control.php#C54455
keyword.operator.type.php#C54455
punctuation.section.array.begin.php#9EA7FA
punctuation.section.array.end.php#9EA7FA
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#9EA7FA
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#C54455
keyword.operator.comparison.php#56b6c2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#C54455
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#56b6c2
function.parameter#9EA7FA
function.brace#9EA7FA
function.parameter.ruby, function.parameter.cs#9EA7FA
constant.language.symbol.ruby#56b6c2
constant.language.null#f94144
rgb-value#56b6c2
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
selector.sass#EBEDFF
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e5c07b
block.scope.end,block.scope.begin#9EA7FA
storage.type.cs#e5c07b
entity.name.variable.local.cs#EBEDFF
token.info-token#61afef
token.warn-token#d19a66
token.error-token#f44747
token.debug-token#C54455
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C54455
meta.template.expression#9EA7FA
keyword.operator.module#C54455
support.type.type.flowtype#61afef
support.type.primitive#e5c07b
meta.property.object#EBEDFF
variable.parameter.function.js#EBEDFF
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, keyword.operator.address.go#e5c07b
entity.name.package.go#e5c07b
support.type.prelude.elm#56b6c2
support.constant.elm#d19a66
punctuation.quasi.element#C54455
constant.character.entity#EBEDFF
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56b6c2
entity.global.clojure#e5c07b
meta.symbol.clojure#EBEDFF
constant.keyword.clojure#56b6c2
meta.arguments.coffee, variable.parameter.function.coffee#EBEDFF
source.ini#98c379
meta.scope.prerequisites.makefile#EBEDFF
source.makefile#e5c07b
storage.modifier.import.groovy#e5c07b
meta.method.groovy#61afef
meta.definition.variable.name.groovy#EBEDFF
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#C54455
text.variable, text.bracketed#EBEDFF
support.type.swift, support.type.vb.asp#e5c07b
entity.name.function.xi#e5c07b
entity.name.class.xi#56b6c2
constant.character.character-class.regexp.xi#EBEDFF
constant.regexp.xi#C54455
keyword.control.xi#56b6c2
invalid.xi#9EA7FA
beginning.punctuation.definition.quote.markdown.xi#98c379
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#61afef
accent.xi#61afef
wikiword.xi#d19a66
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#e5c07b
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#EBEDFF
meta.brace.square#9EA7FA
comment, punctuation.definition.comment#7f848eitalic
markup.quote.markdown#5c6370
punctuation.definition.block.sequence.item.yaml#9EA7FA
constant.language.symbol.elixir#56b6c2
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