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.activeBorder#e7f98b
  • activityBar.background#2a2d2a
  • activityBar.foreground#ddf8dd
  • activityBarBadge.background#e7f98b
  • activityBarBadge.foreground#2a2d2a
  • badge.background#869886
  • breadcrumb.activeSelectionForeground#ddf8dd
  • breadcrumb.background#2a2d2a
  • breadcrumb.focusForeground#ddf8dd
  • breadcrumb.foreground#738273
  • breadcrumbPicker.background#2a2d2a
  • button.background#a9bca9
  • button.foreground#2a2d2a
  • button.hoverBackground#92aa92
  • checkbox.background#2a2d2a
  • checkbox.border#738273
  • commandCenter.activeBackground#2a2d2a
  • commandCenter.background#2a2d2a
  • diffEditor.insertedLineBackground#f9f58b1a
  • diffEditor.insertedTextBackground#f9f58b26
  • diffEditor.removedLineBackground#F926721a
  • diffEditor.removedTextBackground#F9267226
  • dropdown.background#2a2d2a
  • dropdown.border#2a2d2a
  • dropdown.listBackground#2a2d2a
  • editor.background#2a2d2a
  • editor.foreground#ddf8dd
  • editor.lineHighlightBackground#484d4842
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#484d4899
  • editor.selectionHighlightBackground#484d4866
  • editor.wordHighlightBackground#e7f98b26
  • editor.wordHighlightStrongBackground#e7f98b40
  • editorBracketHighlight.foreground1#738273
  • editorBracketHighlight.foreground2#738273
  • editorBracketHighlight.foreground3#738273
  • editorBracketHighlight.foreground4#738273
  • editorBracketHighlight.foreground5#738273
  • editorBracketHighlight.foreground6#738273
  • editorBracketHighlight.unexpectedBracket.foreground#d1f98b
  • editorCursor.foreground#e7f98b
  • editorError.foreground#F92672
  • editorGroup.border#585f58
  • editorGroupHeader.tabsBackground#2a2d2a
  • editorGutter.addedBackground#f9f58b
  • editorGutter.background#2a2d2a
  • editorGutter.deletedBackground#F92672
  • editorGutter.modifiedBackground#adbca9
  • editorHoverWidget.background#393d39
  • editorHoverWidget.border#2a2d2a
  • editorIndentGuide.activeBackground#738273
  • editorIndentGuide.activeBackground1#738273
  • editorIndentGuide.background#434743
  • editorIndentGuide.background1#434743
  • editorInfo.foreground#adbca9
  • editorLineNumber.activeForeground#7e8b7e
  • editorLineNumber.foreground#545c54
  • editorSuggestWidget.background#393d39
  • editorSuggestWidget.border#2a2d2a
  • editorSuggestWidget.foreground#ddf8dd
  • editorSuggestWidget.highlightForeground#e7f98b
  • editorSuggestWidget.selectedBackground#484d48
  • editorUnicodeHighlight.background#7382731f
  • editorUnicodeHighlight.border#73827373
  • editorWarning.foreground#d1f98b
  • editorWidget.background#393d39
  • editorWidget.border#2a2d2a
  • editorWidget.foreground#ddf8dd
  • focusBorder#73827399
  • foreground#ddf8dd
  • gitDecoration.addedResourceForeground#f9f58b
  • gitDecoration.conflictingResourceForeground#d1f98b
  • gitDecoration.deletedResourceForeground#F92672
  • gitDecoration.ignoredResourceForeground#585f58
  • gitDecoration.modifiedResourceForeground#adbca9
  • gitDecoration.stageDeletedResourceForeground#F92672
  • gitDecoration.stageModifiedResourceForeground#adbca9
  • gitDecoration.untrackedResourceForeground#f9f58b
  • input.background#2a2d2a
  • input.border#2a2d2a
  • input.foreground#ddf8dd
  • input.placeholderForeground#ddf8dd66
  • list.activeSelectionBackground#393d39
  • list.activeSelectionForeground#ddf8dd
  • list.focusBackground#393d39
  • list.focusForeground#ddf8dd
  • list.focusHighlightForeground#e7f98b
  • list.highlightForeground#e7f98b
  • list.hoverBackground#343834
  • list.hoverForeground#ddf8dd
  • list.inactiveSelectionBackground#393d39
  • list.inactiveSelectionForeground#ddf8dd
  • menu.background#393d39
  • menu.border#2a2d2a
  • menu.foreground#ddf8dd
  • menu.selectionBackground#484d48
  • menu.selectionForeground#ddf8dd
  • menu.separatorBackground#424842
  • menubar.selectionBackground#393d39
  • notificationCenterHeader.background#2a2d2a
  • notificationCenterHeader.foreground#ddf8dd
  • notifications.background#2a2d2a
  • notifications.foreground#ddf8dd
  • panel.background#2a2d2a
  • panel.border#585f58
  • peekView.border#738273
  • peekViewEditor.background#393d39
  • peekViewResult.background#393d39
  • peekViewTitle.background#393d39
  • pickerGroup.border#2a2d2a
  • pickerGroup.foreground#a9bca9
  • progressBar.background#99a659
  • quickInput.background#393d39
  • quickInputList.focusBackground#484d48
  • sash.hoverBorder#738273
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#585f58b3
  • scrollbarSlider.background#585f584d
  • scrollbarSlider.hoverBackground#585f5880
  • sideBar.background#2a2d2a
  • sideBar.border#585f58
  • sideBar.foreground#ddf8dd
  • sideBarSectionHeader.background#2a2d2a
  • sideBarSectionHeader.foreground#ddf8dd
  • sideBarTitle.foreground#ddf8dd
  • statusBar.background#2a2d2a
  • statusBar.foreground#ddf8dd
  • statusBarItem.errorBackground#AE81FF
  • statusBarItem.hoverBackground#2a2d2a
  • statusBarItem.prominentHoverBackground#2a2d2a
  • statusBarItem.remoteBackground#869886
  • tab.activeBackground#2a2d2a
  • tab.activeBorder#99a659
  • tab.activeForeground#ddf8dd
  • tab.inactiveBackground#2a2d2a
  • tab.inactiveForeground#ddf8dd
  • terminal.ansiBlack#424842
  • terminal.ansiBlue#8a9886
  • terminal.ansiBrightBlack#585f58
  • terminal.ansiBrightBlue#adbca9
  • terminal.ansiBrightCyan#a9bcad
  • terminal.ansiBrightGreen#f9f58b
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#F92672
  • terminal.ansiBrightWhite#ddf8dd
  • terminal.ansiBrightYellow#d1f98b
  • terminal.ansiCyan#86988a
  • terminal.ansiGreen#a6a459
  • terminal.ansiMagenta#8064b4
  • terminal.ansiRed#b12859
  • terminal.ansiWhite#869886
  • terminal.ansiYellow#8aa659
  • terminal.background#2a2d2a
  • terminal.foreground#ddf8dd
  • terminal.selectionBackground#484d4880
  • terminalCursor.background#2a2d2a
  • terminalCursor.foreground#e7f98b
  • textLink.activeForeground#effbb2
  • textLink.foreground#e7f98b
  • titleBar.activeBackground#2a2d2a
  • titleBar.activeForeground#ddf8dd
  • titleBar.border#585f58
  • titleBar.inactiveBackground#2a2d2a
  • titleBar.inactiveForeground#ddf8dd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#585f58 italic
meta.parameters comment.block#747a52 italic
string#e7f98b
constant.numeric#e7f98b
constant.language#e7f98b
constant.character, constant.other#e7f98b
variable.other.constant#a9bca9
variable, support.other.variable#a9bca9
keyword#99a659
storage#99a659
storage.type#99a659italic
storage.type.function.arrow#e7f98b
entity.name.class#ddf8ddunderline
support.type#ddf8dd
entity.name.type#e7f98b
entity.name.type.module#738273
entity.other.inherited-class#ddf8dditalic underline
entity.name.function#738273
variable.parameter#869886italic
entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.id#ddf8dd
entity.other.attribute-name#a9bca9
support.function#ddf8dd
support.constant#e7f98b
support.class#a9bca9
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.brace, punctuation#738273
punctuation.definition.string#747a52
punctuation.accessor#a9bca9
punctuation.accessor.optional#99a659
variable.other.property, variable.other.object.property, support.variable.property#869886
keyword.operator.optional, keyword.operator.safe-navigation#99a659
comment.block.c#747a52 italic
meta.property-name, support.type.property-name#869886
meta.property-value#585f58
meta.object-literal.key#e7f98b
variable.other.readwrite.alias#a9bca9
variable.language.this, support.variable.object, support.variable.dom#869886
text.html#738273
source.css#585f58
keyword.other.unit#99a659
support.function.css, support.function.scss, support.function.sass#747a52
punctuation.terminator.rule.css, punctuation.terminator.rule.scss, punctuation.terminator.rule.sass#747a52
keyword.control.at-rule#ddf8dd
entity.other.attribute-name.parent-selector-suffix#ddf8dd
support.type.property-name.json#a9bca9
constant.language.json#99a659
entity.name.tag.yaml#a9bca9
constant.language.yaml#99a659
markup.boldbold
markup.italicitalic
markup.underline.link#a9bca9
markup.heading.1, markup.heading.2, markup.heading.3#e7f98b
markup.heading.4, markup.heading.5, markup.heading.6#99a659
markup.fenced_code.block#e7f98b
markup.quote#738273
markup.strikethrough#585f58
source.coffee#738273
constant.name.attribute.tag.jade, constant.name.attribute.tag.pug#738273
sidebar
DuoTone Redux by Ampp33 - VS Code Theme