Skip to main content
Coding Theme

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#F0E8D6
  • activityBar.border#E6DABC
  • activityBar.foreground#8F5208
  • activityBar.inactiveForeground#C6B180
  • activityBarBadge.background#8F5208
  • activityBarBadge.foreground#F0E8D6
  • badge.background#8F5208
  • badge.foreground#F0E8D6
  • breadcrumb.focusForeground#2F261E
  • breadcrumb.foreground#8C735A
  • button.background#8F5208
  • button.foreground#F0E8D6
  • button.hoverBackground#5F3605
  • diffEditor.insertedTextBackground#1F7A4A1A
  • diffEditor.removedTextBackground#B030281A
  • dropdown.background#F0E8D6
  • dropdown.border#E6DABC
  • dropdown.foreground#2F261E
  • editor.background#F8F5EC
  • editor.foreground#2F261E
  • editor.lineHighlightBackground#F4EEE199
  • editor.selectionBackground#E6DABC99
  • editor.selectionHighlightBackground#E6DABC66
  • editor.wordHighlightBackground#E6DABC66
  • editorBracketMatch.background#E6DABC
  • editorBracketMatch.border#8F5208
  • editorCursor.foreground#8F5208
  • editorError.foreground#B03028
  • editorGroupHeader.tabsBackground#F4EEE1
  • editorGroupHeader.tabsBorder#E6DABC
  • editorHoverWidget.background#F4EEE1
  • editorHoverWidget.border#E6DABC
  • editorIndentGuide.activeBackground1#DFD4B9
  • editorIndentGuide.background1#F1EADA
  • editorInfo.foreground#1F5FA8
  • editorLineNumber.activeForeground#8F5208
  • editorLineNumber.foreground#D3C29C
  • editorRuler.foreground#F1EADA
  • editorSuggestWidget.background#F4EEE1
  • editorSuggestWidget.selectedBackground#E6DABC
  • editorWarning.foreground#9A4E10
  • editorWhitespace.foreground#EDE4CF
  • editorWidget.background#F4EEE1
  • editorWidget.border#E6DABC
  • focusBorder#D3C29C
  • foreground#544536
  • gitDecoration.addedResourceForeground#1F7A4A
  • gitDecoration.deletedResourceForeground#B03028
  • gitDecoration.ignoredResourceForeground#C6B180
  • gitDecoration.modifiedResourceForeground#9A4E10
  • gitDecoration.untrackedResourceForeground#1F7A4A
  • input.background#F0E8D6
  • input.border#E6DABC
  • input.foreground#2F261E
  • inputOption.activeBorder#8F5208
  • list.activeSelectionBackground#E6DABC
  • list.activeSelectionForeground#2F261E
  • list.highlightForeground#8F5208
  • list.hoverBackground#F1EADA
  • list.inactiveSelectionBackground#F1EADA
  • menu.background#F4EEE1
  • menu.foreground#2F261E
  • menubar.selectionBackground#E6DABC
  • minimap.background#F8F5EC
  • notifications.background#F4EEE1
  • notifications.border#E6DABC
  • panel.background#F4EEE1
  • panel.border#E6DABC
  • panelTitle.activeForeground#2F261E
  • panelTitle.inactiveForeground#8C735A
  • peekView.border#8F5208
  • peekViewEditor.background#F0E8D6
  • peekViewResult.background#F4EEE1
  • scrollbarSlider.activeBackground#D3C29CCC
  • scrollbarSlider.background#E6DABC99
  • scrollbarSlider.hoverBackground#DFD4B9CC
  • selection.background#E6DABC
  • sideBar.background#F4EEE1
  • sideBar.border#E6DABC
  • sideBar.foreground#544536
  • sideBarSectionHeader.background#F0E8D6
  • sideBarSectionHeader.foreground#544536
  • sideBarTitle.foreground#8C735A
  • statusBar.background#F0E8D6
  • statusBar.border#E6DABC
  • statusBar.debuggingBackground#9A4E10
  • statusBar.debuggingForeground#F0E8D6
  • statusBar.foreground#544536
  • statusBar.noFolderBackground#F0E8D6
  • tab.activeBackground#F8F5EC
  • tab.activeBorderTop#8F5208
  • tab.activeForeground#2F261E
  • tab.border#E6DABC
  • tab.inactiveBackground#F4EEE1
  • tab.inactiveForeground#8C735A
  • terminal.ansiBlack#F1EADA
  • terminal.ansiBlue#1F5FA8
  • terminal.ansiBrightBlack#C6B180
  • terminal.ansiBrightBlue#17477D
  • terminal.ansiBrightCyan#0F4442
  • terminal.ansiBrightGreen#155131
  • terminal.ansiBrightMagenta#662B59
  • terminal.ansiBrightRed#86251F
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#5F3605
  • terminal.ansiCyan#186E6A
  • terminal.ansiGreen#1F7A4A
  • terminal.ansiMagenta#8A3A78
  • terminal.ansiRed#B03028
  • terminal.ansiWhite#2F261E
  • terminal.ansiYellow#8F5208
  • terminal.background#F0E8D6
  • terminal.foreground#544536
  • titleBar.activeBackground#F0E8D6
  • titleBar.activeForeground#2F261E
  • titleBar.border#E6DABC
  • titleBar.inactiveBackground#F0E8D6
  • titleBar.inactiveForeground#8C735A
  • widget.shadow#FFFFFF4D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0856Aitalic
string, string.quoted, punctuation.definition.string#1F7A4A
string.regexp#186E6A
constant.numeric, constant.language, keyword.other.unit#9A4E10
constant.character.escape#8A3A78
variable, variable.other.readwrite, meta.definition.variable.name#2F261E
variable.parameter#544536
variable.language, variable.other.constant#8A3A78
keyword, keyword.control, storage, storage.type, storage.modifier#8F5208bold
keyword.operator#675442
entity.name.function, support.function, meta.function-call#1F5FA8
entity.name.class, entity.name.type, support.class, support.type#7A5A18
entity.name.tag#8F5208
entity.other.attribute-name#1F7A4A
support.constant, support.variable#8A3A78
punctuation, meta.brace#7C6650
markup.heading#8F5208bold
markup.bold#2F261Ebold
markup.italic#2F261Eitalic
markup.inline.raw, markup.raw#1F7A4A
markup.underline.link#1F5FA8underline
invalid, invalid.illegal#B03028
meta.diff.header, meta.diff.range#1F5FA8
markup.inserted#1F7A4A
markup.deleted#B03028
support.type.property-name.json, support.type.property-name#8F5208