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#212136
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#ffbbee
  • activityBarBadge.foreground#0e0e0e
  • badge.background#292a44
  • button.background#404754
  • debugToolBar.background#292a44
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#292a44
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#f1eff7
  • editor.lineHighlightBackground#1073cf2d
  • editor.lineHighlightBorder#9fced11f
  • editor.selectionBackground#4f528a
  • editor.selectionHighlightBackground#484e5b
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#484e5b
  • editorCursor.foreground#94f2e7
  • editorError.foreground#c24038
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#292a44
  • editorHoverWidget.background#292a44
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background1#3b4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#292a44
  • editorRuler.foreground#333454
  • editorStickyScroll.background#34335a
  • editorStickyScrollHover.background#ffffff0d
  • editorSuggestWidget.background#292a44
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#363759
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#292a44
  • focusBorder#bf98ff
  • gitDecoration.untrackedResourceForeground#7ee89c
  • icon.foreground#ffbbee
  • input.background#1d1f23
  • list.activeSelectionBackground#363759
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#363759
  • list.inactiveSelectionBackground#363759
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#fed087
  • panel.border#815475
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#212136
  • sideBarSectionHeader.background#212136
  • statusBar.background#212136
  • statusBar.debuggingBackground#212136
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#212136
  • statusBarItem.hoverBackground#363759
  • tab.activeBackground#363759
  • tab.border#181a1f
  • tab.inactiveBackground#212136
  • titleBar.activeBackground#212136
  • titleBar.activeForeground#9da5b4
  • titleBar.border#19181e
  • titleBar.inactiveBackground#212136
  • titleBar.inactiveForeground#6b717d
  • widget.shadow#ffbbee66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.string.begin,punctuation.definition.string.end#6DFEDF
variable.parameter.function#F1EFF7
comment, punctuation.definition.comment#6D6DB5italic
comment#6D6DB5italic
comment markup.link#5C6370
markup.changed.diff#E0C285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569CD6
markup.inserted.diff#6DFEDF
markup.deleted.diff#FFA8FE
meta.function.c#FFA8FE
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#F1EFF7
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#2DE0A7
support.constant.math#E5C07B
support.constant.property.math#AE81FF
variable.other.constant#AE81FF
storage.type.annotation.java#E5C07B
source.java#FFA8FE
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#F1EFF7
meta.method.java#2DE0A7
storage.modifier.import.java,storage.type.java#E5C07B
meta.definition.variable.name.java#FFA8FE
keyword.operator.logical.js#7AA5FF
keyword.operator.quantifier.regexp#7AA5FF
keyword.operator.bitwise#7AA5FF
support.constant.property-value.scss,support.constant.property-value.css#66D9EF
punctuation.separator.list.comma.css#B9C0CA
support.type.vendored.property-name.css, support.type.property-name.css#66D9EF
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#FFA8FE
support.module.node,support.type.object.module,support.module.node#7AA5FF
support.type.primitive, entity.name.type.entity.name.type.js.meta.type.annotation.js, entity.name.type.entity.name.type.js.meta.return.type.js#66D9EF
keyword.operator.type.annotation, keyword.operator.optional, meta.return.type.js#7AA5FF
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.node#FFA8FE
support.variable.object.process, support.variable.property.process#66D9EF
comment.line.double-slash,comment.block.documentationnormal
support.constant.json#AE81FF
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#7AA5FF
support.type.object.console#FFA8FE
entity.name.function,support.function.console#2DE0A7
keyword.operator#2DE0A7
support.type.object.dom#2DE0A7
support.variable.dom,support.variable.property.dom#66D9EF
keyword.operator.arithmetic,keyword.operator.comparison#7AA5FF
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#7AA5FF
punctuation.separator.delimiter.c#BBBBBB
support.type.posix-reserved.c#57ADB8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#AE81FF
support.type.python#2DE0A7
keyword.operator.logical.python#7AA5FF
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#F1EFF7
meta.function-call.generic.python#2DE0A7
keyword.operator.misc.rust#7AA5FF
punctuation.definition.comment#5C6370
none#A6B2C0
keyword.operator#F1EFF7
keyword#7AA5FF
variable#FFA8FE
token.variable.parameter.java#F1EFF7
import.storage.java#E5C07B
token.package.keyword#7AA5FF
token.package#F1EFF7
entity.name.function, meta.require, support.function.any-method#2DE0A7
entity.name.type.namespace#66D9EF
support.class#66D9EF
entity.other.inherited-class#678BDC
entity.name.class.identifier.namespace.type, entity.name.type.class#678BDC
entity.name.class#2DE0A7
entity.name.type#2DE0A7
keyword.control#7AA5FF
control.elements, keyword.operator.less#AE81FF
keyword.other.special-method#2DE0A7
storage#E479FF
token.storage#7AA5FF
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#7AA5FF
token.storage.type.java#E5C07B
support.function#66D9EF
support.type.property-name#F1EFF7
support.constant.property-value#F1EFF7
support.constant.font-name#AE81FF
meta.tag#F1EFF7
string#6DFEDF
constant.other.symbol#2DE0A7
constant.numeric#FFDB7D
none#AE81FF
none#AE81FF
constant#AE81FF
constant.language.import-export-all#7AA5FF
punctuation.definition.constant#AE81FF
entity.name.tag#66D9EF
entity.other.attribute-name#F92672
entity.other.attribute-name.id#2DE0A7normal
entity.other.attribute-name.class.css#F92672normal
meta.selector#7AA5FF
none#D2945D
markup.heading, markup.heading punctuation.definition.heading, entity.name.section#2DE0A7
keyword.other.unit#7AA5FF
markup.bold,todo.bold#AE81FFbold
punctuation.definition.bold#E5C07B
markup.italic, punctuation.definition.italic,todo.emphasis#7AA5FF
emphasis md#7AA5FF
entity.name.section.markdown#2DE0A7
punctuation.definition.heading.markdown#2DE0A7
markup.heading.setext#F1EFF7
punctuation.definition.bold.markdown#AE81FF
markup.inline.raw.markdown#6D6DB5
beginning.punctuation.definition.list.markdown#FFA8FE
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#F1EFF7
punctuation.definition.metadata.markdown#7AA5FF
markup.underline.link.markdown,markup.underline.link.image.markdown#6DFEDF
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.italic.markdownitalic
markup.bold.markdownbold
meta.paragraph.markdown#F1EFF7
string.regexp#6DFEDF
constant.character.escape#AE81FF
punctuation.section.embedded, variable.interpolation#FFA8FE
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#FFA8FE
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#FFA8FE
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#6DFEDF
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#2DE0A7
support.type.property-name.json#FFA8FE
support.type.property-name.json punctuation#FFA8FE
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#E5C07B
keyword.operator.error-control.php#7AA5FF
keyword.operator.type.php#7AA5FF
punctuation.section.array.begin.php#F1EFF7
punctuation.section.array.end.php#F1EFF7
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#2DE0A7
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#BBBBBB
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#AE81FF
entity.name.goto-label.php,support.other.php#2DE0A7
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#2DE0A7
keyword.operator.regexp.php#7AA5FF
keyword.operator.comparison.php#2DE0A7
punctuation.definition.variable.php#FFA8FE
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#7AA5FF
meta.function.decorator.python#2DE0A7
support.token.decorator.python,meta.function.decorator.identifier.python#2DE0A7
function.parameter#AE81FF
function.parameter#F1EFF7
function.brace#F1EFF7
function.parameter.ruby, function.parameter.cs#F1EFF7
rgb-value#2DE0A7
inline-color-decoration rgb-value#AE81FF
less rgb-value#AE81FF
selector.sass#FFA8FE
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#FFA8FEitalic
support.type.primitive.ts,support.type.builtin.ts#FFA8FE
block.scope.end,block.scope.begin#F1EFF7
entity.name.variable.local.cs#FFA8FE
constant.other.symbol.ruby, constant.other.symbol.hashkey.ruby#AE81FF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
variable.other.property#FF58D5
keyword.control#959CFF
support.class#9BCDFCitalic
string#5FFFB4
constant.numeric#FFE240