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#e2e8f0
  • activityBar.border#cbd5e1
  • activityBar.foreground#0f172a
  • activityBar.inactiveForeground#64748b
  • activityBarBadge.background#0ea5e9
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBorder#0ea5e9
  • activityBarTop.foreground#0f172a
  • activityBarTop.inactiveForeground#64748b
  • button.background#0ea5e9
  • button.foreground#ffffff
  • button.hoverBackground#0284c7
  • button.secondaryBackground#e2e8f0
  • button.secondaryForeground#0f172a
  • button.secondaryHoverBackground#cbd5e1
  • chat.avatarBackground#0ea5e9
  • chat.avatarForeground#ffffff
  • chat.requestBackground#f1f5f9
  • chat.requestBorder#e2e8f0
  • checkbox.background#ffffff
  • checkbox.border#cbd5e1
  • checkbox.foreground#0f172a
  • checkbox.selectBackground#0ea5e9
  • checkbox.selectBorder#0ea5e9
  • commandCenter.background#f1f5f9
  • commandCenter.border#cbd5e1
  • commandCenter.foreground#334155
  • dropdown.background#ffffff
  • dropdown.border#cbd5e1
  • dropdown.foreground#0f172a
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.foreground#0f172a
  • editor.inactiveSelectionBackground#38bdf81a
  • editor.lineHighlightBackground#f8fafc
  • editor.selectionBackground#38bdf833
  • editorBracketHighlight.foreground1#d97706
  • editorBracketHighlight.foreground2#0284c7
  • editorBracketHighlight.foreground3#7c3aed
  • editorBracketHighlight.foreground4#6366f1
  • editorBracketHighlight.foreground5#16a34a
  • editorBracketHighlight.foreground6#0284c7
  • editorCursor.foreground#0ea5e9
  • editorGroupHeader.tabsBackground#f1f5f9
  • editorGroupHeader.tabsBorder#e2e8f0
  • editorGutter.background#ffffff
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#e2e8f0
  • editorHoverWidget.foreground#0f172a
  • editorHoverWidget.statusBarBackground#f1f5f9
  • editorInlayHint.background#e2e8f0
  • editorInlayHint.foreground#64748b
  • editorInlayHint.parameterBackground#e2e8f0
  • editorInlayHint.parameterForeground#0284c7
  • editorInlayHint.typeBackground#e2e8f0
  • editorInlayHint.typeForeground#0d9488
  • editorLineNumber.activeForeground#0ea5e9
  • editorLineNumber.foreground#94a3b8
  • editorStickyScroll.background#f8fafc
  • editorStickyScroll.border#e2e8f0
  • extensionButton.prominentBackground#0ea5e9
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#0284c7
  • focusBorder#0ea5e9
  • inlineChat.background#ffffff
  • inlineChat.border#cbd5e1
  • inlineChatInput.border#0ea5e9
  • input.background#ffffff
  • input.border#cbd5e1
  • input.foreground#0f172a
  • input.placeholderForeground#94a3b8
  • inputValidation.errorBackground#fef2f2
  • inputValidation.errorBorder#ef4444
  • inputValidation.errorForeground#991b1b
  • inputValidation.infoBackground#f0f9ff
  • inputValidation.infoBorder#0ea5e9
  • inputValidation.infoForeground#075985
  • inputValidation.warningBackground#fffbeb
  • inputValidation.warningBorder#f59e0b
  • inputValidation.warningForeground#92400e
  • keybindingLabel.background#e2e8f0
  • keybindingLabel.border#cbd5e1
  • keybindingLabel.foreground#0f172a
  • list.activeSelectionBackground#0ea5e9
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#e2e8f0
  • list.inactiveSelectionBackground#e2e8f0
  • quickInput.background#ffffff
  • quickInput.foreground#0f172a
  • quickInputList.focusBackground#0ea5e9
  • quickInputList.focusForeground#ffffff
  • settings.focusedRowBorder#0ea5e9
  • settings.headerForeground#0ea5e9
  • settings.modifiedItemIndicator#0ea5e9
  • sideBar.background#f1f5f9
  • sideBar.border#e2e8f0
  • sideBar.foreground#334155
  • sideBarSectionHeader.background#e2e8f0
  • sideBarSectionHeader.foreground#334155
  • sideBarTitle.foreground#0f172a
  • statusBar.background#0ea5e9
  • statusBar.border#0284c7
  • statusBar.foreground#ffffff
  • statusBarItem.hoverBackground#0284c7
  • tab.activeBackground#ffffff
  • tab.activeBorder#0ea5e9
  • tab.activeForeground#0f172a
  • tab.border#e2e8f0
  • tab.inactiveBackground#f1f5f9
  • tab.inactiveForeground#64748b
  • testing.iconErrored#dc2626
  • testing.iconFailed#dc2626
  • testing.iconPassed#16a34a
  • testing.runAction#0ea5e9
  • textBlockQuote.background#f8fafc
  • textBlockQuote.border#0ea5e9
  • textCodeBlock.background#f8fafc
  • textLink.foreground#0ea5e9
  • textPreformat.background#f8fafc
  • textPreformat.foreground#0f172a
  • titleBar.activeBackground#f1f5f9
  • titleBar.activeForeground#0f172a
  • titleBar.border#e2e8f0
  • titleBar.inactiveBackground#f8fafc
  • titleBar.inactiveForeground#94a3b8

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#0f172a
variable.other.generic-type.haskell#7c3aed
storage.type.haskell#0f172a
support.variable.magic.python#0f172a
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#0f172a
variable.parameter.function.language.special.self.python#d97706
storage.modifier.lifetime.rust#0f172a
support.function.std.rust#0d9488
entity.name.lifetime.rust#d97706
variable.language.rust#0f172a
support.constant.edge#7c3aed
constant.other.character-class.regexp#0f172a
keyword.operator.quantifier.regexp#0f172a
punctuation.definition.string.begin,punctuation.definition.string.end#16a34a
variable.parameter.function#0f172a
comment markup.link#64748b
markup.changed.diff#d97706
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#0d9488
markup.inserted.diff#16a34a
markup.deleted.diff#0f172a
meta.function.c,meta.function.cpp#0f172a
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#0f172a
punctuation.separator.key-value#0f172a
keyword.operator.expression.import#0d9488
support.constant.math#d97706
support.constant.property.math#0f172a
variable.other.constant#d97706
storage.type.annotation.java, storage.type.object.array.java#d97706
source.java#0f172a
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#0f172a
meta.method.java#0d9488
storage.modifier.import.java,storage.type.java,storage.type.generic.java#d97706
keyword.operator.instanceof.java#7c3aed
meta.definition.variable.name.java#0f172a
keyword.operator.logical#0284c7
keyword.operator.bitwise#0284c7
keyword.operator.channel#0284c7
support.constant.property-value.scss,support.constant.property-value.css#0f172a
keyword.operator.css,keyword.operator.scss,keyword.operator.less#0284c7
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#0f172a
punctuation.separator.list.comma.css#0f172a
support.constant.color.w3c-standard-color-name.css#0f172a
support.type.vendored.property-name.css#0284c7
support.module.node,support.type.object.module,support.module.node#d97706
entity.name.type.module#d97706
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#0f172a
support.constant.json#0f172a
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#7c3aed
support.type.object.console#0f172a
support.variable.property.process#0f172a
entity.name.function,support.function.console#0d9488
keyword.operator.misc.rust#0f172a
keyword.operator.sigil.rust#7c3aed
keyword.operator.delete#7c3aed
support.type.object.dom#0284c7
support.variable.dom,support.variable.property.dom#0f172a
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#0284c7
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#7c3aed
punctuation.separator.delimiter#0f172a
punctuation.separator.c,punctuation.separator.cpp#7c3aed
support.type.posix-reserved.c,support.type.posix-reserved.cpp#0284c7
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#7c3aed
variable.parameter.function.language.python#0f172a
support.type.python#0284c7
keyword.operator.logical.python#7c3aed
variable.parameter.function.python#0f172a
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#0f172a
meta.function-call.generic.python#0d9488
constant.character.format.placeholder.other.python#0f172a
keyword.operator#0f172a
keyword.operator.assignment.compound#7c3aed
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#0284c7
keyword#7c3aed
entity.name.namespace#d97706
variable#0f172a
variable.c#0f172a
variable.language#d97706
token.variable.parameter.java#0f172a
import.storage.java#d97706
token.package.keyword#7c3aed
token.package#0f172a
entity.name.function, meta.require, support.function.any-method, variable.function#0d9488
entity.name.type.namespace#d97706
support.class, entity.name.type.class#d97706
entity.name.class.identifier.namespace.type#d97706
entity.name.class, variable.other.class.js, variable.other.class.ts#d97706
variable.other.class.php#0f172a
entity.name.type#d97706
keyword.control#7c3aed
control.elements, keyword.operator.less#0f172a
keyword.other.special-method#0d9488
storage#7c3aed
token.storage#7c3aed
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#7c3aed
token.storage.type.java#d97706
support.function#0284c7
support.type.property-name#0f172a
support.constant.property-value#0f172a
support.constant.font-name#0f172a
meta.tag#0f172a
string#16a34a
entity.other.inherited-class#d97706
constant.other.symbol#0284c7
constant.numeric#0f172a
constant#0f172a
punctuation.definition.constant#0f172a
entity.name.tag#0f172a
entity.other.attribute-name#0f172a
entity.other.attribute-name.id#0d9488
entity.other.attribute-name.class.css#0f172a
meta.selector#7c3aed
markup.heading#0f172a
markup.heading punctuation.definition.heading, entity.name.section#0d9488
keyword.other.unit#0f172a
markup.bold,todo.bold#0f172a
punctuation.definition.bold#d97706
markup.italic, punctuation.definition.italic,todo.emphasis#7c3aed
emphasis md#7c3aed
entity.name.section.markdown#0f172a
punctuation.definition.heading.markdown#0f172a
punctuation.definition.list.begin.markdown#0f172a
markup.heading.setext#0f172a
punctuation.definition.bold.markdown#0f172a
markup.inline.raw.markdown#16a34a
markup.inline.raw.string.markdown#16a34a
punctuation.definition.list.markdown#0f172a
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#0f172a
beginning.punctuation.definition.list.markdown#0f172a
punctuation.definition.metadata.markdown#0f172a
markup.underline.link.markdown,markup.underline.link.image.markdown#7c3aed
string.other.link.title.markdown,string.other.link.description.markdown#0d9488
string.regexp#0284c7
constant.character.escape#0284c7
punctuation.section.embedded, variable.interpolation#0f172a
punctuation.section.embedded.begin,punctuation.section.embedded.end#7c3aed
invalid.illegal#0f172a
invalid.illegal.bad-ampersand.html#0f172a
invalid.broken#0f172a
invalid.deprecated#0f172a
invalid.unimplemented#0f172a
source.json meta.structure.dictionary.json > string.quoted.json#0f172a
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#0f172a
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#16a34a
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#0284c7
support.type.property-name.json#0f172a
support.type.property-name.json punctuation#0f172a
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#7c3aed
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#7c3aed
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#d97706
keyword.operator.error-control.php#7c3aed
keyword.operator.type.php#7c3aed
punctuation.section.array.begin.php#0f172a
punctuation.section.array.end.php#0f172a
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#d97706
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#0d9488
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#0f172a
support.constant.core.rust#0f172a
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#0f172a
entity.name.goto-label.php,support.other.php#0d9488
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#0284c7
keyword.operator.regexp.php#7c3aed
keyword.operator.comparison.php#0284c7
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#7c3aed
meta.function.decorator.python#0d9488
support.token.decorator.python,meta.function.decorator.identifier.python#0284c7
function.parameter#0f172a
function.brace#0f172a
function.parameter.ruby, function.parameter.cs#0f172a
constant.language.symbol.ruby#0284c7
rgb-value#0284c7
inline-color-decoration rgb-value#0f172a
less rgb-value#0f172a
selector.sass#0f172a
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#d97706
block.scope.end,block.scope.begin#0f172a
storage.type.cs#d97706
entity.name.variable.local.cs#0f172a
token.info-token#0d9488
token.warn-token#0f172a
token.error-token#f44747
token.debug-token#7c3aed
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#7c3aed
meta.template.expression#0f172a
keyword.operator.module#7c3aed
support.type.type.flowtype#0d9488
support.type.primitive#d97706
meta.property.object#0f172a
variable.parameter.function.js#0f172a
keyword.other.template.begin#16a34a
keyword.other.template.end#16a34a
keyword.other.substitution.begin#16a34a
keyword.other.substitution.end#16a34a
keyword.operator.assignment#0284c7
keyword.operator.assignment.go#d97706
keyword.operator.arithmetic.go, keyword.operator.address.go#7c3aed
entity.name.package.go#d97706
support.type.prelude.elm#0284c7
support.constant.elm#0f172a
punctuation.quasi.element#7c3aed
constant.character.entity#0f172a
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#0284c7
entity.global.clojure#d97706
meta.symbol.clojure#0f172a
constant.keyword.clojure#0284c7
meta.arguments.coffee, variable.parameter.function.coffee#0f172a
source.ini#16a34a
meta.scope.prerequisites.makefile#0f172a
source.makefile#d97706
storage.modifier.import.groovy#d97706
meta.method.groovy#0d9488
meta.definition.variable.name.groovy#0f172a
meta.definition.class.inherited.classes.groovy#16a34a
support.variable.semantic.hlsl#d97706
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#7c3aed
text.variable, text.bracketed#0f172a
support.type.swift, support.type.vb.asp#d97706
entity.name.function.xi#d97706
entity.name.class.xi#0284c7
constant.character.character-class.regexp.xi#0f172a
constant.regexp.xi#7c3aed
keyword.control.xi#0284c7
invalid.xi#0f172a
beginning.punctuation.definition.quote.markdown.xi#16a34a
beginning.punctuation.definition.list.markdown.xi#64748b
constant.character.xi#0d9488
accent.xi#0d9488
wikiword.xi#0f172a
constant.other.color.rgb-value.xi#0f172a
punctuation.definition.tag.xi#64748b
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#d97706
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#0f172a
meta.brace.square#0f172a
comment, punctuation.definition.comment#64748bitalic
markup.quote.markdown#64748b
punctuation.definition.block.sequence.item.yaml#0f172a
constant.language.symbol.elixir#0284c7
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
entity.name.tag.html#7c3aed
entity.other.attribute-name.html#d97706italic
punctuation.separator.key-value.html, meta.attribute.content.html, meta.tag.metadata.meta.void.html, text.html.jinja#0f172a
support.type.property-name.json, string.json #7c3aed
entity.name.section.markdown#7c3aed
markup.bold#d97706
meta.function.python, meta.class.python,storage.type.function.pythonitalic
entity.other.attribute-name.class.css, entity.name.tag#0d9488
support.type.property-name#7c3aeditalic
WinterIsCoding by winter_x64 - VS Code Theme