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#0a0a0a
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#0dc1af
  • activityBarBadge.foreground#0f0f0f
  • badge.background#0dc1af
  • badge.foreground#0f0f0f
  • button.background#0dc1af
  • button.foreground#0f0f0f
  • button.hoverBackground#19c4b3
  • charts.blue#0dc1af
  • charts.green#9fdfa7ff
  • charts.orange#dfbe9fff
  • charts.purple#b69fdfff
  • charts.red#df9f9f
  • charts.yellow#dfc59f
  • descriptionForeground#575757
  • diffEditor.insertedLineBackground#9fdfac15
  • diffEditor.insertedTextBackground#9fdfac15
  • diffEditor.removedLineBackground#df9f9f33
  • diffEditor.removedTextBackground#df9f9f33
  • editor.background#0a0a0a
  • editor.findMatchBackground#0dc1af54
  • editor.foreground#e0e0e0
  • editor.hoverHighlightBackground#fafafa26
  • editor.selectionBackground#051f1b
  • editor.selectionHighlightBackground#e0e0e026
  • editor.wordHighlightBackground#0dc1af16
  • editor.wordHighlightStrongBackground#0dc1af16
  • editorBracketHighlight.unexpectedBracket.foreground#df9f9f
  • editorCursor.foreground#0dc1af
  • editorError.foreground#df9f9f
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGutter.addedBackground#b3b3b3
  • editorGutter.deletedBackground#df9f9f
  • editorGutter.modifiedBackground#b3b3b3
  • editorHoverWidget.background#0e0e0e
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#e0e0e0
  • editorInlayHint.background#0e0e0e
  • editorInlayHint.foreground#575757
  • editorLineNumber.activeForeground#9e9e9e
  • editorLineNumber.foreground#3b3b3b
  • editorLink.activeForeground#fafafa
  • editorLink.foreground#c2c2c2
  • editorOverviewRuler.border#0a0a0a
  • editorWarning.foreground#dfc59f
  • editorWidget.background#0e0e0e
  • focusBorder#0dc1af
  • foreground#e0e0e0
  • gitDecoration.conflictingResourceForeground#df9f9f
  • gitDecoration.deletedResourceForeground#df9f9f
  • gitDecoration.ignoredResourceForeground#575757
  • gitDecoration.modifiedResourceForeground#e0e0e0
  • gitDecoration.untrackedResourceForeground#e0e0e0
  • icon.foreground#e0e0e0
  • input.background#0e0e0e
  • input.foreground#e0e0e0
  • inputOption.activeForeground#fafafa
  • list.activeSelectionBackground#ffffff14
  • list.activeSelectionForeground#0dc1af
  • list.errorForeground#df9f9f
  • list.focusOutline#00000000
  • list.highlightForeground#0dc1af
  • list.hoverBackground#ffffff0a
  • list.inactiveSelectionBackground#ffffff14
  • list.warningForeground#dfc59f
  • pickerGroup.foreground#e0e0e0
  • quickInput.background#0e0e0e
  • quickInput.foreground#e0e0e0
  • quickInputList.focusBackground#051f1b
  • quickInputList.focusForeground#fafafa
  • scrollbarSlider.background#ffffff12
  • scrollbarSlider.hoverBackground#ffffff24
  • selection.background#051f1b
  • settings.modifiedItemIndicator#0dc1af
  • sideBar.background#0a0a0a
  • sideBar.foreground#9e9e9e
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.foreground#e0e0e0
  • sideBarTitle.foreground#9e9e9e
  • statusBar.background#0a0a0a
  • statusBar.debuggingBackground#dfc59f
  • statusBar.debuggingForeground#0f0f0f
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#0a0a0a
  • statusBar.noFolderForeground#e0e0e0
  • statusBarItem.hoverBackground#ffffff0a
  • statusBarItem.hoverForeground#e0e0e0
  • statusBarItem.remoteBackground#0dc1af
  • statusBarItem.remoteForeground#0f0f0f
  • tab.activeBackground#0e0e0e
  • tab.activeBorder#0dc1af
  • tab.activeForeground#fafafa
  • tab.border#0a0a0a
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#b3b3b3
  • terminal.ansiBlack#131317
  • terminal.ansiBlue#0dc1af
  • terminal.ansiBrightBlack#5c5c5c
  • terminal.ansiBrightBlue#0dc1af
  • terminal.ansiBrightCyan#dfc59f
  • terminal.ansiBrightGreen#9fc1dfff
  • terminal.ansiBrightMagenta#fdfdfe
  • terminal.ansiBrightRed#df9f9f
  • terminal.ansiBrightWhite#868690
  • terminal.ansiBrightYellow#9898a6
  • terminal.ansiCyan#dfc59f
  • terminal.ansiGreen#9fc1dfff
  • terminal.ansiMagenta#fdfdfe
  • terminal.ansiRed#df9f9f
  • terminal.ansiWhite#868690
  • terminal.ansiYellow#9898a6
  • textLink.activeForeground#fafafa
  • textLink.foreground#c2c2c2
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#b3b3b3
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#9d9d9d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.object-literal.key, meta.object-literal.key.ts, meta.object-literal.key.js, meta.object-literal.key.tsx, meta.object-literal.key.jsx, variable.other.object.key, string.unquoted.label, meta.object.member, variable.object.property#ffffffd1
variable.other.property, support.variable.property, meta.property.object#e2e2e2de
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.begin.vue, punctuation.definition.string.end.vue#ffffffc1
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#ffffff80
variable.other.generic-type.haskell#565656
storage.type.haskell#bebebe
support.variable.magic.python#ffffff80
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#ffffff3a
variable.parameter.function.language.special.self.python#bababa
storage.modifier.lifetime.rust#ffffff3a
support.function.std.rust#f0f0f0
entity.name.lifetime.rust#bababa
variable.language.rust#ffffff80
support.constant.edge#565656
constant.other.character-class.regexp#ffffff80
keyword.operator.quantifier.regexp#bebebe
punctuation.definition.string.begin,punctuation.definition.string.end#1ad6bd
variable.parameter.function#ffffff3a
comment markup.link#ffffff2b
markup.changed.diff#bababa
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#f0f0f0
markup.inserted.diff#0dc1af
markup.deleted.diff#ffffff80
meta.function.c,meta.function.cpp#ffffff80
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#ffffff3a
punctuation.separator.key-value#ffffff3a
keyword.operator.expression.import#f0f0f0
support.constant.math#bababa
support.constant.property.math#bebebe
variable.other.constant#bababa
storage.type.annotation.java, storage.type.object.array.java#bababa
source.java#ffffff80
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,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,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#ffffff3a
meta.method.java#f0f0f0
storage.modifier.import.java,storage.type.java,storage.type.generic.java#bababa
keyword.operator.instanceof.java#565656
meta.definition.variable.name.java#ffffff80
keyword.operator.logical#565656
keyword.operator.bitwise#565656
keyword.operator.channel#565656
support.constant.property-value.scss,support.constant.property-value.css#bebebe
keyword.operator.css,keyword.operator.scss,keyword.operator.less#565656
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#bebebe
punctuation.separator.list.comma.css#ffffff3a
support.constant.color.w3c-standard-color-name.css#bebebe
support.type.vendored.property-name.css#565656
support.module.node,support.type.object.module,support.module.node#bababa
entity.name.type.module#bababa
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#ffffff80
support.constant.json#bebebe
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#565656
support.type.object.console#ffffff80
support.variable.property.process#bebebe
entity.name.function,support.function.console#f0f0f0
keyword.operator.misc.rust#ffffff3a
keyword.operator.sigil.rust#565656
keyword.operator.delete#565656
support.type.object.dom#565656
support.variable.dom,support.variable.property.dom#ffffff80
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#565656
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#565656
punctuation.separator.delimiter#ffffff3a
punctuation.separator.c,punctuation.separator.cpp#565656
support.type.posix-reserved.c,support.type.posix-reserved.cpp#565656
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#565656
variable.parameter.function.language.python#bebebe
support.type.python#565656
keyword.operator.logical.python#565656
variable.parameter.function.python#bebebe
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#ffffff3a
meta.function-call.generic.python#f0f0f0
constant.character.format.placeholder.other.python#bebebe
keyword.operator#ffffff3a
keyword.operator.assignment.compound#565656
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#565656
keyword#565656
entity.name.namespace#bababa
variable#ffffff80
variable.c#ffffff3a
variable.language#bababa
token.variable.parameter.java#ffffff3a
import.storage.java#bababa
token.package.keyword#565656
token.package#ffffff3a
entity.name.function, meta.require, support.function.any-method, variable.function#f0f0f0
entity.name.type.namespace#bababa
support.class, entity.name.type.class#bababa
entity.name.class.identifier.namespace.type#bababa
entity.name.class, variable.other.class.js, variable.other.class.ts#bababa
variable.other.class.php#ffffff80
entity.name.type#bababa
keyword.control#565656
control.elements, keyword.operator.less, keyword.other.definition.ini#bebebe
keyword.other.special-method#f0f0f0
storage#565656
token.storage#565656
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#565656
token.storage.type.java#bababa
support.function#565656
support.type.property-name#ffffff3a
support.constant.property-value#ffffff3a
support.constant.font-name#bebebe
meta.tag#ffffff3a
string#0dc1af
entity.other.inherited-class#bababa
constant.other.symbol#565656
constant.numeric#bebebe
constant#bebebe
punctuation.definition.constant#bebebe
entity.name.tag#ffffff80
entity.other.attribute-name#bebebe
entity.other.attribute-name.id#f0f0f0
entity.other.attribute-name.class.css#bebebe
meta.selector#565656
markup.heading#ffffff80
markup.heading punctuation.definition.heading, entity.name.section#f0f0f0
keyword.other.unit#ffffff80
markup.bold,todo.bold#bebebe
punctuation.definition.bold#bababa
markup.italic, punctuation.definition.italic,todo.emphasis#565656
emphasis md#565656
entity.name.section.markdown#ffffff80
punctuation.definition.heading.markdown#ffffff80
punctuation.definition.list.begin.markdown#ffffff80
markup.heading.setext#ffffff3a
punctuation.definition.bold.markdown#bebebe
markup.inline.raw.markdown#0dc1af
markup.inline.raw.string.markdown#0dc1af
punctuation.definition.list.markdown#ffffff80
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ffffff80
beginning.punctuation.definition.list.markdown#ffffff80
punctuation.definition.metadata.markdown#ffffff80
markup.underline.link.markdown,markup.underline.link.image.markdown#565656
string.other.link.title.markdown,string.other.link.description.markdown#f0f0f0
string.regexp#565656
constant.character.escape#565656
punctuation.section.embedded, variable.interpolation#ffffff80
punctuation.section.embedded.begin,punctuation.section.embedded.end#565656
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#ffffff3a
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#ffffff80
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ffffff80
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#16d2b9
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#565656
support.type.property-name.json#ffffff80
support.type.property-name.json punctuation#ffffff80
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#565656
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#565656
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#bababa
keyword.operator.error-control.php#565656
keyword.operator.type.php#565656
punctuation.section.array.begin.php#ffffff3a
punctuation.section.array.end.php#ffffff3a
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#bababa
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#f0f0f0
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#ffffff3a
support.constant.core.rust#bebebe
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#bebebe
entity.name.goto-label.php,support.other.php#f0f0f0
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#565656
keyword.operator.regexp.php#565656
keyword.operator.comparison.php#565656
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#565656
meta.function.decorator.python#f0f0f0
support.token.decorator.python,meta.function.decorator.identifier.python#565656
function.parameter#ffffff3a
function.brace#ffffff3a
function.parameter.ruby, function.parameter.cs#ffffff3a
constant.language.symbol.ruby#565656
rgb-value#565656
inline-color-decoration rgb-value#bebebe
less rgb-value#bebebe
selector.sass#ffffff80
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#bababa
block.scope.end,block.scope.begin#ffffff3a
storage.type.cs#bababa
entity.name.variable.local.cs#ffffff80
token.info-token#f0f0f0
token.warn-token#bebebe
token.error-token#f44747
token.debug-token#565656
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#565656
meta.template.expression#ffffff3a
keyword.operator.module#565656
support.type.type.flowtype#f0f0f0
support.type.primitive#bababa
meta.property.object#ffffff80
variable.parameter.function.js#ffffff80
keyword.other.template.begin#0dc1af
keyword.other.template.end#0dc1af
keyword.other.substitution.begin#0dc1af
keyword.other.substitution.end#0dc1af
keyword.operator.assignment#565656
keyword.operator.assignment.go#bababa
keyword.operator.arithmetic.go, keyword.operator.address.go#565656
entity.name.package.go#bababa
support.type.prelude.elm#565656
support.constant.elm#bebebe
punctuation.quasi.element#565656
constant.character.entity#ffffff80
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#565656
entity.global.clojure#bababa
meta.symbol.clojure#ffffff80
constant.keyword.clojure#565656
meta.arguments.coffee, variable.parameter.function.coffee#ffffff80
source.ini#0dc1af
meta.scope.prerequisites.makefile#ffffff80
source.makefile#bababa
storage.modifier.import.groovy#bababa
meta.method.groovy#f0f0f0
meta.definition.variable.name.groovy#ffffff80
meta.definition.class.inherited.classes.groovy#0dc1af
support.variable.semantic.hlsl#bababa
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#565656
text.variable, text.bracketed#ffffff80
support.type.swift, support.type.vb.asp#bababa
entity.name.function.xi#bababa
entity.name.class.xi#565656
constant.character.character-class.regexp.xi#ffffff80
constant.regexp.xi#565656
keyword.control.xi#565656
invalid.xi#ffffff3a
beginning.punctuation.definition.quote.markdown.xi#26beaa
beginning.punctuation.definition.list.markdown.xi#ffffff2b
constant.character.xi#f0f0f0
accent.xi#f0f0f0
wikiword.xi#bebebe
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#ffffff2b
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#bababa
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ffffff80
meta.brace.square#ffffff3a
comment, punctuation.definition.comment#ffffff2bitalic
markup.quote.markdown#ffffff2b
punctuation.definition.block.sequence.item.yaml#ffffff3a
constant.language.symbol.elixir#565656
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,variable.parameter,variable.language.superitalic
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic
variable.scss, variable.other.scss, entity.name.variable.scss#1dd5bb
support.type.custom-property, variable.other.custom-property#1dd5bb
keyword.control.at-rule, keyword.control.at-rule.scss, keyword.control.at-rule.css, meta.at-rule#F0F0F0
storage.type.function.arrow#0dc1af
punctuation.accessor.optional#BABABA
punctuation.attribute-shorthand.event.html.vue#F0F0F0
variable.parameter.graphql, meta.variables.graphql#F0F0F0
meta.embedded.block.graphql#F0F0F0
variable.parameter.graphql#0dc1af
keyword.operator.nulltype.graphql#F0F0F0
keyword.operator.spread.graphql#0dc1af
entity.name.fragment.graphql, variable.fragment.graphql#0dc1af
keyword.control.conditional.vue, keyword.control.loop.vue#BEBEBE

Shiki preview

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

Loading...