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#2e2f34
  • activityBar.foreground#b2b3aa
  • activityBarBadge.background#59776b
  • badge.background#59776b
  • badge.foreground#d8d8d8
  • banner.iconForeground#e6c18a
  • breadcrumb.activeSelectionForeground#d8d8d8
  • breadcrumb.foreground#b2b3aa
  • button.background#59776b
  • button.foreground#ecf0f5
  • debugConsole.infoForeground#e6c18a
  • dropdown.background#212225
  • dropdown.foreground#b2b3aa
  • dropdown.listBackground#212225
  • editor.background#28282b
  • editor.findMatchHighlightBackground#59776b70
  • editor.foreground#b2b3aa
  • editor.lineHighlightBackground#323232
  • editor.selectionBackground#b2b3aa70
  • editor.selectionHighlightBackground#59776b4b
  • editorCursor.foreground#d8d8d8
  • editorError.foreground#ab5855
  • editorGroupHeader.tabsBackground#2e2f34
  • editorHoverWidget.background#2e2f34
  • editorHoverWidget.foreground#b2b3aa
  • editorIndentGuide.activeBackground1#4d4d53
  • editorIndentGuide.background1#5e646930
  • editorInfo.foreground#e6c18a
  • editorLineNumber.activeForeground#b2b3aa
  • editorLineNumber.foreground#5e6469
  • editorMarkerNavigation.background#21252b
  • editorMarkerNavigationInfo.background#e6c18a
  • editorOverviewRuler.deletedForeground#94151b
  • editorOverviewRuler.errorForeground#c23833a4
  • editorOverviewRuler.findMatchForeground#597f90c4
  • editorOverviewRuler.infoForeground#e6c18a
  • editorOverviewRuler.warningForeground#e6c18a
  • editorSuggestWidget.background#212225
  • editorSuggestWidget.highlightForeground#d8d8d8
  • editorSuggestWidget.selectedBackground#2e2f34
  • editorWarning.foreground#e6c18a
  • editorWidget.background#212225
  • extensionIcon.verifiedForeground#e6c18a
  • focusBorder#b7b9bb00
  • gitDecoration.untrackedResourceForeground#6aa389
  • gitlens.decorations.addedForegroundColor#6aa389
  • gitlens.decorations.branchAheadForegroundColor#6aa389
  • gitlens.unpublishedCommitIconColor#6aa389
  • icon.foreground#b2b3aa
  • input.background#2e2f34
  • input.border#59776b
  • input.foreground#b2b3aa
  • interactive.activeCodeBorder#e6c18a
  • list.activeSelectionBackground#2e2f34
  • list.dropBackground#354740
  • list.errorForeground#b8625f
  • list.filterMatchBackground#59776b
  • list.filterMatchBorder#85a4d4
  • list.focusOutline#59776b
  • list.highlightForeground#d8d8d8
  • list.hoverBackground#2e2f34
  • list.hoverForeground#d8d8d8
  • list.inactiveSelectionBackground#2e2f34
  • list.inactiveSelectionForeground#d8d8d8
  • list.warningForeground#ccac7b
  • listFilterWidget.background#59776b
  • listFilterWidget.noMatchesOutline#af746f
  • minimap.errorHighlight#c23833a4
  • minimap.findMatchHighlight#597f90c4
  • minimap.selectionHighlight#59776bb6
  • minimap.warningHighlight#af91639a
  • minimapGutter.addedBackground#cdd3c1
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#95a1a5
  • minimapSlider.activeBackground#bfbfbf33
  • minimapSlider.background#979eac80
  • minimapSlider.hoverBackground#59776b80
  • notificationLink.foreground#e6c18a
  • notifications.background#212225
  • notifications.foreground#b2b3aa
  • notificationsInfoIcon.foreground#e6c18a
  • peekView.border#e6c18a
  • pickerGroup.foreground#e6c18a
  • problemsInfoIcon.foreground#e6c18a
  • quickInput.background#212225
  • quickInput.foreground#b2b3aa
  • quickInputList.focusBackground#2e2f34
  • scrollbarSlider.background#34363a
  • scrollbarSlider.hoverBackground#59776b
  • searchEditor.findMatchBackground#905757
  • settings.textInputBackground#212225
  • sideBar.background#212225
  • sideBar.foreground#b2b3aa
  • sideBarSectionHeader.background#212225
  • sideBarSectionHeader.foreground#b2b3aa
  • sideBarTitle.foreground#5e6469
  • statusBar.background#212225
  • statusBar.foreground#b2b3aa
  • statusBarItem.hoverBackground#59776b
  • tab.activeBackground#2e2f34
  • tab.activeForeground#d8d8d8
  • tab.border#373838
  • tab.inactiveBackground#212225
  • tab.inactiveForeground#b2b3aa
  • terminal.ansiBlack#3b3a45
  • terminal.ansiBlue#7ca3b2
  • terminal.ansiBrightBlack#5e6469
  • terminal.ansiBrightBlue#7ca3b2
  • terminal.ansiBrightCyan#5ea899
  • terminal.ansiBrightGreen#59776b
  • terminal.ansiBrightMagenta#9e8bba
  • terminal.ansiBrightRed#ab5855
  • terminal.ansiBrightWhite#b2b3aa
  • terminal.ansiBrightYellow#e6c18a
  • terminal.ansiCyan#5ea899
  • terminal.ansiGreen#59776b
  • terminal.ansiMagenta#9e8bba
  • terminal.ansiRed#ab5855
  • terminal.ansiWhite#b2b3aa
  • terminal.ansiYellow#e6c18a
  • terminal.background#28282b
  • terminal.foreground#b9b9b4
  • textLink.activeForeground#e6c18a
  • textLink.foreground#e6c18a
  • welcomePage.progress.foreground#e6c18a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
entity.name.function-call.elixir#88C0D0BD
source.elixir#B2B3AA
strongbold
comment#B2B3AA7C
constant.character#EBCB8B
constant.character.escape#EBCB8B
constant.language#B8F3DA88
constant.numeric#B48EAD
constant.regexp#EBCB8B
entity.name.class, entity.name.type.class#B4AA6F
entity.name.function#88C0D0BD
entity.name.tag#B8F3DA88
entity.other.attribute-name#B4AA6F
entity.other.inherited-class#B4AA6Fbold
invalid.deprecated#B2B3AA
invalid.illegal#B2B3AA
keyword#B8F3DA88
keyword.operator#B8F3DA88
keyword.other.new#B8F3DA88
markup.boldbold
markup.changed#EBCB8B
markup.deleted#BF616A
markup.inserted#A3BE8C
meta.preprocessor#F3F3F3
punctuation#ECEFF481
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#ECEFF481
punctuation.definition.tag#B8F3DA88
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#B7BEB3C9
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#B2B3AA7C
punctuation.section#ECEFF481
punctuation.section.embedded.begin, punctuation.section.embedded.end#B8F3DA88
punctuation.terminator#B8F3DA88
punctuation.definition.variable#B8F3DA88
storage#B8F3DA88
string#A3BE8C
string.regexp#EBCB8B
support.class#B4AA6F
support.constant#B8F3DA88
support.function#88C0D0BD
support.function.construct#B8F3DA88
support.type#B4AA6F
support.type.exception#B4AA6F
token.debug-token#B48EAD
token.error-token#BF616A
token.info-token#88C0D0BD
token.warn-token#EBCB8B
variable.other#B2B3AA
variable.language#B8F3DA88
variable.parameter#B2B3AA
punctuation.separator.pointer-access.c#B8F3DA88
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#B4AA6F
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#5E81ACbold
source.css constant.other.color.rgb-value#B48EAD
source.css meta.property-value#88C0D0BD
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#B8F3DA88
source.css support.type.property-name#B2B3AA
source.diff meta.diff.range.context#B4AA6F
source.diff meta.diff.header.from-file#B4AA6F
source.diff punctuation.definition.from-file#B4AA6F
source.diff punctuation.definition.range#B4AA6F
source.diff punctuation.definition.separator#B8F3DA88
entity.name.type.module.elixir#B4AA6F
variable.other.readwrite.module.elixir#B2B3AAbold
constant.other.symbol.elixir#B2B3AAbold
variable.other.constant.elixir#E9827EAD
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#B8F3DA88
source.java constant.other#B2B3AA
source.java keyword.other.documentation#B4AA6F
source.java keyword.other.documentation.author.javadoc#B4AA6F
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#B4AA6F
source.java keyword.other.documentation.see.javadoc#B4AA6F
source.java meta.method-call meta.method#88C0D0BD
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#B4AA6F
source.java meta.tag.template.value.javadoc#88C0D0BD
source.java punctuation.definition.keyword.javadoc#B4AA6F
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#B2B3AA7C
source.java storage.modifier.import#B4AA6F
source.java storage.modifier.package#B4AA6F
source.java storage.type#B4AA6F
source.java storage.type.annotation#D08770
source.java storage.type.generic#B4AA6F
source.java storage.type.primitive#B8F3DA88
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D08770
source.js meta.object-literal.key#88C0D0BD
source.js storage.type.class.jsdoc#B4AA6F
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#B8F3DA88
source.js string.quoted.template meta.method-call.with-arguments#ECEFF481
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#B2B3AA
source.js support.type.primitive#B8F3DA88
source.js variable.other.object#B2B3AA
source.js variable.other.readwrite.alias#B4AA6F
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#ECEFF481
text.html.basic constant.character.entity.html#EBCB8B
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#B8F3DA88
source.properties entity.name.section.group-title.ini#88C0D0BD
source.properties punctuation.separator.key-value.ini#B8F3DA88
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#B4AA6F
markup.heading#88C0D0BD
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#B4AA6F
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#B8F3DA88
text.html.markdown beginning.punctuation.definition.quote#B4AA6F
text.html.markdown markup.quote#B2B3AA7C
text.html.markdown punctuation.definition.heading#B8F3DA88
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#B8F3DA88
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#88C0D0BD
source.perl punctuation.definition.variable#B2B3AA
source.php meta.function-call, source.php meta.function-call.object#88C0D0BD
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call.generic#88C0D0BD
source.python support.type#88C0D0BD
source.python variable.parameter.function.language#B2B3AA
source.python meta.function.parameters variable.parameter.function.language.special.self#B8F3DA88
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#B8F3DA88
source.css.scss variable.interpolation#B2B3AAitalic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#D08770
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#B2B3AA
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#88C0D0BD
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#B4AA6F
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#B4AA6F
source.ts support.variable, source.tsx support.variable#B2B3AA
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#ECEFF481
text.xml entity.name.tag.namespace#B4AA6F
text.xml keyword.other.doctype#5E81AC
text.xml meta.tag.preprocessor entity.name.tag#5E81AC
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#B4AA6F
Themes To Die For by Alec Larson - VS Code Theme