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#F0E2C5
  • activityBar.foreground#3C2C21
  • activityBar.inactiveForeground#A3917A
  • activityBarBadge.background#6B4A3E
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#3C2C21
  • breadcrumb.focusForeground#3C2C21
  • breadcrumb.foreground#7A6A56
  • breadcrumb.separatorForeground#A3917A
  • button.background#6B4A3E
  • button.border#6B4A3E
  • button.foreground#F5F1E6
  • dropdown.background#D3B88C
  • dropdown.border#C7A884
  • dropdown.foreground#3C2C21
  • editor.background#FAF6EF
  • editor.findMatchHighlightBackground#A1733B55
  • editor.findRangeHighlightBackground#EAD4BD88
  • editor.foreground#3C2C21
  • editor.lineHighlightBackground#EFE3D4
  • editor.selectionBackground#DCC2A2
  • editor.selectionForeground#3C2C21
  • editor.selectionHighlightBackground#DCC2A255
  • editorBracketHighlight.foreground1#C77C2E
  • editorBracketHighlight.foreground2#A1733B
  • editorBracketHighlight.foreground3#AA7B47
  • editorBracketHighlight.foreground4#BA9AB6
  • editorBracketHighlight.foreground5#AB7F8C
  • editorBracketHighlight.foreground6#BFA89C
  • editorBracketMatch.background#DCC2A2
  • editorBracketMatch.border#6B4A3E
  • editorCodeLens.foreground#A3917A
  • editorCursor.foreground#6B4A3E
  • editorError.foreground#A3312C
  • editorGroup.border#D3B88C
  • editorGroup.dropBackground#A1733B22
  • editorGroup.dropIntoPromptBackground#F0E2C5
  • editorGroup.dropIntoPromptForeground#3C2C21
  • editorGroupHeader.tabsBackground#FAF6EF
  • editorGutter.background#FAF6EF
  • editorHoverWidget.background#F0E2C5
  • editorHoverWidget.border#C7A884
  • editorHoverWidget.foreground#3C2C21
  • editorHoverWidget.highlightForeground#6B4A3E
  • editorIndentGuide.background#E2D2C0
  • editorInfo.foreground#3A6EA5
  • editorInlayHint.background#EFE3D4
  • editorInlayHint.foreground#7A6A56
  • editorLightBulb.foreground#D08928
  • editorLightBulbAutoFix.foreground#4F764D
  • editorLineNumber.activeForeground#3C2C21
  • editorLink.activeForeground#3A6EA5
  • editorOverviewRuler.border#D3B88C
  • editorOverviewRuler.bracketMatchForeground#6B4A3E88
  • editorOverviewRuler.errorForeground#A3312C88
  • editorOverviewRuler.findMatchForeground#A1733B55
  • editorOverviewRuler.infoForeground#3A6EA588
  • editorOverviewRuler.warningForeground#C77C2E88
  • editorOverviewRuler.wordHighlightForeground#DCC2A288
  • editorOverviewRuler.wordHighlightStrongForeground#DCC2A299
  • editorRuler.foreground#E2D2C0
  • editorStickyScroll.background#FAF6EF
  • editorStickyScrollHover.background#EFE3D4
  • editorSuggestWidget.background#F0E2C5
  • editorSuggestWidget.foreground#3C2C21
  • editorSuggestWidget.highlightForeground#6B4A3E
  • editorSuggestWidget.selectedBackground#EAD4BD
  • editorSymbolHighlightBackground#DCC2A244
  • editorUnicodeHighlight.background#FADDDC88
  • editorUnicodeHighlight.border#A3312C
  • editorWarning.foreground#C77C2E
  • editorWhitespace.foreground#C2B4A3
  • editorWidget.background#F0E2C5
  • editorWidget.foreground#3C2C21
  • focusBorder#6B4A3E
  • input.background#D3B88C
  • input.border#C7A884
  • input.foreground#3C2C21
  • input.placeholderForeground#7A6A56
  • inputOption.activeBackground#DCC2A2
  • inputOption.activeBorder#6B4A3E
  • inputOption.activeForeground#3C2C21
  • list.activeSelectionBackground#DCC2A2
  • list.activeSelectionForeground#3C2C21
  • list.hoverBackground#EAD4BD
  • list.hoverForeground#3C2C21
  • list.inactiveSelectionBackground#EFE3D4
  • list.inactiveSelectionForeground#3C2C21
  • minimap.background#FAF6EF
  • minimap.errorHighlight#A3312C44
  • minimap.findMatchHighlight#A1733B33
  • minimap.selectionHighlight#DCC2A222
  • minimap.warningHighlight#C77C2E44
  • panel.background#FAF6EF
  • panel.border#C7A884
  • panelInput.border#C7A884
  • panelTitle.activeBorder#6B4A3E
  • panelTitle.activeForeground#6B4A3E
  • panelTitle.hoverForeground#3C2C21
  • peekViewEditor.background#FAF6EF
  • peekViewResult.background#F0E2C5
  • peekViewTitle.background#F0E2C5
  • scrollbarSlider.activeBackground#6B4A3E
  • scrollbarSlider.background#C7A884AA
  • scrollbarSlider.hoverBackground#6B4A3ECC
  • settings.dropdownBorder#C7A884
  • settings.textInputBorder#C7A884
  • sideBar.background#F0E2C5
  • sideBar.border#C7A884
  • sideBar.foreground#3C2C21
  • sideBarSectionHeader.foreground#795C2F
  • sideBarTitle.foreground#795C2F
  • statusBar.background#D3B88C
  • statusBar.debuggingBackground#A3312C
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.noFolderBackground#D3B88C
  • tab.activeBackground#FAF6EF
  • tab.activeForeground#3C2C21
  • tab.border#FAF6EF
  • tab.hoverBackground#EFE3D4
  • tab.inactiveBackground#E5D3AD
  • tab.inactiveForeground#A3917A
  • tab.unfocusedActiveForeground#7A6A56
  • tab.unfocusedHoverBackground#EAD4BD
  • tab.unfocusedInactiveForeground#BDA68F
  • terminal.ansiBlack#C2B4A3
  • terminal.ansiBlue#3A6EA5
  • terminal.ansiBrightBlack#BDA68F
  • terminal.ansiBrightBlue#739FCB
  • terminal.ansiBrightCyan#A1733B
  • terminal.ansiBrightGreen#6C9C6C
  • terminal.ansiBrightMagenta#D2A3E0
  • terminal.ansiBrightRed#D94C4C
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#E4A64F
  • terminal.ansiCyan#6B4A3E
  • terminal.ansiGreen#4F764D
  • terminal.ansiMagenta#B07CBF
  • terminal.ansiRed#A3312C
  • terminal.ansiWhite#3C2C21
  • terminal.ansiYellow#C77C2E
  • terminal.background#FAF6EF
  • terminal.foreground#3C2C21
  • terminalCursor.foreground#6B4A3E
  • titleBar.activeBackground#F0E2C5
  • titleBar.activeForeground#3C2C21
  • titleBar.border#D3B88C
  • titleBar.inactiveBackground#F0E2C5
  • titleBar.inactiveForeground#7A6A56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.import, meta.import.ts, meta.import.js#3A6EA5
meta.jsx.children#4F764D
entity.other.attribute-name.jsx, meta.tag.attributes#A1733B
storage.type.function.arrow#6B4A3E
meta.brace.round, meta.brace.square, meta.brace.curly#C7A884
keyword.control.flow#A3312Cbold
meta.decorator, meta.decorator punctuation, entity.name.function.decorator#C77C2E
meta.enum#A1733B
meta.return-type#3A6EA5
meta.arrow#6B4A3E
markup.inserted#4F764Ditalic
markup.deleted#A3312Citalic
markup.inline.raw#C77C2Eitalic
markup.underline#3A6EA5underline
markup.strikethrough#A3312Cstrikethrough
constant.character.escape#6B4A3Ebold
meta.annotation#936E38
meta.type.annotation, meta.type#B07CBF
keyword.other.unit#C77C2E
meta.structure.dictionary.json string.quoted.double.json, support.type.property-name.json#A1733B
comment, punctuation.definition.comment#A24E20bold italic
string, constant.other.symbol#4F764D
constant.numeric#C77C2Ebold
constant.language.boolean, constant.language#3A6EA5bold
keyword, storage.type, storage.modifier#795C2F
keyword.operator#A1733B
variable, identifier#3C2C21
entity.name.function, support.function, meta.function-call#6B4A3E
variable.parameter#B07CBF
entity.name.type, support.type, entity.name.class, entity.other.inherited-class#F79CA7
support.constant, constant.other#4F764D
punctuation, punctuation.definition.parameters#3C2C21
invalid, invalid.illegal#FFFFFF
markup.heading#D08928bold
markup.list#936E38
markup.bold#6B4A3Ebold
markup.italic, markup.quote#7A6A56italic