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#0a1520
  • activityBar.foreground#f9e7b8
  • activityBar.inactiveForeground#4a5568
  • activityBarBadge.background#c0392b
  • activityBarBadge.foreground#f8fafd
  • badge.background#c0392b
  • button.background#4a9eca
  • button.secondaryBackground#0a1520
  • button.secondaryForeground#f9e7b8
  • checkbox.border#4a9eca40
  • debugToolBar.background#061018
  • descriptionForeground#c6def1
  • diffEditor.insertedTextBackground#4a9eca20
  • dropdown.background#0a1520
  • dropdown.border#4a9eca30
  • editor.background#0d1b2a
  • editor.findMatchBackground#4a9eca50
  • editor.findMatchBorder#4a9eca
  • editor.findMatchHighlightBackground#4a9eca25
  • editor.foreground#cadff3
  • editor.lineHighlightBackground#4a9eca10
  • editor.selectionBackground#4a9eca35
  • editor.selectionHighlightBackground#4a9eca20
  • editor.selectionHighlightBorder#4a9eca50
  • editor.wordHighlightBackground#c0392b20
  • editor.wordHighlightBorder#c0392b50
  • editor.wordHighlightStrongBackground#c0392b35
  • editor.wordHighlightStrongBorder#c0392b70
  • editorBracketHighlight.foreground1#4a9eca
  • editorBracketHighlight.foreground2#f9e7b8
  • editorBracketHighlight.foreground3#8B6914
  • editorBracketMatch.background#4a9eca25
  • editorBracketMatch.border#4a9eca
  • editorCursor.background#0d1b2a
  • editorCursor.foreground#4a9eca
  • editorError.foreground#c0392b
  • editorGroup.background#0d1b2a
  • editorGroup.border#4a9eca20
  • editorGroupHeader.tabsBackground#0a1520
  • editorGutter.addedBackground#4a9eca
  • editorGutter.deletedBackground#c0392b
  • editorGutter.modifiedBackground#8B6914
  • editorHoverWidget.background#061018
  • editorHoverWidget.border#4a9eca30
  • editorHoverWidget.highlightForeground#4a9eca
  • editorIndentGuide.activeBackground1#4a9eca50
  • editorIndentGuide.background1#4a9eca15
  • editorInlayHint.background#0a1520
  • editorInlayHint.foreground#8B6914
  • editorLineNumber.activeForeground#f9e7b8
  • editorLineNumber.foreground#1d4a6f
  • editorMarkerNavigation.background#061018
  • editorOverviewRuler.addedBackground#4a9eca
  • editorOverviewRuler.deletedBackground#c0392b
  • editorOverviewRuler.modifiedBackground#8b6914
  • editorRuler.foreground#4a9eca15
  • editorSuggestWidget.background#061018
  • editorSuggestWidget.border#4a9eca30
  • editorSuggestWidget.selectedBackground#4a9eca25
  • editorWarning.foreground#8b6914
  • editorWhitespace.foreground#4a9eca10
  • editorWidget.background#061018
  • focusBorder#4a9eca
  • gitDecoration.ignoredResourceForeground#2a4a6a
  • input.background#061018
  • input.foreground#f9e7b8
  • list.activeSelectionBackground#4a9eca25
  • list.activeSelectionForeground#97c7e2
  • list.focusBackground#4a9eca20
  • list.focusForeground#f9e7b8
  • list.highlightForeground#4a9eca
  • list.hoverBackground#4a9eca10
  • list.hoverForeground#97c7e2
  • list.inactiveSelectionBackground#4a9eca15
  • list.inactiveSelectionForeground#97c7e2
  • list.warningForeground#8b6914
  • menu.foreground#e5eff9
  • menu.separatorBackground#4a9eca20
  • minimapGutter.addedBackground#4a9eca
  • minimapGutter.deletedBackground#c0392b
  • minimapGutter.modifiedBackground#8b6914
  • multiDiffEditor.headerBackground#061018
  • panel.border#4a9eca20
  • panelSectionHeader.background#0a1520
  • peekViewEditor.background#061018
  • peekViewEditor.matchHighlightBackground#4a9eca30
  • peekViewResult.background#0a1520
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#4a9ecacc
  • scrollbarSlider.background#4a9eca30
  • scrollbarSlider.hoverBackground#4a9eca60
  • settings.focusedRowBackground#4a9eca10
  • settings.headerForeground#f9e7b8
  • sideBar.background#0a1520
  • sideBar.foreground#3488c3
  • sideBarSectionHeader.background#061018
  • sideBarSectionHeader.foreground#b28e15
  • statusBar.background#061018
  • statusBar.debuggingBackground#c0392b
  • statusBar.debuggingBorder#8B1a0f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e5eff9
  • statusBar.noFolderBackground#061018
  • statusBarItem.remoteBackground#4a9eca
  • statusBarItem.remoteForeground#0d1b2a
  • tab.activeBackground#0d1b2a
  • tab.activeBorder#4a9eca
  • tab.activeForeground#97c7e2
  • tab.border#4a9eca10
  • tab.hoverBackground#4a9eca15
  • tab.inactiveBackground#0a1520
  • tab.unfocusedHoverBackground#4a9eca10
  • terminal.ansiBlack#061018
  • terminal.ansiBlue#4a9eca
  • terminal.ansiBrightBlack#2a4a6a
  • terminal.ansiBrightBlue#6ab8e8
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#4ecb71
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#e74c3c
  • terminal.ansiBrightWhite#f9e7b8
  • terminal.ansiBrightYellow#f5c842
  • terminal.ansiCyan#1a8fa0
  • terminal.ansiGreen#27ae60
  • terminal.ansiMagenta#8e44ad
  • terminal.ansiRed#c0392b
  • terminal.ansiWhite#c8b89a
  • terminal.ansiYellow#8B6914
  • terminal.background#0a1520
  • terminal.border#4a9eca20
  • terminal.foreground#f9e7b8
  • terminal.selectionBackground#4a9eca30
  • textBlockQuote.background#061018
  • textBlockQuote.border#4a9eca
  • textLink.foreground#4a9eca
  • textPreformat.foreground#f9e7b8
  • titleBar.activeBackground#0a1520
  • titleBar.activeForeground#e5eff9
  • titleBar.inactiveBackground#061018
  • titleBar.inactiveForeground#2a4a6a
  • tree.indentGuidesStroke#4a9eca20
  • walkThrough.embeddedEditorBackground#061018
  • welcomePage.buttonHoverBackground#4a9eca25

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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