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#141110
  • activityBar.border#352F2C
  • activityBar.foreground#FFB84D
  • activityBar.inactiveForeground#625D5B
  • activityBarBadge.background#FFB84D
  • activityBarBadge.foreground#141110
  • badge.background#FFB84D
  • badge.foreground#141110
  • breadcrumb.focusForeground#ECE7DF
  • breadcrumb.foreground#AD9676
  • button.background#FFB84D
  • button.foreground#141110
  • button.hoverBackground#FFCC80
  • diffEditor.insertedTextBackground#6EE8A81A
  • diffEditor.removedTextBackground#FF7A6E1A
  • dropdown.background#141110
  • dropdown.border#352F2C
  • dropdown.foreground#ECE7DF
  • editor.background#191615
  • editor.foreground#ECE7DF
  • editor.lineHighlightBackground#1F1B1999
  • editor.selectionBackground#352F2C99
  • editor.selectionHighlightBackground#352F2C66
  • editor.wordHighlightBackground#352F2C66
  • editorBracketMatch.background#352F2C
  • editorBracketMatch.border#FFB84D
  • editorCursor.foreground#FFB84D
  • editorError.foreground#FF7A6E
  • editorGroupHeader.tabsBackground#1F1B19
  • editorGroupHeader.tabsBorder#352F2C
  • editorHoverWidget.background#1F1B19
  • editorHoverWidget.border#352F2C
  • editorIndentGuide.activeBackground1#454140
  • editorIndentGuide.background1#24201E
  • editorInfo.foreground#7FC4FF
  • editorLineNumber.activeForeground#FFB84D
  • editorLineNumber.foreground#524E4C
  • editorRuler.foreground#24201E
  • editorSuggestWidget.background#1F1B19
  • editorSuggestWidget.selectedBackground#352F2C
  • editorWarning.foreground#FF9E4D
  • editorWhitespace.foreground#2D2725
  • editorWidget.background#1F1B19
  • editorWidget.border#352F2C
  • focusBorder#524E4C
  • foreground#D7CCBC
  • gitDecoration.addedResourceForeground#6EE8A8
  • gitDecoration.deletedResourceForeground#FF7A6E
  • gitDecoration.ignoredResourceForeground#625D5B
  • gitDecoration.modifiedResourceForeground#FF9E4D
  • gitDecoration.untrackedResourceForeground#6EE8A8
  • input.background#141110
  • input.border#352F2C
  • input.foreground#ECE7DF
  • inputOption.activeBorder#FFB84D
  • list.activeSelectionBackground#352F2C
  • list.activeSelectionForeground#ECE7DF
  • list.highlightForeground#FFB84D
  • list.hoverBackground#24201E
  • list.inactiveSelectionBackground#24201E
  • menu.background#1F1B19
  • menu.foreground#ECE7DF
  • menubar.selectionBackground#352F2C
  • minimap.background#191615
  • notifications.background#1F1B19
  • notifications.border#352F2C
  • panel.background#1F1B19
  • panel.border#352F2C
  • panelTitle.activeForeground#ECE7DF
  • panelTitle.inactiveForeground#AD9676
  • peekView.border#FFB84D
  • peekViewEditor.background#141110
  • peekViewResult.background#1F1B19
  • scrollbarSlider.activeBackground#524E4CCC
  • scrollbarSlider.background#352F2C99
  • scrollbarSlider.hoverBackground#454140CC
  • selection.background#352F2C
  • sideBar.background#1F1B19
  • sideBar.border#352F2C
  • sideBar.foreground#D7CCBC
  • sideBarSectionHeader.background#141110
  • sideBarSectionHeader.foreground#D7CCBC
  • sideBarTitle.foreground#AD9676
  • statusBar.background#141110
  • statusBar.border#352F2C
  • statusBar.debuggingBackground#FF9E4D
  • statusBar.debuggingForeground#141110
  • statusBar.foreground#D7CCBC
  • statusBar.noFolderBackground#141110
  • tab.activeBackground#191615
  • tab.activeBorderTop#FFB84D
  • tab.activeForeground#ECE7DF
  • tab.border#352F2C
  • tab.inactiveBackground#1F1B19
  • tab.inactiveForeground#AD9676
  • terminal.ansiBlack#24201E
  • terminal.ansiBlue#7FC4FF
  • terminal.ansiBrightBlack#625D5B
  • terminal.ansiBrightBlue#B2DCFF
  • terminal.ansiBrightCyan#AAF0EA
  • terminal.ansiBrightGreen#9AEFC2
  • terminal.ansiBrightMagenta#FFD1E7
  • terminal.ansiBrightRed#FFA9A1
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCC80
  • terminal.ansiCyan#7FE8E0
  • terminal.ansiGreen#6EE8A8
  • terminal.ansiMagenta#FF9ECC
  • terminal.ansiRed#FF7A6E
  • terminal.ansiWhite#ECE7DF
  • terminal.ansiYellow#FFB84D
  • terminal.background#141110
  • terminal.foreground#D7CCBC
  • titleBar.activeBackground#141110
  • titleBar.activeForeground#ECE7DF
  • titleBar.border#352F2C
  • titleBar.inactiveBackground#141110
  • titleBar.inactiveForeground#AD9676
  • widget.shadow#0000004D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#867050italic
string, string.quoted, punctuation.definition.string#6EE8A8
string.regexp#7FE8E0
constant.numeric, constant.language, keyword.other.unit#FF9E4D
constant.character.escape#FF9ECC
variable, variable.other.readwrite, meta.definition.variable.name#ECE7DF
variable.parameter#D7CCBC
variable.language, variable.other.constant#FF9ECC
keyword, keyword.control, storage, storage.type, storage.modifier#FFB84Dbold
keyword.operator#C9BBA6
entity.name.function, support.function, meta.function-call#7FC4FF
entity.name.class, entity.name.type, support.class, support.type#FFD08A
entity.name.tag#FFB84D
entity.other.attribute-name#6EE8A8
support.constant, support.variable#FF9ECC
punctuation, meta.brace#B8A589
markup.heading#FFB84Dbold
markup.bold#ECE7DFbold
markup.italic#ECE7DFitalic
markup.inline.raw, markup.raw#6EE8A8
markup.underline.link#7FC4FFunderline
invalid, invalid.illegal#FF7A6E
meta.diff.header, meta.diff.range#7FC4FF
markup.inserted#6EE8A8
markup.deleted#FF7A6E
support.type.property-name.json, support.type.property-name#FFB84D