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#1a1a1a
  • activityBar.border#00000060
  • activityBar.foreground#eeffff
  • activityBarBadge.background#caff29
  • activityBarBadge.foreground#222222
  • badge.background#caff29
  • badge.foreground#222222
  • breadcrumb.activeSelectionForeground#caff29
  • breadcrumb.background#212121
  • breadcrumb.focusForeground#eeffff
  • breadcrumb.foreground#848484
  • breadcrumbPicker.background#1a1a1a
  • button.background#61616150
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#c3e88d15
  • diffEditor.removedTextBackground#ff537020
  • dropdown.background#212121
  • dropdown.border#ffffff10
  • editor.background#212121
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#c6f30040
  • editor.selectionHighlightBackground#ffcc0020
  • editorBracketMatch.background#212121
  • editorBracketMatch.border#ffcc0050
  • editorCursor.foreground#caff29
  • editorError.foreground#ff537070
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#212121
  • editorGutter.addedBackground#c3e88d60
  • editorGutter.deletedBackground#ff537060
  • editorGutter.modifiedBackground#82aaff60
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#ffffff10
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#42424270
  • editorInlayHint.background#3c383660
  • editorInlayHint.foreground#5f5f5f
  • editorLineNumber.activeForeground#caff29
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#eeffff
  • editorMarkerNavigation.background#eeffff05
  • editorOverviewRuler.border#212121
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#ffffff10
  • editorSuggestWidget.foreground#eeffff
  • editorSuggestWidget.highlightForeground#caff29
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#ffcc0050
  • editorWhitespace.foreground#eeffff40
  • editorWidget.background#1a1a1a
  • editorWidget.border#ff0000
  • editorWidget.resizeBorder#caff29
  • extensionButton.prominentBackground#c3e88d90
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#ffffff00
  • gitDecoration.conflictingResourceForeground#ffcb6b90
  • gitDecoration.deletedResourceForeground#ff537090
  • gitDecoration.ignoredResourceForeground#84848490
  • gitDecoration.modifiedResourceForeground#82aaff90
  • gitDecoration.untrackedResourceForeground#c3e88d90
  • input.background#2b2b2b
  • input.border#ffffff10
  • input.foreground#eeffff
  • input.placeholderForeground#eeffff60
  • inputValidation.errorBorder#d30700
  • inputValidation.infoBorder#89ddff
  • inputValidation.warningBorder#caac00
  • list.activeSelectionBackground#1a1a1a
  • list.activeSelectionForeground#caff29
  • list.focusBackground#eeffff20
  • list.focusForeground#eeffff
  • list.highlightForeground#caff29
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#caff29
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#212121
  • menu.foreground#eeffff
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#BBBBBB
  • menu.separatorBackground#333
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#BBB
  • notificationLink.foreground#BBB
  • notifications.background#212121
  • notifications.foreground#eeffff
  • panel.background#1a1a1a
  • panel.border#00000060
  • panelTitle.activeBorder#caff29
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#eeffff
  • peekView.border#00000030
  • peekViewEditor.background#eeffff05
  • peekViewEditor.matchHighlightBackground#61616150
  • peekViewEditorGutter.background#eeffff05
  • peekViewResult.background#eeffff05
  • peekViewResult.matchHighlightBackground#61616150
  • peekViewResult.selectionBackground#84848470
  • peekViewTitle.background#eeffff05
  • peekViewTitleDescription.foreground#eeffff60
  • pickerGroup.foreground#bbb
  • progressBar.background#caff29
  • scrollbar.shadow#21212100
  • scrollbarSlider.activeBackground#caff29
  • scrollbarSlider.background#eeffff20
  • scrollbarSlider.hoverBackground#eeffff10
  • selection.background#eeffff20
  • settings.checkboxBackground#1a1a1a
  • settings.checkboxForeground#eeffff
  • settings.dropdownBackground#1a1a1a
  • settings.dropdownForeground#eeffff
  • settings.headerForeground#caff29
  • settings.modifiedItemIndicator#caff29
  • settings.numberInputBackground#1a1a1a
  • settings.numberInputForeground#eeffff
  • settings.textInputBackground#1a1a1a
  • settings.textInputForeground#eeffff
  • sideBar.background#1a1a1a
  • sideBar.border#00000060
  • sideBar.foreground#848484
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.border#00000060
  • sideBarTitle.foreground#eeffff
  • statusBar.background#1a1a1a
  • statusBar.border#00000060
  • statusBar.debuggingBackground#ff9a3b
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#616161
  • statusBar.noFolderBackground#212121
  • statusBarItem.hoverBackground#4a4a4a20
  • tab.activeBorder#caff29
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#848484
  • tab.border#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#848484
  • tab.unfocusedActiveBorder#4a4a4a
  • tab.unfocusedActiveForeground#eeffff
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#ffffff
  • textLink.activeForeground#eeffff
  • textLink.foreground#caff29
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#eeffff
  • titleBar.border#00000060
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#848484
  • widget.shadow#00000030

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