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.activeBackground#292929
  • activityBar.activeBorder#aeb4bb
  • activityBar.activeFocusBorder#c8c5c5
  • activityBar.background#202020
  • activityBar.border#575252
  • activityBar.foreground#c8c5c5
  • activityBar.inactiveForeground#5e5a5a
  • button.background#454553
  • button.foreground#c8c5c5
  • button.hoverBackground#575252
  • button.secondaryBackground#4c4c52
  • button.secondaryForeground#aeb4bb
  • button.secondaryHoverBackground#413b37
  • editor.background#222426
  • editor.findMatchBackground#3a5255
  • editor.foreground#c8c5c5
  • editor.lineHighlightBackground#303235
  • editor.selectionBackground#46494e
  • editorCursor.foreground#c8c5c5
  • editorError.foreground#d13b2e
  • editorGroup.emptyBackground#161719
  • editorGroupHeader.tabsBackground#161719
  • editorGutter.addedBackground#b5bd68
  • editorGutter.deletedBackground#cc6666
  • editorGutter.modifiedBackground#de935f
  • editorIndentGuide.activeBackground#8b8b65
  • editorIndentGuide.background#3e3f41
  • editorLink.activeForeground#81a2be
  • editorSuggestWidget.selectedBackground#424242
  • editorWarning.foreground#de935f
  • editorWhitespace.foreground#626466
  • extensionButton.prominentBackground#525d63
  • gitDecoration.conflictingResourceForeground#6494ed
  • gitDecoration.deletedResourceForeground#ff6347
  • gitDecoration.ignoredResourceForeground#696d71
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.untrackedResourceForeground#73c990
  • input.background#202020
  • input.border#444
  • list.activeSelectionBackground#46494e
  • list.activeSelectionForeground#d9dbde
  • list.errorForeground#cc6666
  • list.focusBackground#222426
  • list.focusForeground#d9dbde
  • list.focusOutline#575252
  • list.hoverBackground#323438
  • list.inactiveSelectionBackground#3d4044
  • list.inactiveSelectionForeground#d9dbde
  • list.warningForeground#de935f
  • menu.background#3b3939
  • menu.foreground#c8c5c5
  • peekView.border#81a2be
  • peekViewEditor.background#161719
  • peekViewTitle.background#161719
  • quickInput.background#161719
  • quickInput.foreground#a3a8ae
  • sideBar.background#252222
  • sideBar.border#323438
  • sideBar.dropBackground#de935f
  • sideBar.foreground#aeb4bb
  • sideBarSectionHeader.background#3d4044
  • sideBarSectionHeader.border#575252
  • sideBarSectionHeader.foreground#c8c5c5
  • sideBarTitle.foreground#c8c5c5
  • statusBar.background#323438
  • statusBar.border#575252
  • statusBar.foreground#c8c5c5
  • tab.activeBackground#2e2d2e
  • tab.activeForeground#c8c5c5
  • tab.activeModifiedBorder#6494ed
  • tab.border#2e2d2e
  • tab.inactiveBackground#1a191a
  • terminal.background#2b2a2a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
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#cc6666
variable.other.generic-type.haskell#bf80d3
storage.type.haskell#d19a66
support.variable.magic.python#cc6666
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#abb2bf
variable.parameter.function.language.special.self.python#d19a66italic
storage.modifier.lifetime.rust#abb2bf
support.function.std.rust#81a2be
entity.name.lifetime.rust#e5c07b
variable.language.rust#cc6666
support.constant.edge#bf80d3
constant.other.character-class.regexp#cc6666
keyword.operator.quantifier.regexp#d19a66
punctuation.definition.string.begin,punctuation.definition.string.end#a9b665
variable.parameter.function#abb2bf
comment markup.link#7f848e
markup.changed.diff#e5c07b
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#81a2be
markup.inserted.diff#a9b665
markup.deleted.diff#cc6666
meta.function.c,meta.function.cpp#cc6666
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#abb2bf
keyword.operator.expression.import#81a2be
support.constant.math#e5c07b
support.constant.property.math#d19a66
variable.other.constant#d19a66
storage.type.annotation.java, storage.type.object.array.java#e5c07b
source.java#cc6666
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#abb2bf
meta.method.java#81a2be
storage.modifier.import.java,storage.type.java,storage.type.generic.java#e5c07b
keyword.operator.instanceof.java#bf80d3
meta.definition.variable.name.java#cc6666
keyword.operator.logical#56b6c2
keyword.operator.bitwise#56b6c2
keyword.operator.channel#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#56b6c2
support.type.property-name.css#d19a66
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#d19a66
punctuation.separator.list.comma.css#abb2bf
support.constant.color.w3c-standard-color-name.css#d19a66
support.type.vendored.property-name.css#56b6c2
support.module.node,support.type.object.module,support.module.node#e5c07b
entity.name.type.module#e5c07b
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#cc6666
support.constant.json#d19a66
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#bf80d3
support.type.object.console#cc6666
support.variable.property.process#d19a66
entity.name.function,support.function.console#8abeb7
keyword.operator.misc.rust#abb2bf
keyword.operator.sigil.rust#bf80d3
keyword.operator.delete#bf80d3
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#cc6666
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#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,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#bf80d3
punctuation.separator.delimiter#abb2bf
punctuation.separator.c,punctuation.separator.cpp#bf80d3
support.type.posix-reserved.c,support.type.posix-reserved.cpp#56b6c2
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#bf80d3
variable.parameter.function.language.python#d19a66
support.type.python#56b6c2
keyword.operator.logical.python#bf80d3italic
variable.parameter.function.python#d19a66
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#abb2bf
meta.function-call.generic.python#81a2be
constant.character.format.placeholder.other.python#d19a66
keyword.operator#cc6666
keyword.operator.assignment.compound#bf80d3italic
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#56b6c2
keyword#bf80d3italic
entity.name.namespace#d8b36e
variable#e06c75
variable.parameter, entity.name.variable.parameter, parameter.variable#e5c07bitalic
variable.c#abb2bf
variable.language#e5c07b
token.variable.parameter.java#abb2bf
import.storage.java#e5c07b
token.package.keyword#bf80d3
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#81a2be
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#d19a66italic
entity.name.class.identifier.namespace.type#d19a66italic
entity.name.class, variable.other.class.js, variable.other.class.ts#e5c07b
variable.other.class.php#cc6666
entity.name.type#e5c07b
keyword.control#bf80d3italic
control.elements, keyword.operator.less#d19a66
keyword.other.special-method#81a2be
storage#bf80d3
token.storage#bf80d3
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#bf80d3
token.storage.type.java#e5c07b
support.function#e5c07bitalic
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#d19a66
string#91b875
constant.other.symbol#56b6c2
constant.numeric#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#cc6666
entity.other.attribute-name#d19a66italic
entity.other.attribute-name.id#81a2beitalic
entity.other.attribute-name.class.css#bf80d3
meta.selector#bf80d3
markup.heading#cc6666
markup.heading punctuation.definition.heading, entity.name.section#81a2be
keyword.other.unit#cc6666
markup.bold,todo.bold#d19a66
punctuation.definition.bold#e5c07b
markup.italic, punctuation.definition.italic,todo.emphasis#bf80d3
emphasis md#bf80d3
entity.name.section.markdown#cc6666
punctuation.definition.heading.markdown#cc6666
punctuation.definition.list.begin.markdown#cc6666
markup.heading.setext#abb2bf
punctuation.definition.bold.markdown#d19a66
markup.inline.raw.markdown#a9b665
markup.inline.raw.string.markdown#a9b665
punctuation.definition.list.markdown#cc6666
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#cc6666
beginning.punctuation.definition.list.markdown#cc6666
punctuation.definition.metadata.markdown#cc6666
markup.underline.link.markdown,markup.underline.link.image.markdown#bf80d3
string.other.link.title.markdown,string.other.link.description.markdown#81a2be
support.constant#56b6c2
string.regexp#56b6c2
constant.character.escape#56b6c2
punctuation.section.embedded, variable.interpolation#cc6666
punctuation.section.embedded.begin,punctuation.section.embedded.end#bf80d3
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#abb2bf
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#cc6666
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#cc6666
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#a9b665
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56b6c2
support.type.property-name.json#81a2be
support.type.property-name.json punctuation#81a2be
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#bf80d3
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#bf80d3
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#e5c07b
keyword.operator.error-control.php#bf80d3
keyword.operator.type.php#bf80d3
punctuation.section.array.begin.php#abb2bf
punctuation.section.array.end.php#abb2bf
invalid.illegal.non-null-typehinted.php#f44747
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#81a2be
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#abb2bf
support.constant.core.rust#d19a66
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#d19a66
entity.name.goto-label.php,support.other.php#81a2be
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56b6c2
keyword.operator.regexp.php#bf80d3
keyword.operator.comparison.php#56b6c2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#bf80d3
meta.function.decorator.python#81a2be
support.token.decorator.python,meta.function.decorator.identifier.python#56b6c2
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
constant.language.symbol.ruby#56b6c2
rgb-value#56b6c2
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
selector.sass#cc6666
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e5c07b
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#e5c07b
entity.name.variable.local.cs#cc6666
token.info-token#81a2be
token.warn-token#d19a66
token.error-token#d13b2e
token.debug-token#bf80d3
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#bf80d3
meta.template.expression#abb2bf
keyword.operator.module#bf80d3
support.type.type.flowtype#81a2be
support.type.primitive#e5c07b
meta.property.object#cc6666
variable.parameter.function.js#cc6666
keyword.other.template.begin#a9b665
keyword.other.template.end#a9b665
keyword.other.substitution.begin#a9b665
keyword.other.substitution.end#a9b665
keyword.operator.assignment#56b6c2
keyword.operator.assignment.go#e5c07b
keyword.operator.arithmetic.go, keyword.operator.address.go#bf80d3
entity.name.package.go#e5c07b
support.type.prelude.elm#56b6c2
support.constant.elm#d19a66
punctuation.quasi.element#bf80d3
constant.character.entity#cc6666
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56b6c2
entity.global.clojure#e5c07b
meta.symbol.clojure#cc6666
constant.keyword.clojure#56b6c2
meta.arguments.coffee, variable.parameter.function.coffee#cc6666
source.ini#a9b665
meta.scope.prerequisites.makefile#cc6666
source.makefile#e5c07b
storage.modifier.import.groovy#e5c07b
meta.method.groovy#81a2be
meta.definition.variable.name.groovy#cc6666
meta.definition.class.inherited.classes.groovy#a9b665
support.variable.semantic.hlsl#e5c07b
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#bf80d3
text.variable, text.bracketed#cc6666
support.type.swift, support.type.vb.asp#e5c07b
entity.name.function.xi#e5c07b
entity.name.class.xi#56b6c2
constant.character.character-class.regexp.xi#cc6666
constant.regexp.xi#bf80d3
keyword.control.xi#56b6c2
invalid.xi#abb2bf
beginning.punctuation.definition.quote.markdown.xi#a9b665
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#81a2be
accent.xi#81a2be
wikiword.xi#d19a66
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#5c6370
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#e5c07b
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#cc6666
meta.brace.square#abb2bf
comment, punctuation.definition.comment#7f848eitalic
markup.quote.markdown#5c6370
punctuation.definition.block.sequence.item.yaml#abb2bf
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#56b6c2
entity.name.variable.parameter.cs#e5c07b
entity.name.variable.field.cs#cc6666
markup.deleted#cc6666
markup.inserted#a9b665
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#abb2bf
variable.other.object#e5c07b
variable.other.constant.property#cc6666
meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#bf80d3italic
entity.other.inherited-class#e5c07b
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
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic

Shiki preview

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

Loading...

fzj-dark - Coding Theme