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.activeBackground#BFB5AC
  • activityBar.activeFocusBorder#474440
  • activityBar.background#fff3e6
  • activityBar.border#474440
  • activityBar.dropBorder#474440
  • activityBar.foreground#474440
  • activityBar.inactiveForeground#BFB5AC
  • activityBarBadge.background#736D67
  • badge.background#BFB5AC
  • badge.foreground#474440
  • banner.background#E6DACF
  • banner.foreground#474440
  • banner.iconForeground#444444
  • breadcrumb.activeSelectionForeground#474440
  • breadcrumb.background#E6DACF
  • breadcrumb.foreground#444444
  • button.background#E6DACF
  • button.border#FFD7A6
  • button.foreground#474440
  • button.secondaryForeground#474440
  • charts.foreground#474440
  • checkbox.background#fff6ec
  • debugToolBar.background#E6DACF
  • editor.background#fff3e6
  • editor.findMatchBackground#ffad66
  • editor.findMatchHighlightBackground#fccc9491
  • editor.findRangeHighlightBackground#BF3D34
  • editor.foreground#474440
  • editor.hoverHighlightBackground#ffc277
  • editor.lineHighlightBackground#FFE7C4
  • editor.selectionBackground#fcb15598
  • editor.wordHighlightBackground#f7686048
  • editorBracketMatch.background#60f79abd
  • editorGroupHeader.tabsBackground#fff3e6
  • editorHoverWidget.background#fff3e6
  • editorHoverWidget.foreground#474440
  • editorPane.background#BF3D34
  • editorWidget.background#F2E7DA
  • editorWidget.border#474440
  • editorWidget.foreground#474440
  • editorWidget.resizeBorder#474440
  • focusBorder#E37500
  • foreground#474440
  • gitlens.trailingLineBackgroundColor#FFD7A6
  • gitlens.trailingLineForegroundColor#474440
  • icon.foreground#474440
  • input.background#fff6ec
  • input.border#474440
  • input.foreground#474440
  • inputOption.activeBackground#474440
  • inputOption.activeForeground#fff6ec
  • list.activeSelectionBackground#A89F97
  • list.activeSelectionForeground#fff6ec
  • list.activeSelectionIconForeground#474440
  • list.dropBackground#FFD7A6
  • list.filterMatchBorder#474440
  • list.focusHighlightForeground#474440
  • list.focusOutline#474440
  • list.hoverBackground#948D85
  • list.hoverForeground#fff6ec
  • list.inactiveSelectionBackground#fff6ec
  • menu.background#E6DACF
  • menu.foreground#474440
  • menubar.selectionBackground#E37500
  • merge.incomingContentBackground#FFD7A6
  • merge.incomingHeaderBackground#FF9942
  • minimap.background#fff3e6
  • minimap.errorHighlight#BF3D34
  • minimap.findMatchHighlight#E37500
  • notifications.background#F2E7DA
  • notifications.foreground#474440
  • panel.background#F2E7DA
  • panel.border#474440
  • panelSection.border#474440
  • panelTitle.activeBorder#474440
  • panelTitle.activeForeground#474440
  • panelTitle.inactiveForeground#BFB5AC
  • progressBar.background#BFB5AC
  • quickInput.background#fff3e6
  • scrollbarSlider.activeBackground#474440
  • scrollbarSlider.background#807A73
  • searchEditor.findMatchBackground#BFB5AC
  • searchEditor.findMatchBorder#474440
  • searchEditor.textInputBorder#474440
  • selection.background#FF9942
  • sideBar.background#F2E7DA
  • sideBar.border#474440
  • sideBar.dropBackground#474440
  • sideBar.foreground#474440
  • sideBarSectionHeader.background#BFB5AC
  • sideBarSectionHeader.border#474440
  • sideBarSectionHeader.foreground#474440
  • sideBarTitle.foreground#474440
  • statusBar.background#474440
  • statusBar.foreground#fff6ec
  • tab.activeBackground#E6DACF
  • tab.activeBorder#E6DACF
  • tab.activeBorderTop#F2E7DA
  • tab.activeForeground#474440
  • tab.activeModifiedBorder#474440
  • tab.hoverBackground#807A73
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#fff3e6
  • tab.inactiveForeground#BFB5AC
  • tab.unfocusedActiveBackground#474440
  • tab.unfocusedActiveForeground#fff6ec
  • tab.unfocusedHoverForeground#fff6ec
  • tab.unfocusedInactiveBackground#BFB5AC
  • tab.unfocusedInactiveForeground#fff6ec
  • tab.unfocusedInactiveModifiedBorder#474440
  • terminal.background#F2E7DA
  • terminal.border#474440
  • terminal.foreground#333333
  • terminal.selectionBackground#FFD7A6
  • terminal.tab.activeBorder#E6DACF
  • terminalCursor.background#E6DACF
  • terminalCursor.foreground#FF9942
  • titleBar.activeBackground#474440
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#474440
  • toolbar.hoverBackground#E6DACF
  • tree.tableColumnsBorder#474440
  • welcomePage.background#E6DACF
  • welcomePage.tileBackground#fff3e6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A5AEB5italic
comment.block.preprocessor#A5AEB5italic
comment.documentation, comment.block.documentation#A5AEB5italic
invalid.illegal#BF3D34
keyword.operator#474440
keyword, storage#804600
storage.type, support.type#E6922Cbold
constant.language, support.constant, variable.language#4D2A00
variable, support.variable#006799
entity.name.function, support.function#AA3731italic bold
entity.name.type, entity.other.inherited-class, support.class#9E0083bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#0B5773italic
string#469129bold
constant.character.escape#469129bold
string.regexp#4B83CD
constant.other.symbol#4B83CD
punctuation#444444bold
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#444444
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#16263Bbold
entity.name.tag#4273B3
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#AA3731bold
constant.character.entity, punctuation.definition.entity#E37500
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9Dbold
meta.property-name, support.type.property-name#7A3E9D
meta.property-value, meta.property-value constant.other, support.constant.property-value#E37500
keyword.other.important#AA3731bold
markup.changed#444444
markup.deleted#444444
markup.italicitalic
markup.error#660000
markup.inserted#333333
meta.link#4B83CD
markup.output, markup.raw#555555
markup.prompt#555555
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#444444
meta.diff.header.from-file#444444
meta.diff.header.to-file#444444
Natural Theme by Marco Franzese - VS Code Theme