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#303845
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#4D78CC
  • activityBarBadge.foreground#F8FAFD
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#232933
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#2C323C
  • dropdown.border#2C323C
  • editor.background#303845
  • editor.findMatchBackground#42557B
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#2C323C
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#ddd
  • editor.wordHighlightBackground#484e5b
  • 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#232933
  • editorHoverWidget.background#232933
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground#909039
  • editorIndentGuide.background#303845
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#232933
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#2D3440
  • editorSuggestWidget.border#303845
  • editorSuggestWidget.foreground#D8D9DC
  • editorSuggestWidget.selectedBackground#383E4A
  • editorWhitespace.foreground#303845
  • editorWidget.background#232933
  • focusBorder#232933
  • input.background#232933
  • input.placeholderForeground#BBBBBB
  • list.activeSelectionBackground#292D35
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292D35
  • list.inactiveSelectionBackground#292D35
  • list.inactiveSelectionForeground#d7dae0
  • menu.background#2D3440
  • menu.foreground#CCCCCC
  • menu.separatorBackground#575658
  • peekView.border#A2A8B0
  • peekViewEditor.background#303845
  • peekViewEditor.matchHighlightBackground#455064
  • peekViewResult.background#303842
  • peekViewResult.selectionBackground#4c5870
  • peekViewTitle.background#30353B
  • peekViewTitleLabel.foreground#E8EAED
  • pickerGroup.border#575658
  • quickInput.background#303845
  • scrollbarSlider.activeBackground#535a69
  • scrollbarSlider.background#535a69
  • scrollbarSlider.hoverBackground#535a69
  • sideBar.background#2D3440
  • sideBarSectionHeader.background#2D3440
  • statusBar.background#465163
  • statusBar.debuggingBackground#515761
  • statusBar.debuggingBorder#515761
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#8292ac
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#232933
  • statusBarItem.focusBorder#8292ac
  • statusBarItem.hoverBackground#232933
  • tab.activeBackground#3B4252
  • tab.border#303845
  • tab.hoverBackground#323842
  • tab.inactiveBackground#2B303B
  • tab.inactiveForeground#DDDEE0
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#2D3139
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightMagenta#CAA6ED
  • terminal.ansiGreen#92D69E
  • terminal.ansiMagenta#CAA6ED
  • terminal.ansiYellow#EBB07A
  • terminal.foreground#C8C8C8
  • titleBar.activeBackground#303845
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#303845
  • titleBar.inactiveForeground#9da5b4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant.edge#C792EA
constant.other.character-class.regexp#DE7C84ff
keyword.operator.quantifier.regexp#EBB07Aff
punctuation.definition.string.begin,punctuation.definition.string.end#92D69E
variable.parameter.function#A6B2C0
beginning.punctuation.definition.list.markdown.xi#7f848e
comment, punctuation.definition.comment#7F848Enormal
comment markup.link#5C6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#92D69E
markup.deleted.diff#DE7C84
meta.function.c#DE7C84
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#DBB979
support.constant.property.math#EBB07A
variable.other.constant#EBB07A
storage.type.annotation.java#DBB979
source.java#DE7C84
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#DBB979
meta.definition.variable.name.java#DE7C84
keyword.operator.logical.js#56b6c2
keyword.operator.bitwise#56b6c2
keyword.operator.channel#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#EBB07A
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#EBB07A
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#EBB07A
support.type.vendored.property-name.css#56b6c2
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#DE7C84
support.module.node,support.type.object.module,support.module.node#DBB979
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#DE7C84
comment.line.double-slash,comment.block.documentationnormal
support.constant.json#EBB07A
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional#C792EA
support.type.object.console#DE7C84
support.variable.property.process#EBB07A
entity.name.function,support.function.console#61afef
keyword.operator#56b6c2
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#DE7C84
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment#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#C792EAff
punctuation.separator.delimiter#bbbbbb
punctuation.separator.c#C792EAff
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#EBB07A
support.type.python#56b6c2
keyword.operator.logical.python#C792EA
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#92D69E
none#A6B2C0
keyword.operator#abb2bf
keyword.operator.assignment.compound#C792EAff
keyword#C792EA
variable#DE7C84
token.variable.parameter.java#abb2bf
import.storage.java#DBB979
token.package.keyword#C792EA
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#61afef
entity.name.type.namespace#DBB979
support.class, entity.name.type.class#DBB979
entity.name.class.identifier.namespace.type#DBB979
entity.name.class, variable.other.class.js, variable.other.class.ts#DBB979
variable.other.class.php#DE7C84ff
entity.name.type#DBB979
keyword.control#C792EA
control.elements, keyword.operator.less#EBB07A
keyword.other.special-method#61afef
storage#C792EA
token.storage#C792EA
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#C792EA
token.storage.type.java#DBB979
support.function#56b6c2
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#EBB07A
meta.tag#abb2bf
string, entity.other.inherited-class#92D69E
constant.other.symbol#56b6c2
constant.numeric#EBB07A
none#EBB07A
none#EBB07A
constant#EBB07A
punctuation.definition.constant#EBB07A
entity.name.tag#DE7C84
entity.other.attribute-name#EBB07A
entity.other.attribute-name.id#61afefnormal
entity.other.attribute-name.class.css#EBB07Anormal
meta.selector#C792EA
none#D2945D
markup.heading#C792EA
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#DE7C84
markup.bold,todo.bold#92D69E
punctuation.definition.bold#DBB979
markup.italic, punctuation.definition.italic,todo.emphasis#C792EA
emphasis md#C792EA
entity.name.section.markdown#C792EA
punctuation.definition.heading.markdown#C792EA
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#92D69E
markup.inline.raw.markdown#92D69E
markup.inline.raw.string.markdown#92D69E
punctuation.definition.list.markdown#DE7C84
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#DE7C84
beginning.punctuation.definition.list.markdown#DE7C84
punctuation.definition.metadata.markdown#DE7C84
markup.underline.link.markdown,markup.underline.link.image.markdown#C792EA
string.other.link.title.markdown,string.other.link.description.markdown#61AFEF
markup.italic.markdownitalic
markup.bold.markdown
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#DE7C84
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#DE7C84
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#92D69E
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56B6C2
support.type.property-name.json#C792EA
support.type.property-name.json punctuation#C792EA
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#DBB979
keyword.operator.error-control.php#C792EA
keyword.operator.type.php#C792EA
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#DBB979
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#EBB07A
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#C792EA
keyword.operator.comparison.php#56b6c2
punctuation.definition.variable.php#DE7C84
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#C792EA
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#56B6C2
function.parameter#EBB07A
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
rgb-value#56B6C2
inline-color-decoration rgb-value#EBB07A
less rgb-value#EBB07A
selector.sass#DE7C84
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#DBB979italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#DBB979
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#DBB979ff
entity.name.variable.local.cs#DE7C84
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C792EA
meta.template.expression#abb2bf
keyword.operator.assignment.go, keyword.operator.address.go#DBB979
entity.name.package.go#DBB979
support.type.prelude.elm#56b6c2ff
support.constant.elm#EBB07Aff
punctuation.quasi.element#C792EA
constant.character.entity#DE7C84
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56B6C2
entity.global.clojure#DBB979
meta.symbol.clojure#DE7C84
constant.keyword.clojure#56B6C2
meta.arguments.coffee, variable.parameter.function.coffee#DE7C84
source.ini#92D69E
meta.scope.prerequisites.makefile#DE7C84
source.makefile#DBB979
storage.modifier.import.groovy#DBB979
meta.method.groovy#61afef
meta.definition.variable.name.groovy#DE7C84
meta.definition.class.inherited.classes.groovy#92D69E
support.variable.semantic.hlsl#DBB979
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#C792EA
text.variable, text.bracketed#DE7C84
support.type.swift, support.type.vb.asp#DBB979

Shiki preview

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

Loading...