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.activeBorder#d16a0f
  • activityBar.background#f2efe9
  • activityBar.foreground#403e39
  • activityBarBadge.background#d16a0f
  • activityBarBadge.foreground#faf9f5
  • badge.background#d16a0f
  • badge.foreground#faf9f5
  • button.background#d16a0f
  • button.foreground#faf9f5
  • button.hoverBackground#b35409
  • dropdown.background#f2efe9
  • dropdown.border#e2dfd9
  • dropdown.foreground#403e39
  • editor.background#faf9f5
  • editor.findMatchBackground#d16a0f60
  • editor.findMatchHighlightBackground#d16a0f30
  • editor.foreground#403e39
  • editor.lineHighlightBackground#d16a0f20
  • editor.lineHighlightBorder#d16a0f40
  • editor.selectionBackground#d16a0f40
  • editor.selectionHighlightBackground#d16a0f30
  • editorBracketMatch.background#d16a0f30
  • editorBracketMatch.border#d16a0f
  • editorCursor.foreground#d16a0f
  • editorGroupHeader.tabsBackground#faf9f5
  • editorIndentGuide.activeBackground#c8c5bfb0
  • editorIndentGuide.background#c8c5bf70
  • editorLineNumber.activeForeground#403e39
  • editorLineNumber.foreground#a5a3a0
  • editorWhitespace.foreground#c8c5bf
  • focusBorder#d16a0f
  • gitDecoration.conflictingResourceForeground#c98a1d
  • gitDecoration.deletedResourceForeground#d16a0f
  • gitDecoration.modifiedResourceForeground#2a9d8f
  • gitDecoration.untrackedResourceForeground#a5a3a0
  • input.background#ffffff
  • input.border#e2dfd9
  • input.foreground#403e39
  • input.placeholderForeground#a5a3a0
  • inputOption.activeBorder#d16a0f
  • list.activeSelectionBackground#d16a0f20
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d16a0f20
  • list.highlightForeground#d16a0f
  • list.hoverBackground#d16a0f10
  • minimap.background#faf9f5
  • minimapSlider.activeBackground#d16a0fb0
  • minimapSlider.background#d16a0f20
  • minimapSlider.hoverBackground#d16a0f40
  • panel.background#faf9f5
  • panel.border#e2dfd9
  • panelTitle.activeBorder#d16a0f
  • panelTitle.activeForeground#403e39
  • panelTitle.inactiveForeground#a5a3a0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#d16a0fb0
  • scrollbarSlider.background#c8c5bf70
  • scrollbarSlider.hoverBackground#c8c5bfb0
  • sideBar.background#f5f3ee
  • sideBar.foreground#403e39
  • sideBarSectionHeader.background#f2efe9
  • sideBarSectionHeader.foreground#403e39
  • sideBarTitle.foreground#403e39
  • statusBar.background#d16a0f
  • statusBar.debuggingBackground#b35409
  • statusBar.foreground#faf9f5
  • statusBar.noFolderBackground#f2efe9
  • statusBarItem.hoverBackground#d16a0f60
  • tab.activeBackground#faf9f5
  • tab.activeBorder#d16a0f
  • tab.activeForeground#403e39
  • tab.border#e2dfd9
  • tab.inactiveBackground#f2efe9
  • tab.inactiveForeground#a5a3a0
  • terminal.ansiBlue#5a7d9e
  • terminal.ansiBrightBlue#4a6b84
  • terminal.ansiBrightCyan#8ab3c3
  • terminal.ansiBrightGreen#3abd9b
  • terminal.ansiBrightMagenta#bfa195
  • terminal.ansiBrightRed#e07515
  • terminal.ansiBrightYellow#d6a33c
  • terminal.ansiCyan#78a9b9
  • terminal.ansiGreen#2a9d8f
  • terminal.ansiMagenta#a59487
  • terminal.ansiRed#d16a0f
  • terminal.ansiYellow#c98a1d
  • terminal.background#faf9f5
  • terminal.foreground#403e39
  • titleBar.activeBackground#f2efe9
  • titleBar.activeForeground#403e39
  • titleBar.inactiveBackground#faf9f5
  • titleBar.inactiveForeground#a5a3a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a5a3a0italic
string, string.quoted, string.template#2a9d8f
keyword, storage.type, storage.modifier#d16a0fbold
keyword.operator, punctuation.accessor#403e39
variable, variable.other#403e39
variable.parameter#a5a3a0italic
entity.name.function, support.function#5a7d9e
meta.function-call#5a7d9e
entity.name.class, entity.name.type.class, support.class#d16a0fbold
entity.name.type, support.type#5a7d9e
entity.name.type.interface#5a7d9eitalic
constant.numeric#d16a0f
constant, constant.language, constant.character#a5a3a0
constant.language.boolean#d16a0fbold
variable.other.property, support.variable.property#2a9d8f
meta.object-literal.key#2a9d8f
entity.name.tag, punctuation.definition.tag#d16a0f
entity.other.attribute-name#a5a3a0italic
punctuation, meta.brace#403e39
string.regexp#5a7d9e
constant.character.escape#d16a0f
meta.decorator, punctuation.decorator#c98a1d
invalid, invalid.illegal#ff5555strikethrough
markup.heading, entity.name.section#d16a0fbold
markup.bold#d16a0fbold
markup.italic#403e39italic
markup.underline.link#5a7d9e
markup.inline.raw, markup.fenced_code#2a9d8f
support.type.property-name.json#d16a0f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2a9d8f
support.type.property-name.css#5a7d9e
support.constant.property-value.css#a5a3a0