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#102D20
  • activityBar.border#273C32
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#A8B7B0
  • activityBarBadge.background#1EC677
  • activityBarBadge.foreground#0C1C15
  • badge.background#1EC677
  • badge.foreground#0C1C15
  • breadcrumb.activeSelectionForeground#1EC677
  • breadcrumb.background#0C1C15
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#A8B7B0
  • breadcrumbPicker.background#102D20
  • button.background#1EC677
  • button.foreground#0C1C15
  • button.hoverBackground#3CCD88
  • button.secondaryBackground#125637
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#157349
  • checkbox.background#133928
  • checkbox.border#273C32
  • checkbox.foreground#FFFFFF
  • debugToolBar.background#102D20
  • debugToolBar.border#273C32
  • descriptionForeground#A8B7B0
  • diffEditor.insertedLineBackground#1EC67714
  • diffEditor.insertedTextBackground#1EC67729
  • diffEditor.removedLineBackground#EA819B14
  • diffEditor.removedTextBackground#EA819B29
  • dropdown.background#133928
  • dropdown.border#273C32
  • dropdown.foreground#FFFFFF
  • editor.background#0C1C15
  • editor.findMatchBackground#157349
  • editor.findMatchHighlightBackground#15734966
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#FFFFFF14
  • editor.inactiveSelectionBackground#FFFFFF0A
  • editor.lineHighlightBackground#FFFFFF0A
  • editor.selectionBackground#FFFFFF1F
  • editor.selectionHighlightBackground#FFFFFF14
  • editor.wordHighlightBackground#FFFFFF14
  • editor.wordHighlightStrongBackground#FFFFFF1F
  • editorBracketMatch.background#FFFFFF1F
  • editorBracketMatch.border#1EC677
  • editorCodeLens.foreground#A8B7B0
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#1EC677
  • editorError.foreground#EA819B
  • editorGroup.border#273C32
  • editorGroup.dropBackground#1EC67729
  • editorGroupHeader.noTabsBackground#102D20
  • editorGroupHeader.tabsBackground#102D20
  • editorGroupHeader.tabsBorder#273C32
  • editorGutter.background#0C1C15
  • editorHint.foreground#A8B7B0
  • editorHoverWidget.background#102D20
  • editorHoverWidget.border#273C32
  • editorIndentGuide.activeBackground#A8B7B0
  • editorIndentGuide.background#273C32
  • editorInfo.foreground#3CCD88
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#A8B7B0
  • editorOverviewRuler.border#273C32
  • editorOverviewRuler.commonContentForeground#67756E
  • editorOverviewRuler.currentContentForeground#1EC677
  • editorOverviewRuler.incomingContentForeground#8DCFD3
  • editorRuler.foreground#273C32
  • editorSuggestWidget.background#102D20
  • editorSuggestWidget.border#273C32
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.selectedBackground#133928
  • editorWarning.foreground#FFEB84
  • editorWidget.background#102D20
  • editorWidget.border#273C32
  • errorForeground#EA819B
  • extensionButton.prominentBackground#1EC677
  • extensionButton.prominentForeground#0C1C15
  • extensionButton.prominentHoverBackground#3CCD88
  • focusBorder#1EC677
  • foreground#FFFFFF
  • gitDecoration.addedResourceForeground#1EC677
  • gitDecoration.conflictingResourceForeground#F7BDFE
  • gitDecoration.deletedResourceForeground#EA819B
  • gitDecoration.ignoredResourceForeground#67756E
  • gitDecoration.modifiedResourceForeground#FFEB84
  • gitDecoration.renamedResourceForeground#8DCFD3
  • gitDecoration.stageDeletedResourceForeground#AD1138
  • gitDecoration.stageModifiedResourceForeground#D68628
  • gitDecoration.submoduleResourceForeground#A8B7B0
  • gitDecoration.untrackedResourceForeground#3CCD88
  • input.background#133928
  • input.border#273C32
  • input.foreground#FFFFFF
  • input.placeholderForeground#A8B7B0
  • inputOption.activeBackground#1EC677
  • inputOption.activeForeground#0C1C15
  • inputValidation.errorBackground#580A1D
  • inputValidation.errorBorder#EA819B
  • inputValidation.infoBackground#125637
  • inputValidation.infoBorder#3CCD88
  • inputValidation.warningBackground#1A0C00
  • inputValidation.warningBorder#FFEB84
  • list.activeSelectionBackground#157349
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#157349
  • list.focusForeground#FFFFFF
  • list.highlightForeground#1EC677
  • list.hoverBackground#FFFFFF14
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#FFFFFF14
  • list.inactiveSelectionForeground#FFFFFF
  • menu.background#102D20
  • menu.border#273C32
  • menu.foreground#FFFFFF
  • menu.selectionBackground#133928
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#273C32
  • menubar.selectionBackground#FFFFFF1F
  • menubar.selectionForeground#FFFFFF
  • merge.border#273C32
  • merge.commonContentBackground#67756E29
  • merge.commonHeaderBackground#67756E66
  • merge.currentContentBackground#1EC67729
  • merge.currentHeaderBackground#1EC67766
  • merge.incomingContentBackground#8DCFD329
  • merge.incomingHeaderBackground#8DCFD366
  • minimap.background#102D20
  • minimapSlider.activeBackground#FFFFFF29
  • minimapSlider.background#FFFFFF14
  • minimapSlider.hoverBackground#FFFFFF1F
  • notificationCenter.border#273C32
  • notificationCenterHeader.background#133928
  • notificationCenterHeader.foreground#FFFFFF
  • notifications.background#102D20
  • notifications.border#273C32
  • notifications.foreground#FFFFFF
  • notificationsErrorIcon.foreground#EA819B
  • notificationsInfoIcon.foreground#3CCD88
  • notificationsWarningIcon.foreground#FFEB84
  • notificationToast.border#273C32
  • panel.background#102D20
  • panel.border#273C32
  • panelTitle.activeBorder#1EC677
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#A8B7B0
  • peekView.border#1EC677
  • peekViewEditor.background#133928
  • peekViewEditor.matchHighlightBackground#15734966
  • peekViewEditorGutter.background#133928
  • peekViewResult.background#102D20
  • peekViewResult.fileForeground#FFFFFF
  • peekViewResult.lineForeground#A8B7B0
  • peekViewResult.matchHighlightBackground#15734966
  • peekViewResult.selectionBackground#133928
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#0D4029
  • peekViewTitleDescription.foreground#A8B7B0
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#273C32
  • pickerGroup.foreground#1EC677
  • progressBar.background#1EC677
  • scrollbar.shadow#0000005C
  • scrollbarSlider.activeBackground#FFFFFF29
  • scrollbarSlider.background#FFFFFF14
  • scrollbarSlider.hoverBackground#FFFFFF1F
  • searchEditor.findMatchBackground#15734966
  • searchEditor.textInputBorder#273C32
  • selection.background#157349
  • settings.checkboxBackground#133928
  • settings.checkboxBorder#273C32
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownBackground#133928
  • settings.dropdownBorder#273C32
  • settings.dropdownForeground#FFFFFF
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#1EC677
  • settings.numberInputBackground#133928
  • settings.numberInputBorder#273C32
  • settings.numberInputForeground#FFFFFF
  • settings.textInputBackground#133928
  • settings.textInputBorder#273C32
  • settings.textInputForeground#FFFFFF
  • sideBar.background#102D20
  • sideBar.border#273C32
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#133928
  • sideBarSectionHeader.border#273C32
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#133928
  • statusBar.border#273C32
  • statusBar.debuggingBackground#EA819B
  • statusBar.debuggingForeground#0C1C15
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#580A1D
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.activeBackground#FFFFFF1F
  • statusBarItem.hoverBackground#FFFFFF14
  • statusBarItem.prominentBackground#1EC677
  • statusBarItem.prominentForeground#0C1C15
  • statusBarItem.prominentHoverBackground#3CCD88
  • tab.activeBackground#0C1C15
  • tab.activeBorder#1EC677
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#FFEB84
  • tab.border#273C32
  • tab.hoverBackground#133928
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#102D20
  • tab.inactiveForeground#A8B7B0
  • tab.inactiveModifiedBorder#702511
  • tab.unfocusedActiveBackground#102D20
  • tab.unfocusedActiveBorder#A8B7B0
  • tab.unfocusedActiveForeground#A8B7B0
  • tab.unfocusedActiveModifiedBorder#D68628
  • tab.unfocusedHoverBackground#FFFFFF0A
  • tab.unfocusedHoverForeground#FFFFFF
  • tab.unfocusedInactiveBackground#102D20
  • tab.unfocusedInactiveForeground#67756E
  • tab.unfocusedInactiveModifiedBorder#702511
  • terminal.ansiBlack#273C32
  • terminal.ansiBlue#8DCFD3
  • terminal.ansiBrightBlack#67756E
  • terminal.ansiBrightBlue#CFF9F6
  • terminal.ansiBrightCyan#DDF1DC
  • terminal.ansiBrightGreen#AEE3C1
  • terminal.ansiBrightMagenta#FFFAFD
  • terminal.ansiBrightRed#F7BDFE
  • terminal.ansiBrightWhite#F7F8F8
  • terminal.ansiBrightYellow#FFF9D8
  • terminal.ansiCyan#3CCD88
  • terminal.ansiGreen#1EC677
  • terminal.ansiMagenta#F7BDFE
  • terminal.ansiRed#EA819B
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFEB84
  • terminal.background#0C1C15
  • terminal.foreground#FFFFFF
  • textBlockQuote.background#133928
  • textBlockQuote.border#1EC677
  • textCodeBlock.background#133928
  • textLink.activeForeground#1EC677
  • textLink.foreground#3CCD88
  • textPreformat.foreground#A8B7B0
  • textSeparator.foreground#273C32
  • titleBar.activeBackground#0C1C15
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#273C32
  • titleBar.inactiveBackground#102D20
  • titleBar.inactiveForeground#A8B7B0
  • toolbar.activeBackground#FFFFFF1F
  • toolbar.hoverBackground#FFFFFF14
  • tree.indentGuidesStroke#273C32
  • tree.tableColumnsBorder#273C32
  • tree.tableOddRowsBackground#FFFFFF0A
  • widget.border#273C32
  • widget.shadow#0000005C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#67756Eitalic
variable, string constant.other.placeholder#FFFFFF
constant.other.color#FFFFFF
invalid, invalid.illegal#EA819B
keyword, storage.type, storage.modifier#F7BDFE
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#8DCFD3
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#EA819B
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#3CCD88
meta.block variable.other#EA819B
support.other.variable, string.other.link#EA819B
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FFEB84
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#3CCD88
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFEB84
support.type#A8B7B0
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#A8B7B0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EA819B
variable.language#EA819Bitalic
entity.name.method.js#3CCD88italic
meta.class-method.js entity.name.function.js, variable.function.constructor#3CCD88
entity.other.attribute-name#F7BDFE
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFEB84italic
entity.other.attribute-name.class#FFEB84
source.sass keyword.control#3CCD88
markup.inserted#3CCD88
markup.deleted#EA819B
markup.changed#F7BDFE
string.regexp#8DCFD3
constant.character.escape#8DCFD3
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3CCD88italic
source.js constant.other.object.key.js string.unquoted.label.js#EA819Bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#F7BDFE
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFEB84
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFEB84
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EA819B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D68628
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3CCD88
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EA819B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F7BDFE
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1EC677
text.html.markdown, punctuation.definition.list_item.markdown#FFFFFF
text.html.markdown markup.inline.raw.markdown#F7BDFE
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8DCFD3
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#1EC677
markup.italic#EA819Bitalic
markup.bold, markup.bold string#EA819Bbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#EA819Bbold
markup.underline#FFEB84underline
markup.quote punctuation.definition.blockquote.markdown#8DCFD3
markup.quoteitalic
string.other.link.title.markdown#3CCD88
string.other.link.description.title.markdown#F7BDFE
constant.other.reference.link.markdown#FFEB84
markup.raw.block#F7BDFE
markup.raw.block.fenced.markdown#FFFFFF
punctuation.definition.fenced.markdown#FFFFFF
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#FFFFFF
variable.language.fenced.markdown#8DCFD3
meta.separator#8DCFD3bold
markup.table#FFFFFF
Feels Like Progress by Philipp Comans - VS Code Theme