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#505050
  • activityBar.border#0000000e
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282d34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#303030
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#383e4a65
  • editor.selectionBackground#505050
  • editor.selectionHighlightBackground#484e5b
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#1e2124
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#3b4048
  • editorLineNumber.foreground#606060
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • gitDecoration.ignoredResourceForeground#494949
  • input.background#30373b
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#6caedd
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#404040
  • sideBar.border#00000034
  • sideBarSectionHeader.background#505050
  • sideBarSectionHeader.foreground#e0e0e0
  • sideBarTitle.foreground#eca200
  • statusBar.background#505050
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#d4d4d4
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#505050
  • tab.activeBorder#eca200
  • tab.border#181a1f
  • tab.inactiveBackground#404040
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#2e8ccf
  • terminal.ansiGreen#98c379
  • terminal.ansiYellow#b4881d
  • terminal.foreground#c8c8c8
  • titleBar.activeBackground#505050
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#505050
  • titleBar.inactiveForeground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant.edge#ac87b8
constant.other.character-class.regexp#e06c75ff
keyword.operator.quantifier.regexp#d19a66ff
punctuation.definition.string.begin,punctuation.definition.string.end#d1b994
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#7F848Eitalic
comment markup.link#5C6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#98c379
markup.deleted.diff#e06c75
meta.function.c#e06c75
keyword.control.cpp#e5c07b
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#bbbbbb
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
keyword.operator.expression.import#61afef
support.constant.math#94d476
support.constant.property.math#d19a66
variable.other.constant#d19a66
storage.type.annotation.java#e5c07b
source.java#e06c75
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,storage.type.generic.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,meta.method.body.java#abb2bf
meta.method.java#61afef
storage.modifier.import.java,storage.type.java#e5c07b
meta.definition.variable.name.java#e06c75
keyword.operator.logical.js#56b6c2
keyword.operator.bitwise#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#76a5cc
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d19a66
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#d19a66
support.type.vendored.property-name.css#56b6c2
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#e06c75
support.module.node,support.type.object.module,support.module.node#e06c75bold
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#e98c93
support.constant.json#d19a66
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#c678dd
support.type.object.console#e06c75
support.variable.property.process#d19a66
entity.name.function,support.function.console#61afef
keyword.operator#56b6c2
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#e06c75
keyword.operator.arithmetic,keyword.operator.comparison#56b6c2
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#c678ddff
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#d19a66
support.type.python#56b6c2
keyword.operator.logical.python#c678dd
meta.function-call.arguments.python#E06C60
meta.function-call.python#E06C60
variable.parameter.function.python#D18C4E
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#abb2bf
meta.function-call.generic.python#61afef
constant.character.format.placeholder.other.python#98c379
none#ffffff
keyword.operator#abb2bf
keyword#c678dd
variable#e06c75
token.variable.parameter.java#abb2bf
import.storage.java#a07be5
token.package.keyword#c678dd
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method#5dc2ac
entity.name.type.namespace#71c282
support.class, entity.name.type.class#71c282
entity.name.class.identifier.namespace.type#71c282
entity.name.class#61afef
entity.name.type#9de57bitalic
keyword.control#d3bc7citalic
control.elements, keyword.operator.less#d19a66
keyword.other.special-method#61afef
storage#d3bc7citalic
token.storage#d3bc7c
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#d3bc7c
token.storage.type.java#e5c07b
support.function#56b6c2
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#d19a66
meta.tag#abb2bf
string, entity.other.inherited-class#d1b994
constant.other.symbol#56b6c2
constant.numeric#d19a66
none#d19a66
none#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#e06c75
entity.other.attribute-name#d19a66
entity.other.attribute-name.id#61afef
entity.other.attribute-name.class.css#d19a66
meta.selector#c678dd
none#D2945D
markup.heading#e06c75bold
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#d19a66
markup.bold,todo.bold#d19a66bold
punctuation.definition.bold#e5c07b
markup.italic, punctuation.definition.italic,todo.emphasis#c678dd
emphasis md#c678dd
entity.name.section.markdown#E06C75
punctuation.definition.heading.markdown#E06C75
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#D19A66
markup.inline.raw.markdown#98C379
markup.inline.raw.string.markdown#98c379
beginning.punctuation.definition.list.markdown#E06C75
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#C678DD
markup.underline.link.markdown,markup.underline.link.image.markdown#C678DD
string.other.link.title.markdown,string.other.link.description.markdown#61AFEF
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#E06C75
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E06C75
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#E06C75
support.type.property-name.json punctuation#E06C75
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C679DD
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C679DD
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#C678DD
keyword.operator.type.php#C678DD
punctuation.section.array.begin.php#abb2bf
punctuation.section.array.end.php#abb2bf
invalid.illegal.non-null-typehinted.php#ff0000
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#bbbbbb
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#c678dd
keyword.operator.comparison.php#56b6c2
punctuation.definition.variable.php#e06c75
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#c678dd
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#56B6C2
function.parameter#d19a66
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
rgb-value#56B6C2
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
selector.sass#e06c75
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#e5c07bitalic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e5c07b
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#e5c07bff
entity.name.variable.local.cs#e06c75
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#d3bc7c
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d3bc7c
meta.template.expression#abb2bf
keyword.operator.assignment.go, keyword.operator.address.go#E5C07B
support.type.prelude.elm#56b6c2ff
support.constant.elm#d19a66ff
variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsx#d19a66ffitalic
variable.other.object.js, variable.other.object.jsx, variable.other.object.ts, variable.other.object.tsx#d19a66ff
storage.modifier.js, storage.modifier.jsx, storage.modifier.ts, storage.modifier.tsxitalic
variable.parameter.js, variable.parameter.jsx, variable.parameter.ts, variable.parameter.tsx#71c282
variable.other.readwrite.js, variable.other.readwrite.jsx, variable.other.readwrite.ts, variable.other.readwrite.tsx#abb2bfff
support.function.js, support.function.dom.js, support.function.jsx, support.function.dom.jsx, support.function.ts, support.function.dom.ts, support.function.tsx, support.function.dom.tsx#56b6c2ffitalic
variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsx#ba8bf7italic
variable.other.object.js, variable.other.object.jsx, variable.other.object.ts, variable.other.object.tsx#d19a66ff
storage.modifier.js, storage.modifier.jsx, storage.modifier.ts, storage.modifier.tsxitalic
variable.parameter.js, variable.parameter.jsx, variable.parameter.ts, variable.parameter.tsx#ba8bf7
variable.other.readwrite.js, variable.other.readwrite.jsx, variable.other.readwrite.ts, variable.other.readwrite.tsx#a2aaec
support.function.js, support.function.dom.js, support.function.jsx, support.function.dom.jsx, support.function.ts, support.function.dom.ts, support.function.tsx, support.function.dom.tsx#71c282italic
punctuation.definition.comment.js, punctuation.definition.comment.jsx, punctuation.definition.comment.ts, punctuation.definition.comment.tsx, comment.block.js, comment.block.jsx, comment.block.ts, comment.block.tsx, comment.line.double-slash.js, comment.line.double-slash.jsx, comment.line.double-slash.ts, comment.line.double-slash.tsx, comment.block.documentation.js, comment.block.documentation.jsx, comment.block.documentation.ts, comment.block.documentation.tsx#7c7c7citalic