Skip to main content
CodingTheme

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#161F22
  • activityBar.border#161F22
  • activityBar.foreground#C7C7C7
  • activityBarBadge.background#CE3B3B
  • activityBarBadge.foreground#161F22
  • badge.background#161F22
  • badge.foreground#CE3B3B
  • breadcrumb.activeSelectionForeground#CE3B3B
  • breadcrumb.background#1D2226
  • breadcrumb.focusForeground#CE3B3B
  • breadcrumb.foreground#C7C7C7
  • breadcrumbPicker.background#1D2226
  • button.background#a32929b9
  • contrastBorder#242F38
  • debugToolBar.background#3B424A
  • dropdown.background#222C34
  • dropdown.border#e9e9e910
  • editor.background#1D2226
  • editor.findMatchBackground#1D2226
  • editor.findMatchBorder#222C34
  • editor.findMatchHighlightBackground#A3292993
  • editor.findMatchHighlightBorder#E9E9E930
  • editor.foreground#C7C7C7
  • editor.lineHighlightBackground#161F22
  • editor.selectionBackground#3b8ece30
  • editor.selectionHighlightBackground#2e63a36a
  • editor.selectionHighlightBorder#2e63a3f0
  • editorCursor.foreground#cf0c0c
  • editorError.foreground#d51313
  • editorGroup.border#222C34
  • editorGroupHeader.tabsBackground#222C34
  • editorHoverWidget.background#161F22
  • editorHoverWidget.border#E9E9E910
  • editorIndentGuide.activeBackground#CE3B3Bf0
  • editorIndentGuide.background#22262A70
  • editorInfo.foreground#318f27
  • editorLink.activeForeground#C7C7C7
  • editorMarkerNavigation.background#C7C7C705
  • editorOverviewRuler.border#161F22
  • editorOverviewRuler.errorForeground#d5131370
  • editorOverviewRuler.findMatchForeground#A32929
  • editorOverviewRuler.infoForeground#318f2770
  • editorOverviewRuler.warningForeground#e4b12670
  • editorRuler.foreground#222C34
  • editorSuggestWidget.background#222C34
  • editorSuggestWidget.border#E9E9E910
  • editorSuggestWidget.focusHighlightForeground#0990ff
  • editorSuggestWidget.foreground#C7C7C7
  • editorSuggestWidget.highlightForeground#0782e7
  • editorSuggestWidget.selectedBackground#A3292982
  • editorSuggestWidget.selectedForeground#dadada
  • editorWarning.foreground#e4b126
  • editorWhitespace.foreground#C7C7C740
  • editorWidget.background#222C34
  • editorWidget.border#000000
  • editorWidget.resizeBorder#222C34
  • extensionButton.prominentBackground#A3292982
  • extensionButton.prominentHoverBackground#ce3b3bba
  • focusBorder#E9E9E900
  • input.background#182125
  • input.border#E9E9E910
  • input.foreground#C7C7C7
  • input.placeholderForeground#C7C7C760
  • inputOption.activeBackground#C7C7C730
  • inputOption.activeBorder#C7C7C730
  • inputValidation.errorBorder#e5090950
  • inputValidation.infoBorder#318f2750
  • inputValidation.warningBorder#e4b12650
  • list.activeSelectionBackground#182125
  • list.activeSelectionForeground#C7C7C7
  • list.focusBackground#182125
  • list.focusForeground#CE3B3B
  • list.highlightForeground#A32929
  • list.hoverBackground#0a0d1062
  • list.hoverForeground#C7C7C7
  • list.inactiveSelectionBackground#1821259b
  • list.inactiveSelectionForeground#C7C7C7
  • list.warningForeground#e4b126
  • listFilterWidget.background#161F2230
  • listFilterWidget.noMatchesOutline#161F2230
  • listFilterWidget.outline#161F2230
  • menu.background#222C34
  • menu.border#242F38
  • menu.foreground#C7C7C7
  • menu.selectionBackground#161F22
  • menu.selectionBorder#161F2230
  • menu.selectionForeground#C7C7C7
  • menu.separatorBackground#C7C7C7
  • menubar.selectionBackground#222C34
  • menubar.selectionBorder#a3292900
  • menubar.selectionForeground#C7C7C7
  • minimap.background#161F22
  • notificationLink.foreground#A32929
  • notifications.background#222C34
  • notifications.foreground#C7C7C7
  • panel.background#1D2226
  • panel.border#242F38
  • panelTitle.activeBorder#A32929
  • panelTitle.activeForeground#E9E9E9
  • panelTitle.inactiveForeground#C7C7C7
  • peekView.border#222C34
  • peekViewEditor.background#C7C7C705
  • peekViewEditor.matchHighlightBackground#A3292950
  • peekViewEditorGutter.background#C7C7C705
  • peekViewResult.background#C7C7C705
  • peekViewResult.matchHighlightBackground#A3292950
  • peekViewResult.selectionBackground#A3292970
  • peekViewTitle.background#C7C7C705
  • peekViewTitleDescription.foreground#C7C7C760
  • pickerGroup.foreground#A32929
  • progressBar.background#A32929
  • scrollbar.shadow#222C3400
  • scrollbarSlider.activeBackground#521414cc
  • scrollbarSlider.background#521414bb
  • scrollbarSlider.hoverBackground#521414ee
  • selection.background#A32929
  • settings.checkboxBackground#222C34
  • settings.checkboxForeground#C7C7C7
  • settings.dropdownBackground#222C34
  • settings.dropdownForeground#C7C7C7
  • settings.headerForeground#A32929
  • settings.modifiedItemIndicator#A32929
  • settings.numberInputBackground#222C34
  • settings.numberInputForeground#C7C7C7
  • settings.textInputBackground#222C34
  • settings.textInputForeground#C7C7C7
  • sideBar.background#222C34
  • sideBar.border#222C34
  • sideBar.foreground#C7C7C7
  • sideBarSectionHeader.background#222C34
  • sideBarSectionHeader.border#222C34
  • sideBarSectionHeader.foreground#C7C7C7
  • sideBarTitle.foreground#C7C7C7
  • statusBar.background#521414
  • statusBar.border#22262A
  • statusBar.debuggingBackground#3b7730
  • statusBar.debuggingForeground#E9E9E9
  • statusBar.foreground#E9E9E9
  • statusBar.noFolderBackground#521414
  • statusBarItem.hoverBackground#52141420
  • statusBarItem.remoteBackground#521414
  • statusBarItem.remoteForeground#E9E9E9
  • tab.activeBackground#A3292950
  • tab.activeBorder#A32929
  • tab.activeForeground#E9E9E9
  • tab.activeModifiedBorder#A32929
  • tab.border#222C34
  • tab.inactiveBackground#52141430
  • tab.inactiveForeground#C7C7C7af
  • tab.unfocusedActiveBackground#A3292940
  • tab.unfocusedActiveBorder#222C34
  • tab.unfocusedActiveForeground#C7C7C7
  • tab.unfocusedInactiveBackground#52141410
  • tab.unfocusedInactiveForeground#C7C7C77f
  • terminalCursor.foreground#A32929
  • textLink.activeForeground#C7C7C7
  • textLink.foreground#A32929
  • titleBar.activeBackground#161F22
  • titleBar.activeForeground#C7C7C7
  • titleBar.border#161F22
  • titleBar.inactiveBackground#1F2529
  • titleBar.inactiveForeground#c7c7c771
  • tree.indentGuidesStroke#A32929
  • widget.shadow#161F2230

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#abb2bf
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#e69040
variable.other.generic-type.haskell#CF82E8
storage.type.haskell#e15965
support.variable.magic.python#e69040
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#abb2bf
variable.parameter.function.language.special.self.python#e9dd54
variable.parameter.function.language.special.cls.python#e9dd54
storage.modifier.lifetime.rust#abb2bf
support.function.std.rust#43A4F4
entity.name.lifetime.rust#e9dd54
variable.language.rust#e69040
support.constant.edge#CF82E8
constant.other.character-class.regexp#e69040
keyword.operator.word#CF82E8
keyword.operator.quantifier.regexp#e15965
variable.parameter.function#abb2bf
comment markup.link#5c6370
markup.changed.diff#e9dd54
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#43A4F4
markup.inserted.diff#49B649
markup.deleted.diff#e69040
meta.function.c,meta.function.cpp#e69040
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#43A4F4
support.constant.math#e9dd54
support.constant.property.math#e15965
variable.other.constant#e9dd54
storage.type.annotation.java, storage.type.object.array.java#e9dd54
source.java#e69040
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#43A4F4
storage.modifier.import.java,storage.type.java,storage.type.generic.java#e9dd54
keyword.operator.instanceof.java#CF82E8
meta.definition.variable.name.java#e69040
keyword.operator.logical#5ed1e0
keyword.operator.bitwise#37beac
keyword.operator.channel#37beac
support.constant.property-value.scss,support.constant.property-value.css#CF82E8
keyword.operator.css,keyword.operator.scss,keyword.operator.less#37beac
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#e15965
variable.scss,meta.property-value.scss,meta.property-list.scss,meta.property-list.scss,source.css.scss#43A4F4
punctuation.separator.list.comma.css#abb2bf
support.constant.color.w3c-standard-color-name.css#e15965
support.type.property-name.css,meta.property-name.scss,meta.property-list.scss,meta.property-list.scss#43A4F4
entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css#e9dd54
support.module.node,support.type.object.module,support.module.node#e9dd54
entity.name.type.module#e9dd54
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#e69040
support.constant.json#e15965
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#CF82E8
support.type.object.console#e69040
support.variable.property.process#e15965
entity.name.function,support.function.console#43A4F4
keyword.operator.misc.rust#abb2bf
keyword.operator.sigil.rust#CF82E8
keyword.operator.delete#CF82E8
support.type.object.dom#37beac
support.variable.dom,support.variable.property.dom#e69040
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#37beac
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#CF82E8
punctuation.separator.delimiter#abb2bf
punctuation.separator.c,punctuation.separator.cpp#CF82E8
support.type.posix-reserved.c,support.type.posix-reserved.cpp#37beac
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#CF82E8
variable.parameter.function.language.python#e15965
support.type.python#37beac
keyword.operator.logical.python#CF82E8
variable.parameter.function.python#e15965
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#43A4F4
constant.character.format.placeholder.other.python#e15965
keyword.operator#abb2bf
keyword.operator.assignment.compound#CF82E8
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#37beac
keyword#CF82E8
entity.name.namespace#e9dd54
variable#e69040
variable.c#abb2bf
variable.language#e9dd54
token.variable.parameter.java#abb2bf
import.storage.java#e9dd54
token.package.keyword#CF82E8
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#43A4F4
entity.name.type.namespace#e9dd54
support.class, entity.name.type.class#e9dd54
entity.name.class.identifier.namespace.type#e9dd54
entity.name.class, variable.other.class.js, variable.other.class.ts#e9dd54
variable.other.class.php#e69040
entity.name.type#e9dd54
keyword.control#CF82E8
control.elements, keyword.operator.less#e15965
keyword.other.special-method#43A4F4
storage#CF82E8
token.storage#CF82E8
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#CF82E8
token.storage.type.java#e9dd54
support.function#37beac
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#e15965
meta.tag#abb2bf
string#49B649
constant.other.symbol#37beac
constant.numeric#e15965
constant#e15965
punctuation.definition.constant#e15965
entity.name.tag#e69040
entity.other.attribute-name#e15965
entity.other.attribute-name.id#43A4F4normal
entity.other.attribute-name.class.css#e15965normal
meta.selector#CF82E8
markup.heading#43A4F4bold
markup.heading punctuation.definition.heading, entity.name.section#43A4F4bold
keyword.other.unit#e15965
markup.bold,todo.bold#e15965bold
punctuation.definition.bold#e9dd54bold
markup.italic, punctuation.definition.italic,todo.emphasis#CF82E8italic
emphasis md#CF82E8italic
entity.name.section.markdown#43A4F4bold
punctuation.definition.heading.markdown#43A4F4bold
punctuation.definition.list.begin.markdown#43A4F4bold
markup.heading.setext#abb2bfbold
punctuation.definition.bold.markdown#e15965bold
markup.inline.raw.markdown#49B649
markup.inline.raw.string.markdown#49B649
punctuation.definition.raw.markdown#e9dd54
punctuation.definition.list.markdown#43A4F4bold
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#43A4F4
beginning.punctuation.definition.list.markdown#43A4F4
punctuation.definition.metadata.markdown#43A4F4
markup.underline.link.markdown,markup.underline.link.image.markdown#CF82E8
string.other.link.title.markdown,string.other.link.description.markdown#43A4F4
markup.raw.monospace.asciidoc#49B649
punctuation.definition.asciidoc#e9dd54
markup.list.asciidoc#e9dd54
markup.link.asciidoc,markup.other.url.asciidoc#CF82E8
string.unquoted.asciidoc,markup.other.url.asciidoc#43A4F4
string.regexp#37beac
punctuation.section.embedded, variable.interpolation#e69040
punctuation.section.embedded.begin,punctuation.section.embedded.end#CF82E8
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#abb2bf
invalid.illegal.unrecognized-tag.html#e69040
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.deprecated.entity.other.attribute-name.html#e15965
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#e69040
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e69040
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#49B649
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#37beac
support.type.property-name.json#e69040
support.type.property-name.json punctuation#e69040
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#CF82E8
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#CF82E8
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#e9dd54
keyword.operator.error-control.php#CF82E8
keyword.operator.type.php#CF82E8
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#e9dd54
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#43A4F4
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#e15965
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#e15965
entity.name.goto-label.php,support.other.php#43A4F4
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#37beac
keyword.operator.regexp.php#CF82E8
keyword.operator.comparison.php#37beac
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#CF82E8
meta.function.decorator.python#43A4F4
support.token.decorator.python,meta.function.decorator.identifier.python#37beac
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
constant.language.symbol.ruby#37beac
rgb-value#37beac
inline-color-decoration rgb-value#e15965
less rgb-value#e15965
selector.sass#e69040
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e9dd54
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#e9dd54
entity.name.variable.local.cs#e69040
token.info-token#43A4F4
token.warn-token#e15965
token.error-token#f44747
token.debug-token#CF82E8
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#CF82E8
meta.template.expression#abb2bf
keyword.operator.module#CF82E8
support.type.type.flowtype#43A4F4
support.type.primitive#e9dd54
meta.property.object#e69040
variable.parameter.function.js#e69040
keyword.other.template.begin#49B649
keyword.other.template.end#49B649
keyword.other.substitution.begin#49B649
keyword.other.substitution.end#49B649
keyword.operator.assignment#37beac
keyword.operator.assignment.go#e9dd54
keyword.operator.arithmetic.go, keyword.operator.address.go#CF82E8
entity.name.package.go#e9dd54
support.type.prelude.elm#37beac
support.constant.elm#e15965
punctuation.quasi.element#CF82E8
constant.character.entity#e69040
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#37beac
entity.global.clojure#e9dd54
meta.symbol.clojure#e69040
constant.keyword.clojure#37beac
meta.arguments.coffee, variable.parameter.function.coffee#e69040
source.ini#49B649
meta.scope.prerequisites.makefile#e69040
source.makefile#e9dd54
storage.modifier.import.groovy#e9dd54
meta.method.groovy#43A4F4
meta.definition.variable.name.groovy#e69040
meta.definition.class.inherited.classes.groovy#49B649
support.variable.semantic.hlsl#e9dd54
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#CF82E8
text.variable, text.bracketed#e69040
support.type.swift, support.type.vb.asp#e9dd54
entity.name.function.xi#e9dd54
entity.name.class.xi#37beac
constant.character.character-class.regexp.xi#e69040
constant.regexp.xi#CF82E8
keyword.control.xi#37beac
invalid.xi#abb2bf
beginning.punctuation.definition.quote.markdown.xi#49B649
beginning.punctuation.definition.list.markdown.xi#76B276
constant.character.xi#43A4F4
accent.xi#43A4F4
wikiword.xi#e15965
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#e9dd54
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#e69040
meta.brace.square#abb2bf
comment, punctuation.definition.comment#578352
markup.quote.markdown#5c6370
punctuation.definition.block.sequence.item.yaml#abb2bf
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#37beac
entity.name.variable.parameter.cs#e9dd54
entity.name.variable.field.cs#e69040
markup.deleted#e69040
markup.inserted#49B649
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#abb2bf
variable.other.object#e9dd54
variable.other.constant.property#e69040
entity.other.inherited-class#e9dd54
variable.other.readwrite.c#e69040
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php#abb2bf
constant.numeric.decimal.asm.x86_64#CF82E8
support.other.parenthesis.regexp#e15965
constant.character.escape#e15965
string.regexp#e69040

Shiki preview

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

Loading...