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#131313
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#3f0088
  • activityBarBadge.foreground#F8FAFD
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#131313
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#131313
  • dropdown.border#181A1F
  • editor.background#131313
  • editor.findMatchHighlightBackground#131313
  • editor.lineHighlightBackground#131313
  • editor.selectionBackground#292929
  • editor.selectionHighlightBackground#363636
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#AAB1C026
  • editorCursor.foreground#01691d
  • editorError.foreground#5f1d1a
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#131313
  • editorHoverWidget.background#131313
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#AAB1C026
  • editorSuggestWidget.background#131313
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#21252B
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • 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#131313
  • sideBarSectionHeader.background#282c34
  • statusBar.background#131313
  • statusBar.debuggingBackground#131313
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#131313
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#131313
  • tab.border#131313
  • tab.inactiveBackground#131313
  • terminal.ansiBlack#2D3139
  • terminal.ansiBlue#215377
  • terminal.ansiGreen#546d43ff
  • terminal.ansiYellow#866718
  • terminal.foreground#C8C8C8
  • titleBar.activeBackground#131313
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#131313
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other.character-class.regexp#e06c75ff
keyword.operator.quantifier.regexp#d19a66ff
punctuation.definition.string.begin,punctuation.definition.string.end#006c86
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#5C6370italic
comment markup.link#5C6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#004c8a
markup.inserted.diff#006c86
markup.deleted.diff#d6d6d6
meta.function.c#d6d6d6
keyword.control.cpp#a36a00
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#AAB1C0
punctuation.separator.key-value#FFFFFF
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#015291
support.constant.math#a36a00
support.constant.property.math#996f47
variable.other.constant#a36a00
storage.type.annotation.java#a36a00
source.java#d6d6d6
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#AAB1C0
meta.method.java#015291
storage.modifier.import.java,storage.type.java#006492
meta.definition.variable.name.java#d6d6d6
keyword.operator.logical#00858f
keyword.operator.bitwise#00858f
support.constant.property-value.scss,support.constant.property-value.css#640d9e
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#640d9e
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#640d9e
support.type.vendored.property-name.css#00858f
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#d6d6d6
support.module.node,support.type.object.module#a36a00
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#d6d6d6
comment.line.double-slash,comment.block.documentationnormal
support.constant.json#640d9e
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#5b0097
support.type.object.console#d6d6d6
support.variable.property.process#640d9e
entity.name.function,support.function.console#015291
keyword.operator#00858f
support.type.object.dom#00858f
support.variable.dom,support.variable.property.dom#d6d6d6
keyword.operator.arithmetic,keyword.operator.comparison#00858f
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#5b0097
punctuation.separator.delimiter.c#FFFFFF
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#640d9e
support.type.python#00858f
keyword.operator.logical.python#5b0097
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#AAB1C0
meta.function-call.generic.python#015291
constant.character.format.placeholder.other.python#546d43
none#A6B2C0
keyword.operator#AAB1C0
keyword#5b0097
variable#d6d6d6
token.variable.parameter.java#AAB1C0
import.storage.java#a36a00
token.package.keyword#5b0097
token.package#AAB1C0
entity.name.function, meta.require, support.function.any-method#015291
entity.name.type.namespace#a36a00
support.class, entity.name.type.class#a36a00
entity.name.class.identifier.namespace.type#a36a00
entity.name.class#015291
entity.name.type#a36a00
keyword.control#5b0097
control.elements, keyword.operator.less#640d9e
keyword.other.special-method#015291
storage#5b0097
token.storage#5b0097
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#5b0097
token.storage.type.java#a36a00
support.function#00858f
support.type.property-name#AAB1C0
support.constant.property-value#AAB1C0
support.constant.font-name#640d9e
meta.tag#4e3574
string, entity.other.inherited-class#006c86
constant.other.symbol#00858f
constant.numeric#640d9e
none#640d9e
none#640d9e
constant#640d9e
punctuation.definition.constant#640d9e
entity.name.tag#949494
entity.other.attribute-name#640d9e
entity.other.attribute-name.id#015291normal
entity.other.attribute-name.class.css#640d9enormal
meta.selector#5b0097
none#D2945D
markup.heading#d6d6d6bold
markup.heading punctuation.definition.heading, entity.name.section#015291
keyword.other.unit#640d9e
markup.bold,todo.bold#640d9ebold
punctuation.definition.bold#a36a00
markup.italic,punctuation.definition.italic,todo.emphasis#5b0097
emphasis md#5b0097
entity.name.section.markdown#d6d6d6
punctuation.definition.heading.markdown#d6d6d6
markup.heading.setext#AAB1C0
punctuation.definition.bold.markdown#640d9e
markup.inline.raw.markdown#006c86
markup.inline.raw.string.markdown#006c86
beginning.punctuation.definition.list.markdown#d6d6d6
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#AAB1C0
punctuation.definition.metadata.markdown#5b0097
markup.underline.link.markdown,markup.underline.link.image.markdown#5b0097
string.other.link.title.markdown,string.other.link.description.markdown#015291
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#2f676e
constant.character.escape#2f676e
punctuation.section.embedded, variable.interpolation#d6d6d6
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#d6d6d6
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#d6d6d6
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#006c86
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#00858f
support.type.property-name.json#d6d6d6
support.type.property-name.json punctuation#d6d6d6
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#875297
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#875297
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php#a36a00
keyword.operator.error-control.php#5b0097
keyword.operator.type.php#5b0097
punctuation.section.array.begin.php#AAB1C0
punctuation.section.array.end.php#AAB1C0
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#a36a00
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#015291
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#FFFFFF
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#640d9e
entity.name.goto-label.php,support.other.php#015291
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#00858f
keyword.operator.regexp.php#5b0097
keyword.operator.comparison.php#00858f
punctuation.definition.variable.php#d6d6d6
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#5b0097
meta.function.decorator.python#015291
support.token.decorator.python,meta.function.decorator.identifier.python#00858f
function.parameter#640d9e
function.parameter#AAB1C0
function.brace#AAB1C0
function.parameter.ruby, function.parameter.cs#AAB1C0
rgb-value#00858f
inline-color-decoration rgb-value#640d9e
less rgb-value#640d9e
selector.sass#d6d6d6
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#a36a00italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#a36a00
block.scope.end,block.scope.begin#AAB1C0
entity.name.variable.local.cs#d6d6d6
token.info-token#3d5681
token.warn-token#cd9731
token.error-token#882c2c
token.debug-token#764499
storage.type.cs#a36a00