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#5a9bd4
  • activityBar.background#f5f4f0
  • activityBar.foreground#5a9bd4
  • activityBarBadge.background#5a9bd4
  • activityBarBadge.foreground#fff9f0
  • badge.background#5a9bd4
  • badge.foreground#fff9f0
  • button.background#5a9bd4
  • button.foreground#ffffff
  • button.hoverBackground#7ab5e0
  • dropdown.background#ffffff
  • dropdown.border#cccccc
  • dropdown.foreground#3a3a3a
  • editor.background#fff9f0
  • editor.findMatchBackground#d9835b33
  • editor.findMatchHighlightBackground#d9835b22
  • editor.foreground#3a3a3a
  • editor.lineHighlightBackground#dce6f540
  • editor.lineHighlightBorder#5a9bd480
  • editor.selectionBackground#5a9bd433
  • editor.selectionHighlightBackground#5a9bd422
  • editorBracketMatch.background#5a9bd433
  • editorBracketMatch.border#5a9bd4
  • editorCursor.foreground#5a9bd4
  • editorGroupHeader.tabsBackground#fff9f0
  • editorIndentGuide.activeBackground#b0b0a8
  • editorIndentGuide.background#d0d0c8
  • editorLineNumber.activeForeground#5a9bd4
  • editorLineNumber.foreground#a0a0a0
  • editorWhitespace.foreground#c0c0b8
  • focusBorder#5a9bd4
  • gitDecoration.conflictingResourceForeground#e6b450
  • gitDecoration.deletedResourceForeground#d96c5d
  • gitDecoration.modifiedResourceForeground#5a9bd4
  • gitDecoration.untrackedResourceForeground#6bbd6a
  • input.background#ffffff
  • input.border#cccccc
  • input.foreground#3a3a3a
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBorder#5a9bd4
  • list.activeSelectionBackground#c3d8f5
  • list.activeSelectionForeground#3a3a3a
  • list.focusBackground#c3d8f5
  • list.highlightForeground#5a9bd4
  • list.hoverBackground#d3e2f566
  • minimap.background#fff9f0
  • minimapSlider.activeBackground#5a9bd466
  • minimapSlider.background#5a9bd422
  • minimapSlider.hoverBackground#5a9bd444
  • panel.background#fff9f0
  • panel.border#c0c0b8
  • panelTitle.activeBorder#5a9bd4
  • panelTitle.activeForeground#5a9bd4
  • panelTitle.inactiveForeground#9a9a9a
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#b0b0b0c0
  • scrollbarSlider.background#b0b0b060
  • scrollbarSlider.hoverBackground#b0b0b090
  • sideBar.background#fafaf7
  • sideBar.foreground#3a3a3a
  • sideBarSectionHeader.background#efededc
  • sideBarSectionHeader.foreground#5a9bd4
  • sideBarTitle.foreground#5a9bd4
  • statusBar.background#dce6f5
  • statusBar.debuggingBackground#5a9bd4
  • statusBar.foreground#3a3a3a
  • statusBar.noFolderBackground#c3d4ed
  • statusBarItem.hoverBackground#b0c9e5
  • tab.activeBackground#fff9f0
  • tab.activeBorder#5a9bd4
  • tab.activeForeground#3a3a3a
  • tab.border#d0d0cb
  • tab.inactiveBackground#f5f5f2
  • tab.inactiveForeground#9a9a9a
  • terminal.ansiBlue#5a9bd4
  • terminal.ansiBrightBlue#82b6ff
  • terminal.ansiBrightCyan#39d4e0
  • terminal.ansiBrightGreen#8eff9e
  • terminal.ansiBrightMagenta#e3b5ff
  • terminal.ansiBrightRed#ff9a8c
  • terminal.ansiBrightYellow#ffdc85
  • terminal.ansiCyan#00a6b4
  • terminal.ansiGreen#6bbd6a
  • terminal.ansiMagenta#c68aff
  • terminal.ansiRed#d96c5d
  • terminal.ansiYellow#e6b450
  • terminal.background#fff9f0
  • terminal.foreground#3a3a3a
  • titleBar.activeBackground#e8e8e5
  • titleBar.activeForeground#3a3a3a
  • titleBar.inactiveBackground#f2f2ef
  • titleBar.inactiveForeground#7a7a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a8a8aitalic
string, string.quoted, string.template#d9835b
keyword, storage.type, storage.modifier#5a9bd4bold
keyword.operator, punctuation.accessor#5c9ed5
variable, variable.other#3a3a3a
variable.parameter#8a8a8aitalic
entity.name.function, support.function#00a6b4
meta.function-call#00a6b4
entity.name.class, entity.name.type.class, support.class#6bbd6abold
entity.name.type, support.type#6bbd6a
entity.name.type.interface#5a9bd4italic
constant.numeric#d9835b
constant, constant.language, constant.character#d9835b
constant.language.boolean#5a9bd4bold
variable.other.property, support.variable.property#3a3a3a
meta.object-literal.key#5a9bd4
entity.name.tag, punctuation.definition.tag#5a9bd4
entity.other.attribute-name#d9835bitalic
punctuation, meta.brace#b0b0a8
string.regexp#d9835b
constant.character.escape#d9835b
meta.decorator, punctuation.decorator#e6b450
invalid, invalid.illegal#d96c5dstrikethrough
markup.heading, entity.name.section#5a9bd4bold
markup.bold#d9835bbold
markup.italic#8a8a8aitalic
markup.underline.link#5a9bd4
markup.inline.raw, markup.fenced_code#00a6b4
support.type.property-name.json#5a9bd4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5a9bd4
support.type.property-name.css#00a6b4
support.constant.property-value.css#d9835b