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#1C232C
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#21252b
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#1A212E
  • editor.findMatchBackground#ff000010
  • editor.findMatchBorder#ff0000aa
  • editor.findMatchHighlightBackground#000000
  • editor.findMatchHighlightBorder#ffffffaa
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#21283b
  • editor.selectionBackground#401437
  • editor.selectionHighlightBackground#ffffff00
  • editor.selectionHighlightBorder#ffffff88
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightBorder#ffffff88
  • editor.wordHighlightStrongBackground#ffffff11
  • editor.wordHighlightStrongBorder#ffffff12
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff
  • editorError.foreground#c24038
  • editorGroup.border#181a1f
  • editorGroup.emptyBackground#1A212E
  • editorGroupHeader.tabsBackground#141B24
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground1#c8c8c859
  • editorIndentGuide.background1#3B404800
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#dd9046
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • focusBorder#3e4452
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#2c313a
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#dd9046
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • panel.background#141B24
  • panelSectionHeader.background#21252b
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#282c34
  • settings.headerForeground#fff
  • sideBar.background#141B24
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#1C232C
  • sideBarSectionHeader.foreground#abb2bf
  • 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#1a212e
  • tab.activeForeground#dcdcdc
  • tab.border#141A24
  • tab.hoverBackground#323842
  • tab.inactiveBackground#141A24
  • 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#141B24
  • terminal.border#abb2bf
  • terminal.foreground#abb2bf
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#41a7fc
  • textPreformat.foreground#dd9046
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d
  • walkThrough.embeddedEditorBackground#2e3440

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