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#1a1512
  • activityBar.border#2f2419
  • activityBar.foreground#d4b89c
  • activityBar.inactiveForeground#7a6854
  • activityBarBadge.background#d9a566
  • activityBarBadge.foreground#1a1512
  • badge.background#d9a566
  • badge.foreground#1a1512
  • breadcrumb.activeSelectionForeground#e8c499
  • breadcrumb.focusForeground#d4b89c
  • breadcrumb.foreground#a89075
  • breadcrumbPicker.background#1f1710
  • button.background#d9a566
  • button.foreground#1a1512
  • button.hoverBackground#e6b673
  • debugExceptionWidget.background#1f1710
  • debugExceptionWidget.border#3d2f1f
  • diffEditor.insertedTextBackground#a7c08020
  • diffEditor.removedTextBackground#e67e8020
  • dropdown.background#1f1710
  • dropdown.border#3d2f1f
  • dropdown.foreground#d4b89c
  • editor.background#1a1512
  • editor.findMatchBackground#5a4226
  • editor.findMatchHighlightBackground#4a352080
  • editor.foreground#d4b89c
  • editor.hoverHighlightBackground#3d2f1f
  • editor.lineHighlightBackground#221a13
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#2f241980
  • editor.selectionBackground#3d2f1f
  • editor.selectionHighlightBackground#2f2419
  • editor.wordHighlightBackground#3d2f1f80
  • editor.wordHighlightStrongBackground#4a3623
  • editorBracketMatch.background#3d2f1f
  • editorBracketMatch.border#d9a566
  • editorCodeLens.foreground#7a6854
  • editorCursor.foreground#e8c499
  • editorError.foreground#e67e80
  • editorGroup.border#2f2419
  • editorGroup.dropBackground#3d2f1f80
  • editorGroupHeader.noTabsBackground#1a1512
  • editorGroupHeader.tabsBackground#1f1710
  • editorGroupHeader.tabsBorder#2f2419
  • editorGutter.addedBackground#a7c080
  • editorGutter.background#1a1512
  • editorGutter.deletedBackground#e67e80
  • editorGutter.modifiedBackground#e6b673
  • editorHint.foreground#a89075
  • editorHoverWidget.background#1f1710
  • editorHoverWidget.border#3d2f1f
  • editorIndentGuide.activeBackground#4a3623
  • editorIndentGuide.background#2f2419
  • editorInfo.foreground#c9a678
  • editorLineNumber.activeForeground#c9a678
  • editorLineNumber.foreground#7a6854
  • editorLink.activeForeground#d9a566
  • editorMarkerNavigation.background#1f1710
  • editorOverviewRuler.border#2f2419
  • editorRuler.foreground#2f2419
  • editorSuggestWidget.background#1f1710
  • editorSuggestWidget.border#3d2f1f
  • editorSuggestWidget.foreground#d4b89c
  • editorSuggestWidget.highlightForeground#e8c499
  • editorSuggestWidget.selectedBackground#3d2f1f
  • editorWarning.foreground#e6b673
  • editorWhitespace.foreground#3d2f1f
  • editorWidget.background#1f1710
  • editorWidget.border#3d2f1f
  • extensionButton.prominentBackground#d9a566
  • extensionButton.prominentForeground#1a1512
  • extensionButton.prominentHoverBackground#e6b673
  • gitDecoration.conflictingResourceForeground#d69999
  • gitDecoration.deletedResourceForeground#e67e80
  • gitDecoration.ignoredResourceForeground#7a6854
  • gitDecoration.modifiedResourceForeground#e6b673
  • gitDecoration.untrackedResourceForeground#a7c080
  • input.background#1f1710
  • input.border#3d2f1f
  • input.foreground#d4b89c
  • input.placeholderForeground#7a6854
  • inputOption.activeBorder#d9a566
  • inputValidation.errorBackground#1f1710
  • inputValidation.errorBorder#e67e80
  • inputValidation.infoBackground#1f1710
  • inputValidation.infoBorder#c9a678
  • inputValidation.warningBackground#1f1710
  • inputValidation.warningBorder#e6b673
  • list.activeSelectionBackground#3d2f1f
  • list.activeSelectionForeground#e8c499
  • list.dropBackground#3d2f1f
  • list.errorForeground#e67e80
  • list.focusBackground#3d2f1f
  • list.focusForeground#e8c499
  • list.highlightForeground#e8c499
  • list.hoverBackground#2f2419
  • list.hoverForeground#d4b89c
  • list.inactiveSelectionBackground#2f2419
  • list.inactiveSelectionForeground#d4b89c
  • list.warningForeground#e6b673
  • menu.background#1f1710
  • menu.foreground#d4b89c
  • menu.selectionBackground#3d2f1f
  • menu.selectionForeground#e8c499
  • menu.separatorBackground#3d2f1f
  • menubar.selectionBackground#2f2419
  • menubar.selectionForeground#e8c499
  • merge.currentContentBackground#a7c08020
  • merge.currentHeaderBackground#a7c08040
  • merge.incomingContentBackground#e6b67320
  • merge.incomingHeaderBackground#e6b67340
  • notificationCenter.border#3d2f1f
  • notificationCenterHeader.background#2f2419
  • notificationLink.foreground#d9a566
  • notifications.background#1f1710
  • notifications.border#3d2f1f
  • notificationsErrorIcon.foreground#e67e80
  • notificationsInfoIcon.foreground#c9a678
  • notificationsWarningIcon.foreground#e6b673
  • panel.background#1a1512
  • panel.border#2f2419
  • panelTitle.activeBorder#d9a566
  • panelTitle.activeForeground#e8c499
  • panelTitle.inactiveForeground#a89075
  • peekView.border#5a4226
  • peekViewEditor.background#1a1512
  • peekViewEditor.matchHighlightBackground#5a422680
  • peekViewResult.background#1f1710
  • peekViewResult.fileForeground#d4b89c
  • peekViewResult.lineForeground#c9a678
  • peekViewResult.matchHighlightBackground#5a422680
  • peekViewResult.selectionBackground#3d2f1f
  • peekViewResult.selectionForeground#e8c499
  • peekViewTitle.background#2f2419
  • peekViewTitleDescription.foreground#a89075
  • peekViewTitleLabel.foreground#e8c499
  • pickerGroup.border#3d2f1f
  • pickerGroup.foreground#d9a566
  • progressBar.background#d9a566
  • quickInput.background#1f1710
  • quickInput.foreground#d4b89c
  • quickInputTitle.background#2f2419
  • scrollbar.shadow#0000004d
  • scrollbarSlider.activeBackground#6a5230b0
  • scrollbarSlider.background#4a362380
  • scrollbarSlider.hoverBackground#5a4226a0
  • settings.checkboxBackground#1f1710
  • settings.checkboxBorder#3d2f1f
  • settings.dropdownBackground#1f1710
  • settings.dropdownBorder#3d2f1f
  • settings.headerForeground#e8c499
  • settings.modifiedItemIndicator#d9a566
  • settings.numberInputBackground#1f1710
  • settings.numberInputBorder#3d2f1f
  • settings.textInputBackground#1f1710
  • settings.textInputBorder#3d2f1f
  • sideBar.background#1a1512
  • sideBar.border#2f2419
  • sideBar.foreground#c9a678
  • sideBarSectionHeader.background#1f1710
  • sideBarSectionHeader.border#2f2419
  • sideBarSectionHeader.foreground#d4b89c
  • sideBarTitle.foreground#e8c499
  • statusBar.background#1f1710
  • statusBar.border#2f2419
  • statusBar.debuggingBackground#e67e80
  • statusBar.debuggingForeground#1a1512
  • statusBar.foreground#c9a678
  • statusBar.noFolderBackground#1f1710
  • statusBarItem.activeBackground#3d2f1f
  • statusBarItem.hoverBackground#2f2419
  • statusBarItem.prominentBackground#4a3623
  • statusBarItem.prominentHoverBackground#5a4226
  • tab.activeBackground#1a1512
  • tab.activeBorder#d9a566
  • tab.activeForeground#e8c499
  • tab.border#2f2419
  • tab.inactiveBackground#1f1710
  • tab.inactiveForeground#a89075
  • tab.unfocusedActiveBorder#7a6854
  • tab.unfocusedActiveForeground#c9a678
  • tab.unfocusedInactiveForeground#7a6854
  • terminal.ansiBlack#1a1512
  • terminal.ansiBlue#d9a566
  • terminal.ansiBrightBlack#4a3623
  • terminal.ansiBrightBlue#e8b380
  • terminal.ansiBrightCyan#d9b890
  • terminal.ansiBrightGreen#b5ce8f
  • terminal.ansiBrightMagenta#e5a8a8
  • terminal.ansiBrightRed#ec8e8e
  • terminal.ansiBrightWhite#e8c499
  • terminal.ansiBrightYellow#f0c486
  • terminal.ansiCyan#c9a678
  • terminal.ansiGreen#a7c080
  • terminal.ansiMagenta#d69999
  • terminal.ansiRed#e67e80
  • terminal.ansiWhite#d4b89c
  • terminal.ansiYellow#e6b673
  • terminal.background#1a1512
  • terminal.foreground#d4b89c
  • titleBar.activeBackground#1a1512
  • titleBar.activeForeground#d4b89c
  • titleBar.border#2f2419
  • titleBar.inactiveBackground#1a1512
  • titleBar.inactiveForeground#7a6854
  • tree.indentGuidesStroke#3d2f1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a6854italic
variable, string constant.other.placeholder#d4b89c
constant.other.color#e6b673
invalid, invalid.illegal#e67e80
invalid.deprecated#d69999
keyword, storage.type, storage.modifier#e67e80
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#d9a566
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e67e80
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#e6b673
meta.block variable.other#d4b89c
support.other.variable, string.other.link#e67e80
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#d69999
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#a7c080
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#e6b673
support.type#c9a678
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e67e80
variable.language#e67e80italic
entity.name.method.js#e6b673
meta.class-method.js entity.name.function.js, variable.function.constructor#e6b673
entity.other.attribute-name#d9a566
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e6b673italic
entity.other.attribute-name.class#e6b673
source.sass keyword.control#e6b673
markup.inserted#a7c080
markup.deleted#e67e80
markup.changed#d9a566
string.regexp#d9a566
constant.character.escape#d9a566
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#e6b673italic
source.js constant.other.object.key.js string.unquoted.label.js#e6b673italic
source.json meta.structure.dictionary.json support.type.property-name.json#e67e80
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d9a566
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#e6b673
text.html.markdown, punctuation.definition.list_item.markdown#d4b89c
text.html.markdown markup.inline.raw.markdown#d9a566
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#a89075
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#a7c080bold
markup.italic#e67e80italic
markup.bold#e67e80bold
markup.bold markup.italic, markup.italic markup.bold#e67e80bold italic
markup.underline#d69999underline
markup.quote punctuation.definition.blockquote.markdown#a89075
markup.quote#7a6854italic
string.other.link.title.markdown#e6b673
string.other.link.description.title.markdown#d9a566
constant.other.reference.link.markdown#e6b673
markup.raw.block#d9a566
markup.raw.block.fenced.markdown#a89075
punctuation.definition.fenced.markdown#a89075
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d4b89c
variable.language.fenced.markdown#a89075
meta.separator#7a6854bold
markup.table#d4b89c
Blue Light Filter - Eye Care Theme by Saksham Yadav - VS Code Theme