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#111111
  • activityBar.foreground#DFC18A
  • activityBar.inactiveForeground#555555
  • activityBarBadge.background#E62C39
  • activityBarBadge.foreground#DFC18A
  • badge.background#E62C39
  • button.background#2F76DC
  • button.foreground#111111
  • button.secondaryBackground#1a1a1a
  • button.secondaryForeground#DFC18A
  • checkbox.border#2F76DC40
  • debugToolBar.background#111111
  • descriptionForeground#666666
  • diffEditor.insertedTextBackground#2F76DC20
  • dropdown.background#1a1a1a
  • dropdown.border#2F76DC30
  • editor.background#111111
  • editor.findMatchBackground#FBC92050
  • editor.findMatchBorder#FBC920
  • editor.findMatchHighlightBackground#FBC92025
  • editor.foreground#DFC18A
  • editor.lineHighlightBackground#2F76DC10
  • editor.selectionBackground#2F76DC35
  • editor.selectionHighlightBackground#2F76DC20
  • editor.selectionHighlightBorder#2F76DC50
  • editor.wordHighlightBackground#E62C3920
  • editor.wordHighlightBorder#E62C3950
  • editor.wordHighlightStrongBackground#E62C3935
  • editor.wordHighlightStrongBorder#E62C3970
  • editorBracketHighlight.foreground1#2F76DC
  • editorBracketHighlight.foreground2#DFC18A
  • editorBracketHighlight.foreground3#FBC920
  • editorBracketMatch.background#2F76DC25
  • editorBracketMatch.border#2F76DC
  • editorCursor.background#111111
  • editorCursor.foreground#FBC920
  • editorError.foreground#E62C39
  • editorGroup.background#111111
  • editorGroup.border#2F76DC20
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGutter.addedBackground#2F76DC
  • editorGutter.deletedBackground#E62C39
  • editorGutter.modifiedBackground#FBC920
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#2F76DC30
  • editorHoverWidget.highlightForeground#FBC920
  • editorIndentGuide.activeBackground1#2F76DC50
  • editorIndentGuide.background1#2F76DC15
  • editorInlayHint.background#1a1a1a
  • editorInlayHint.foreground#FBC920
  • editorLineNumber.activeForeground#DFC18A
  • editorLineNumber.foreground#333333
  • editorMarkerNavigation.background#111111
  • editorOverviewRuler.addedBackground#2F76DC
  • editorOverviewRuler.deletedBackground#E62C39
  • editorOverviewRuler.modifiedBackground#FBC920
  • editorRuler.foreground#2F76DC15
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#2F76DC30
  • editorSuggestWidget.selectedBackground#2F76DC25
  • editorWarning.foreground#FBC920
  • editorWhitespace.foreground#2F76DC10
  • editorWidget.background#111111
  • focusBorder#2F76DC
  • foreground#a0a0a0
  • gitDecoration.addedResourceForeground#2F76DC
  • gitDecoration.deletedResourceForeground#E62C39
  • gitDecoration.ignoredResourceForeground#444444
  • gitDecoration.modifiedResourceForeground#FBC920
  • gitDecoration.untrackedResourceForeground#DFC18A
  • input.background#1a1a1a
  • input.foreground#DFC18A
  • list.activeSelectionBackground#2F76DC25
  • list.activeSelectionForeground#DFC18A
  • list.focusBackground#2F76DC20
  • list.focusForeground#DFC18A
  • list.highlightForeground#FBC920
  • list.hoverBackground#2F76DC10
  • list.hoverForeground#DFC18A
  • list.inactiveSelectionBackground#2F76DC15
  • list.inactiveSelectionForeground#DFC18A
  • list.warningForeground#FBC920
  • menu.background#1a1a1acc
  • menu.foreground#a0a0a0
  • menu.selectionBackground#2F76DC25
  • menu.selectionForeground#DFC18A
  • menu.separatorBackground#2F76DC20
  • menubar.selectionBackground#2F76DC20
  • menubar.selectionForeground#DFC18A
  • minimapGutter.addedBackground#2F76DC
  • minimapGutter.deletedBackground#E62C39
  • minimapGutter.modifiedBackground#FBC920
  • multiDiffEditor.headerBackground#111111
  • panel.border#2F76DC20
  • panelSectionHeader.background#1a1a1a
  • peekViewEditor.background#111111
  • peekViewEditor.matchHighlightBackground#FBC92030
  • peekViewResult.background#1a1a1a
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#2F76DCcc
  • scrollbarSlider.background#2F76DC30
  • scrollbarSlider.hoverBackground#2F76DC60
  • settings.focusedRowBackground#2F76DC10
  • settings.headerForeground#DFC18A
  • sideBar.background#1a1a1a
  • sideBar.foreground#a0a0a0
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#2F76DC
  • statusBar.background#111111
  • statusBar.border#2a2a2a
  • statusBar.debuggingBackground#E62C39
  • statusBar.debuggingBorder#6b1a1a
  • statusBar.debuggingForeground#DFC18A
  • statusBar.foreground#888888
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#2F76DC20
  • statusBarItem.remoteBackground#2F76DC
  • statusBarItem.remoteForeground#111111
  • tab.activeBackground#111111
  • tab.activeBorder#FBC920
  • tab.activeForeground#DFC18A
  • tab.border#2F76DC10
  • tab.hoverBackground#2F76DC15
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#555555
  • tab.unfocusedHoverBackground#2F76DC10
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#2F76DC
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#8fa3d4
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#4ecb71
  • terminal.ansiBrightMagenta#d070f0
  • terminal.ansiBrightRed#c44040
  • terminal.ansiBrightWhite#DFC18A
  • terminal.ansiBrightYellow#f0c84a
  • terminal.ansiCyan#1a8fa0
  • terminal.ansiGreen#27ae60
  • terminal.ansiMagenta#DFC18A
  • terminal.ansiRed#E62C39
  • terminal.ansiWhite#c0c0c0
  • terminal.ansiYellow#FBC920
  • terminal.background#111111
  • terminal.border#2F76DC20
  • terminal.foreground#DFC18A
  • terminal.selectionBackground#2F76DC30
  • textBlockQuote.background#1a1a1a
  • textBlockQuote.border#FBC920
  • textLink.foreground#2F76DC
  • textPreformat.foreground#DFC18A
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#888888
  • titleBar.border#2a2a2a
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#444444
  • tree.indentGuidesStroke#2F76DC20
  • walkThrough.embeddedEditorBackground#111111
  • welcomePage.buttonHoverBackground#2F76DC25

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#DFC18A
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#2F76DC
variable.other.generic-type.haskell#2F76DC
storage.type.haskell#DFC18A
support.variable.magic.python#E62C39
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#DFC18A
variable.parameter.function.language.special.self.python#2F76DC
variable.parameter.function.language.special.cls.python#2F76DC
storage.modifier.lifetime.rust#FBC920
support.function.std.rust#DFC18A
entity.name.lifetime.rust#FBC920
variable.language.rust#E62C39
support.constant.edge#2F76DC
constant.other.character-class.regexp#E62C39
keyword.operator.word#2F76DC
keyword.operator.quantifier.regexp#FBC920
variable.parameter.function#DFC18A
comment markup.link#2E333F
markup.changed.diff#FBC920
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#2F76DC
markup.inserted.diff#2F76DC
markup.deleted.diff#E62C39
meta.function.c,meta.function.cpp#DFC18A
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#DFC18A
punctuation.separator.key-value#DFC18A
keyword.operator.expression.import#2F76DC
support.constant.math#2F76DC
support.constant.property.math#FBC920
variable.other.constant#FBC920
storage.type.annotation.java, storage.type.object.array.java#2F76DC
source.java#DFC18A
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#DFC18A
meta.method.java#DFC18A
storage.modifier.import.java,storage.type.java,storage.type.generic.java#2F76DC
keyword.operator.instanceof.java#2F76DC
meta.definition.variable.name.java#DFC18A
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#2F76DC
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#2F76DC
punctuation.separator.delimiter#DFC18A
punctuation.separator.c,punctuation.separator.cpp#DFC18A
support.type.posix-reserved.c,support.type.posix-reserved.cpp#2F76DC
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#2F76DC
variable.parameter.function.language.python#DFC18A
support.type.python#2F76DC
keyword.operator.logical.python#2F76DC
variable.parameter.function.python#DFC18A
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#DFC18A
meta.function-call.generic.python#DFC18A
constant.character.format.placeholder.other.python#FBC920
keyword.operator#2F76DC
keyword.operator.assignment.compound#2F76DC
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#2F76DC
keyword#FBC920
entity.name.namespace#2F76DC
variable#DFC18A
variable.c#DFC18A
variable.language#2F76DC
token.variable.parameter.java#DFC18A
import.storage.java#2F76DC
token.package.keyword#FBC920
token.package#DFC18A
entity.name.function, meta.require, support.function.any-method, variable.function#DFC18A
entity.name.type.namespace#B9EFF8
support.class, entity.name.type.class#B9EFF8
entity.name.class.identifier.namespace.type#B9EFF8
entity.name.class, variable.other.class.js, variable.other.class.ts#B9EFF8
variable.other.class.php#FBC920
entity.name.type#B9EFF8
keyword.control#FBC920
control.elements, keyword.operator.less#2F76DC
keyword.other.special-method#DFC18A
storage#FBC920
token.storage#FBC920
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#E62C39
token.storage.type.java#2F76DC
support.function#DFC18A
support.type.property-name#DFC18A
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml#2F76DC
support.constant.property-value#DFC18A
support.constant.font-name#FBC920
meta.tag#DFC18A
string#E62C39
constant.other.symbol#FBC920
constant.numeric#FBC920
constant#FBC920
punctuation.definition.constant#FBC920
entity.name.tag#E62C39
entity.other.attribute-name#DFC18A
entity.other.attribute-name.id#2F76DC
entity.other.attribute-name.class.css#FBC920
meta.selector#2F76DC
markup.heading#E62C39
markup.heading punctuation.definition.heading, entity.name.section#2F76DC
keyword.other.unit#FBC920
markup.bold,todo.bold#DFC18A
punctuation.definition.bold#2F76DC
markup.italic, punctuation.definition.italic,todo.emphasis#2F76DC
emphasis md#2F76DC
entity.name.section.markdown#E62C39
punctuation.definition.heading.markdown#E62C39
punctuation.definition.list.begin.markdown#2F76DC
markup.heading.setext#E62C39
punctuation.definition.bold.markdown#DFC18A
markup.inline.raw.markdown#FBC920
markup.inline.raw.string.markdown#FBC920
punctuation.definition.raw.markdown#FBC920
punctuation.definition.list.markdown#2F76DC
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#2F76DC
beginning.punctuation.definition.list.markdown#2F76DC
punctuation.definition.metadata.markdown#2F76DC
markup.underline.link.markdown,markup.underline.link.image.markdown#2F76DC
string.other.link.title.markdown,string.other.link.description.markdown#DFC18A
markup.raw.monospace.asciidoc#FBC920
punctuation.definition.asciidoc#2F76DC
markup.list.asciidoc#2F76DC
markup.link.asciidoc,markup.other.url.asciidoc#2F76DC
string.unquoted.asciidoc,markup.other.url.asciidoc#DFC18A
string.regexp#E62C39
punctuation.section.embedded, variable.interpolation#E62C39
punctuation.section.embedded.begin,punctuation.section.embedded.end#2F76DC
invalid.illegal#E62C39
invalid.illegal.bad-ampersand.html#E62C39
invalid.illegal.unrecognized-tag.html#E62C39
invalid.broken#E62C39
invalid.deprecated#FBC920
invalid.deprecated.entity.other.attribute-name.html#FBC920
invalid.unimplemented#FBC920
source.json meta.structure.dictionary.json > string.quoted.json#E62C39
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E62C39
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#2F76DC
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#FBC920
support.type.property-name.json#E62C39
support.type.property-name.json punctuation#E62C39
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#E62C39
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#2F76DC
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#2F76DC
keyword.operator.error-control.php#E62C39
keyword.operator.type.php#2F76DC
punctuation.section.array.begin.php#DFC18A
punctuation.section.array.end.php#DFC18A
invalid.illegal.non-null-typehinted.php#E62C39
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#2F76DC
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#DFC18A
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#DFC18A
support.constant.core.rust#FBC920
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#FBC920
entity.name.goto-label.php,support.other.php#2F76DC
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#2F76DC
keyword.operator.regexp.php#E62C39
keyword.operator.comparison.php#2F76DC
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#2F76DC
meta.function.decorator.python#FBC920
support.token.decorator.python,meta.function.decorator.identifier.python#FBC920
function.parameter#DFC18A
function.brace#DFC18A
function.parameter.ruby, function.parameter.cs#DFC18A
constant.language.symbol.ruby#FBC920
constant.language.symbol.hashkey.ruby#FBC920
rgb-value#2F76DC
inline-color-decoration rgb-value#DFC18A
less rgb-value#DFC18A
selector.sass#E62C39
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#2F76DC
block.scope.end,block.scope.begin#DFC18A
storage.type.cs#2F76DC
entity.name.variable.local.cs#DFC18A
token.info-token#2F76DC
token.warn-token#FBC920
token.error-token#E62C39
token.debug-token#FBC920
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#2F76DC
meta.template.expression#DFC18A
keyword.operator.module#FBC920
support.type.type.flowtype#2F76DC
support.type.primitive#2F76DC
meta.property.object#DFC18A
variable.parameter.function.js#DFC18A
keyword.other.template.begin#E62C39
keyword.other.template.end#E62C39
keyword.other.substitution.begin#2F76DC
keyword.other.substitution.end#2F76DC
keyword.operator.assignment#2F76DC
keyword.operator.assignment.go#2F76DC
keyword.operator.arithmetic.go, keyword.operator.address.go#2F76DC
keyword.operator.arithmetic.c, keyword.operator.arithmetic.cpp#2F76DC
entity.name.package.go#FBC920
support.type.prelude.elm#2F76DC
support.constant.elm#FBC920
punctuation.quasi.element#2F76DC
constant.character.entity#FBC920
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#2F76DC
entity.global.clojure#2F76DC
meta.symbol.clojure#DFC18A
constant.keyword.clojure#FBC920
meta.arguments.coffee, variable.parameter.function.coffee#DFC18A
source.ini#DFC18A
meta.scope.prerequisites.makefile#E62C39
source.makefile#2F76DC
storage.modifier.import.groovy#2F76DC
meta.method.groovy#DFC18A
meta.definition.variable.name.groovy#DFC18A
meta.definition.class.inherited.classes.groovy#FBC920
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl#2F76DC
text.variable, text.bracketed#DFC18A
support.type.swift, support.type.vb.asp#2F76DC
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#DFC18A
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#E62C39
meta.brace.square#DFC18A
comment, punctuation.definition.comment#2E333Fitalic
markup.quote.markdown#2E333F
punctuation.definition.block.sequence.item.yaml#DFC18A
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#FBC920
entity.name.variable.parameter.cs#DFC18A
entity.name.variable.field.cs#DFC18A
markup.deleted#E62C39
markup.inserted#2F76DC
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#2F76DC
support.other.namespace.php#2F76DC
variable.parameter.function.latex#DFC18A
variable.other.object#DFC18A
variable.other.constant.property#FBC920
entity.other.inherited-class#FBC920
variable.other.readwrite.c#DFC18A
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php#DFC18A
constant.numeric.decimal.asm.x86_64#FBC920
support.other.parenthesis.regexp#E62C39
constant.character.escape#2F76DC
string.regexp#E62C39
log.info#2F76DC
log.warning#FBC920
log.error#E62C39
keyword.operator.expression.is#2F76DC
entity.name.label#FBC920
support.class.math.block.environment.latex, constant.other.general.math.tex#2F76DC
constant.character.math.tex#FBC920
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
markup.italic.markdownitalic