Skip to main content
CodingTheme

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#0d0d0d
  • activityBar.foreground#d08cf2
  • activityBarBadge.background#d08cf2aa
  • activityBarBadge.foreground#ffffff
  • badge.background#1a1a1a
  • button.background#f28ee1aa
  • button.foreground#ffffff
  • button.hoverBackground#f28ee1
  • debugToolBar.background#121212
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#121212
  • dropdown.border#181A1F
  • editor.background#1a1a1a
  • editor.editor.findMatchBackground#f141d322
  • editor.findMatchHighlightBackground#f141d355
  • editor.lineHighlightBackground#f141d309
  • editor.selectionBackground#d08cf233
  • editor.selectionHighlightBackground#d08cf233
  • editor.wordHighlightBackground#d08cf233
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorCursor.foreground#f141d3
  • editorError.foreground#e05252
  • editorGroup.background#181A1F
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#121212
  • editorHoverWidget.background#121212
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#e6e6e609
  • editorLineNumber.foreground#666666
  • editorMarkerNavigation.background#121212
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#121212
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#1a1a1a
  • editorWhitespace.foreground#e6e6e609
  • editorWidget.background#121212
  • input.background#121212
  • list.activeSelectionBackground#666666
  • list.activeSelectionForeground#e6e6e6
  • list.focusBackground#444444
  • list.highlightForeground#cccccc
  • list.hoverBackground#666666
  • list.inactiveSelectionBackground#666666
  • list.inactiveSelectionForeground#e6e6e6
  • notification.background#121212
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#121212
  • sideBarSectionHeader.background#1a1a1a
  • statusBar.background#121212
  • statusBar.debuggingBackground#121212
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#121212
  • statusBarItem.hoverBackground#1a1a1a
  • tab.activeBackground#1a1a1a
  • tab.border#181A1F
  • tab.inactiveBackground#121212
  • titleBar.activeBackground#333333
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#8c8c8c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.string.begin,punctuation.definition.string.end#98c378
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#1d292bitalic
comment#1d292bitalic
comment markup.link#5C6370
markup.changed.diff#e0c286
meta.diff.header.from-file,punctuation.definition.from-file.diff#33a0ff
markup.inserted.diff#43d08a
markup.deleted.diff#e05252
meta.function.c#e06c75
keyword.control.cpp#004734
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#004734
support.constant.property.math#d19a66
variable.other.constant#d19a66
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#e06c75
support.module.node,support.type.object.module,support.module.node#004734
variable.other.readwrite,support.variable.property,support.variable.object.process,support.variable.object.node#00796b
meta.object-literal.key#e6e6e6
support.constant.json#d19a66
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#ab47bc
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
storage.type.annotation.java#004734
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#004734
meta.definition.variable.name.java#e06c75
token.variable.parameter.java#abb2bf
import.storage.java#004734
keyword.operator.logical.js#ffffff
keyword.operator.bitwise#ffffff
support.constant.property-value.scss,support.constant.property-value.css#d19a66
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
comment.line.double-slash,comment.block.documentationbold italic
keyword.operator.arithmetic,keyword.operator.comparison#ffffff
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#ab47bcff
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
meta.function.decorator.python#f2f28d
support.token.decorator.python,meta.function.decorator.identifier.python#56B6C2
variable.parameter.function.language.python#d19a66
support.type.python#56b6c2
keyword.operator.logical.python#ab47bc
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
punctuation.definition.comment#1e2526
none#8c8c8c
keyword.operator#f28c8c
keyword#f2f28c
variable#7986cb
token.package.keyword#8cf2f2
token.package#E6E6E6
entity.name.function, meta.require, support.function.any-method#ff9100
entity.name.type.namespace#f28ce1
support.class, entity.name.type.class#f28ce1
entity.name.class.identifier.namespace.type#f28ce1
entity.name.class#f28ce1
entity.name.type#f28c8c
keyword.control#f2f28c
control.elements, keyword.operator.less#f2f28c
keyword.other.special-method#ff9100
storage#ab47bc
token.storage#8e24aa
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#ab47bc
token.storage.type.java#004734
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#9e9e9e
constant.other.symbol#56b6c2
constant.numeric#8cf2f2
none#8cf2f2
none#8cf2f2
constant#8cf2f2
punctuation.definition.constant#8cf2f2
entity.name.tag#7986cb
entity.other.attribute-name#ab47bc
entity.other.attribute-name.id#ff9100normal
entity.other.attribute-name.class.css#d08cf2normal
meta.selector#f2f28d
none#9e9e9e
markup.heading#d08cf2bold
markup.heading punctuation.definition.heading, entity.name.section#8df2f2
keyword.other.unit#f2bf8d
markup.bold,todo.bold#f2bf8dbold
punctuation.definition.bold#f2f28d
markup.italic, punctuation.definition.italic,todo.emphasis#d08df2
emphasis md#d08df2
entity.name.section.markdown#f2f28d
punctuation.definition.heading.markdown#f2f28d
markup.heading.setext#f2bf8d
punctuation.definition.bold.markdown#424242
markup.inline.raw.markdown#8df2f2
beginning.punctuation.definition.list.markdown#00796b
markup.quote.markdown#7986cbitalic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#f2f28d
punctuation.definition.metadata.markdown#424242
markup.underline.link.markdown,markup.underline.link.image.markdown#424242
string.other.link.title.markdown,string.other.link.description.markdown##9e9e9e
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#e0c286
constant.character.escape#f2bf8d
punctuation.section.embedded, variable.interpolation#00796b
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#7986cb
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#7986cb
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#8df28d
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#f2bf8d
support.type.property-name.json#7986cb
support.type.property-name.json punctuation#8df2f2
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#d08df2
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#d08df2
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php#f2f28d
keyword.operator.error-control.php#d08df2
keyword.operator.type.php#d08df2
punctuation.section.array.begin.php#7986cb
punctuation.section.array.end.php#7986cb
invalid.illegal.non-null-typehinted.php#e05252
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#e0c286
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#00796b
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#e6e6e6
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#7986cb
entity.name.goto-label.php,support.other.php#00796b
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#f2f28d
keyword.operator.regexp.php#00796b
keyword.operator.comparison.php#8df2f2
punctuation.definition.variable.php#d08df2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#d08df2
function.parameter#f28ee1
function.parameter#abb2f28ee1bf
function.brace#e6e6e6
function.parameter.ruby, function.parameter.cs#f28ee1
rgb-value#7986cb
inline-color-decoration rgb-value#8df2f2
less rgb-value#7986cb
selector.sass#8df2f2
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#f28ee1italic
support.type.primitive.ts,support.type.builtin.ts#00796b
block.scope.end,block.scope.begin#e6e6e6
entity.name.variable.local.cs#d08df2
token.info-token#33a0ff
token.warn-token#e0c286
token.error-token#e05252
token.debug-token#43d08a

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...