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
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • debugToolBar.background#21252b
  • descriptionForeground#abb2bf
  • 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
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#e3d8c3
  • 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#e3d8c3
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • 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#21252b
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#282c34
  • 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#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
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#7be0e9
  • textPreformat.foreground#e3d8c3
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonHoverBackground#404754

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