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#EAE2D5
  • activityBar.border#D8D0C4
  • activityBar.foreground#4A3020
  • activityBar.inactiveForeground#B0A090
  • activityBarBadge.background#C15F3C
  • activityBarBadge.foreground#F5EFE4
  • badge.background#C15F3C
  • badge.foreground#F5EFE4
  • breadcrumb.activeSelectionForeground#302820
  • breadcrumb.background#F5EFE4
  • breadcrumb.focusForeground#4A3020
  • breadcrumb.foreground#988070
  • breadcrumbPicker.background#EDE5D8
  • button.background#C15F3C
  • button.foreground#F5EFE4
  • button.hoverBackground#A84E2E
  • button.secondaryBackground#D8D0C4
  • button.secondaryForeground#3A2818
  • button.secondaryHoverBackground#C0B0A0
  • diffEditor.insertedLineBackground#2A805512
  • diffEditor.insertedTextBackground#2A805520
  • diffEditor.removedLineBackground#A8382012
  • diffEditor.removedTextBackground#A8382020
  • disabledForeground#B0A090
  • dropdown.background#F5EFE4
  • dropdown.border#C0B0A0
  • dropdown.foreground#302820
  • editor.background#F5EFE4
  • editor.findMatchBackground#7A551045
  • editor.findMatchHighlightBackground#7A551028
  • editor.foreground#302820
  • editor.inactiveSelectionBackground#96501815
  • editor.lineHighlightBackground#EDE5D8
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#96501812
  • editor.selectionBackground#96501828
  • editor.selectionHighlightBackground#96501820
  • editor.wordHighlightBackground#12608020
  • editor.wordHighlightStrongBackground#12608035
  • editorBracketHighlight.foreground1#965018
  • editorBracketHighlight.foreground2#126080
  • editorBracketHighlight.foreground3#296A42
  • editorBracketHighlight.foreground4#7A5510
  • editorBracketHighlight.unexpectedBracket.foreground#A83820
  • editorBracketMatch.background#96501825
  • editorBracketMatch.border#965018
  • editorCodeLens.foreground#988070
  • editorCursor.background#F5EFE4
  • editorCursor.foreground#965018
  • editorError.foreground#A83820
  • editorGroup.border#D8D0C4
  • editorGroupHeader.noTabsBackground#EAE2D5
  • editorGroupHeader.tabsBackground#EAE2D5
  • editorGutter.addedBackground#2A8055
  • editorGutter.background#F5EFE4
  • editorGutter.deletedBackground#A83820
  • editorGutter.modifiedBackground#965018
  • editorHint.foreground#988070
  • editorHoverWidget.background#EDE5D8
  • editorHoverWidget.border#C0B0A0
  • editorHoverWidget.foreground#302820
  • editorIndentGuide.activeBackground#C0B0A0
  • editorIndentGuide.background#D8D0C4
  • editorInfo.foreground#126080
  • editorLineNumber.activeForeground#806050
  • editorLineNumber.foreground#C0B0A0
  • editorRuler.foreground#D8D0C4
  • editorSuggestWidget.background#F0E8DC
  • editorSuggestWidget.border#C0B0A0
  • editorSuggestWidget.foreground#302820
  • editorSuggestWidget.highlightForeground#965018
  • editorSuggestWidget.selectedBackground#E0D8CC
  • editorWarning.foreground#8A5510
  • editorWhitespace.foreground#D0C8BA
  • editorWidget.background#EDE5D8
  • editorWidget.border#C0B0A0
  • editorWidget.foreground#302820
  • focusBorder#96501855
  • foreground#302820
  • gitDecoration.addedResourceForeground#2A8055
  • gitDecoration.conflictingResourceForeground#6A3868
  • gitDecoration.deletedResourceForeground#A83820
  • gitDecoration.ignoredResourceForeground#B0A090
  • gitDecoration.modifiedResourceForeground#8A5510
  • gitDecoration.untrackedResourceForeground#2A8055
  • icon.foreground#4A3020
  • input.background#F5EFE4
  • input.border#C0B0A0
  • input.foreground#302820
  • input.placeholderForeground#B0A090
  • inputOption.activeBackground#96501818
  • inputOption.activeBorder#965018
  • inputOption.activeForeground#965018
  • inputValidation.errorBackground#A8382018
  • inputValidation.errorBorder#A83820
  • inputValidation.infoBackground#12608018
  • inputValidation.infoBorder#126080
  • inputValidation.warningBackground#8A551018
  • inputValidation.warningBorder#8A5510
  • list.activeSelectionBackground#D8D0C4
  • list.activeSelectionForeground#302820
  • list.errorForeground#A83820
  • list.focusBackground#D8D0C4
  • list.focusForeground#302820
  • list.highlightForeground#965018
  • list.hoverBackground#E8E0D4
  • list.hoverForeground#302820
  • list.inactiveSelectionBackground#E8E0D4
  • list.inactiveSelectionForeground#3A2818
  • list.warningForeground#8A5510
  • menu.background#F5EFE4
  • menu.foreground#302820
  • menu.selectionBackground#D8D0C4
  • menu.selectionForeground#302820
  • menu.separatorBackground#D0C8BA
  • menubar.selectionBackground#D8D0C4
  • menubar.selectionForeground#302820
  • notificationLink.foreground#965018
  • notifications.background#F5EFE4
  • notifications.border#C0B0A0
  • notifications.foreground#302820
  • panel.background#EDE5D8
  • panel.border#D8D0C4
  • panelTitle.activeBorder#965018
  • panelTitle.activeForeground#965018
  • panelTitle.inactiveForeground#988070
  • peekView.border#965018
  • peekViewEditor.background#F5EFE4
  • peekViewEditorGutter.background#EDE5D8
  • peekViewResult.background#EDE5D8
  • peekViewResult.fileForeground#4A3020
  • peekViewResult.lineForeground#988070
  • peekViewResult.matchHighlightBackground#96501825
  • peekViewResult.selectionBackground#D8D0C4
  • peekViewResult.selectionForeground#302820
  • peekViewTitle.background#E8E0D4
  • peekViewTitleDescription.foreground#988070
  • peekViewTitleLabel.foreground#965018
  • quickInput.background#F5EFE4
  • quickInput.foreground#302820
  • quickInputList.focusBackground#D8D0C4
  • quickInputList.focusForeground#302820
  • quickInputTitle.background#E8E0D4
  • sash.hoverBorder#965018
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#988070A0
  • scrollbarSlider.background#C0B0A050
  • scrollbarSlider.hoverBackground#B0A09075
  • selection.background#96501825
  • separator.background#D8D0C4
  • settings.headerForeground#4A3020
  • settings.modifiedItemIndicator#965018
  • sideBar.background#EDE5D8
  • sideBar.border#D8D0C4
  • sideBar.foreground#3A2818
  • sideBarSectionHeader.background#E4DCD0
  • sideBarSectionHeader.border#D8D0C4
  • sideBarSectionHeader.foreground#988070
  • sideBarTitle.foreground#806050
  • statusBar.background#C15F3C
  • statusBar.border#A84E2E
  • statusBar.debuggingBackground#2A8055
  • statusBar.debuggingForeground#F5EFE4
  • statusBar.foreground#F5EFE4
  • statusBar.noFolderBackground#D8D0C4
  • statusBar.noFolderForeground#4A3020
  • statusBarItem.activeBackground#A84E2E
  • statusBarItem.hoverBackground#A84E2E80
  • tab.activeBackground#F5EFE4
  • tab.activeBorder#965018
  • tab.activeBorderTop#00000000
  • tab.activeForeground#302820
  • tab.border#D8D0C4
  • tab.hoverBackground#E8E0D4
  • tab.hoverForeground#3A2818
  • tab.inactiveBackground#EDE5D8
  • tab.inactiveForeground#988070
  • tab.unfocusedActiveForeground#806050
  • tab.unfocusedInactiveForeground#B0A090
  • terminal.ansiBlack#302820
  • terminal.ansiBlue#126080
  • terminal.ansiBrightBlack#806050
  • terminal.ansiBrightBlue#227090
  • terminal.ansiBrightCyan#2A8080
  • terminal.ansiBrightGreen#3A9065
  • terminal.ansiBrightMagenta#7A4878
  • terminal.ansiBrightRed#B84830
  • terminal.ansiBrightWhite#302820
  • terminal.ansiBrightYellow#9A6520
  • terminal.ansiCyan#1A7070
  • terminal.ansiGreen#2A8055
  • terminal.ansiMagenta#6A3868
  • terminal.ansiRed#A83820
  • terminal.ansiWhite#806050
  • terminal.ansiYellow#8A5510
  • terminal.background#EAE2D5
  • terminal.foreground#302820
  • terminal.selectionBackground#96501825
  • terminalCursor.foreground#965018
  • titleBar.activeBackground#EAE2D5
  • titleBar.activeForeground#3A2818
  • titleBar.border#D8D0C4
  • titleBar.inactiveBackground#EDE5D8
  • titleBar.inactiveForeground#988070
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text.html, text#302820
comment, punctuation.definition.comment, string.quoted.docstring#988070italic
keyword.codetag.notation, comment.todo, comment.fixme#8A5510bold italic
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.from, keyword.other#965018italic
storage.type, storage.modifier, keyword.declaration#965018italic
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.in, keyword.operator.of#7A3C10italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.bitwise#7A4418
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.none#965018italic
constant.numeric#7A5510
constant.character, constant.character.escape, constant.other.placeholder#6A3868
constant.other, support.constant#7A5510
string, string.quoted#296A42
string.template, string.interpolated, string.quoted.template#1E5C38
punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#7A5510
punctuation.definition.string.begin, punctuation.definition.string.end#3A7A52
string.regexp, constant.regexp#6A3868
entity.name.function, meta.definition.method entity.name.function#126080
meta.function-call.generic, meta.method-call entity.name.function#126080
support.function, support.function.builtin#126080italic
entity.name.class, entity.name.type, entity.name.type.class#7A4220
entity.other.inherited-class#7A4220italic
entity.name.interface, entity.name.enum#8A5230italic
support.type, support.type.primitive, meta.type.annotation, meta.type.parameters#8A5A30
variable.other.enummember#7A5510
variable, variable.other.readwrite, variable.other.local#2E2418
variable.parameter#604028italic
variable.other.property, variable.other.object.property, support.variable.property#7A4220
variable.language.this, variable.language.self, variable.language.super, variable.language.special.self.python, variable.language.special.cls.python#965018italic
punctuation.separator, punctuation.terminator, punctuation.accessor#988070
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, meta.brace#786050
meta.decorator, entity.name.function.decorator, support.type.decorator, punctuation.decorator#965018italic
entity.name.function.decorator.python, meta.function.decorator.python#965018italic
support.function.magic.python#126080italic
support.type.python#7A4220
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx#965018
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx#7A4220
support.type.property-name.css, support.type.property-name.scss, meta.property-name#126080
meta.property-value, support.constant.property-value#296A42
entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#7A5510
constant.other.color.rgb-value, keyword.other.unit#7A5510
support.type.property-name.json#126080
string.quoted.double.json#296A42
constant.language.json#965018
entity.name.tag.yaml#126080
string.unquoted.yaml, string.quoted.single.yaml, string.quoted.double.yaml#296A42
markup.heading, entity.name.section.markdown#965018bold
markup.bold#302820bold
markup.italic#7A4220italic
markup.inline.raw, markup.raw.inline#296A42
markup.underline.link, string.other.link#126080
markup.quote#988070italic
punctuation.definition.list_item.markdown#965018
markup.inserted#2A8055
markup.deleted#A83820
markup.changed#8A5510
invalid, invalid.illegal#A83820underline
invalid.deprecated#988070strikethrough