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#c19a6b
  • activityBar.background#16252a
  • activityBar.foreground#c19a6b
  • activityBarBadge.background#8a7a66
  • activityBarBadge.foreground#ffffff
  • badge.background#8a7a66
  • badge.foreground#ffffff
  • button.background#304440
  • button.foreground#ffffff
  • button.hoverBackground#415752
  • dropdown.background#15292d
  • dropdown.border#344b4f
  • dropdown.foreground#dcd8c9
  • editor.background#1b2a2e
  • editor.findMatchBackground#c19a6b44
  • editor.findMatchHighlightBackground#c19a6b22
  • editor.foreground#dcd8c9
  • editor.lineHighlightBackground#30444033
  • editor.lineHighlightBorder#30444066
  • editor.selectionBackground#8a7a6644
  • editor.selectionHighlightBackground#8a7a6625
  • editorBracketMatch.background#c19a6b33
  • editorBracketMatch.border#c19a6b
  • editorCursor.foreground#c19a6b
  • editorGroupHeader.tabsBackground#1b2a2e
  • editorIndentGuide.activeBackground#344b4f88
  • editorIndentGuide.background#344b4f44
  • editorLineNumber.activeForeground#c19a6b
  • editorLineNumber.foreground#5a564f
  • editorWhitespace.foreground#344b4f
  • focusBorder#8a7a66
  • gitDecoration.conflictingResourceForeground#a08090
  • gitDecoration.deletedResourceForeground#b07a68
  • gitDecoration.modifiedResourceForeground#c19a6b
  • gitDecoration.untrackedResourceForeground#8ab076
  • input.background#15292d
  • input.border#344b4f
  • input.foreground#dcd8c9
  • input.placeholderForeground#5a564f
  • inputOption.activeBorder#c19a6b
  • list.activeSelectionBackground#304440
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#304440
  • list.highlightForeground#c19a6b
  • list.hoverBackground#30444044
  • minimap.background#1b2a2e
  • minimapSlider.activeBackground#c19a6b66
  • minimapSlider.background#c19a6b22
  • minimapSlider.hoverBackground#c19a6b44
  • panel.background#1b2a2e
  • panel.border#304440
  • panelTitle.activeBorder#c19a6b
  • panelTitle.activeForeground#c19a6b
  • panelTitle.inactiveForeground#cfd8c3
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#c19a6b88
  • scrollbarSlider.background#5a564f44
  • scrollbarSlider.hoverBackground#5a564f88
  • sideBar.background#15292d
  • sideBar.foreground#cfd8c3
  • sideBarSectionHeader.background#16252a
  • sideBarSectionHeader.foreground#c19a6b
  • sideBarTitle.foreground#c19a6b
  • statusBar.background#304440
  • statusBar.debuggingBackground#c19a6b
  • statusBar.foreground#dcd8c9
  • statusBar.noFolderBackground#16252a
  • statusBarItem.hoverBackground#415752
  • tab.activeBackground#263c3f
  • tab.activeBorder#c19a6b
  • tab.activeForeground#ffffff
  • tab.border#1b2a2e
  • tab.inactiveBackground#15292d
  • tab.inactiveForeground#cfd8c3
  • terminal.ansiBlue#5e8ea8
  • terminal.ansiBrightBlue#78a8c8
  • terminal.ansiBrightCyan#78c8b8
  • terminal.ansiBrightGreen#a0c090
  • terminal.ansiBrightMagenta#c0a0b0
  • terminal.ansiBrightRed#d09888
  • terminal.ansiBrightYellow#e9c89c
  • terminal.ansiCyan#6ea8a0
  • terminal.ansiGreen#8ab076
  • terminal.ansiMagenta#a08090
  • terminal.ansiRed#b07a68
  • terminal.ansiYellow#c19a6b
  • terminal.background#1b2a2e
  • terminal.foreground#dcd8c9
  • titleBar.activeBackground#16252a
  • titleBar.activeForeground#dcd8c9
  • titleBar.inactiveBackground#1b2a2e
  • titleBar.inactiveForeground#cfd8c3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a564fitalic
string, string.quoted, string.template#8ab076
keyword, storage.type, storage.modifier#c19a6bbold
keyword.operator, punctuation.accessor#a0cfa0
variable, variable.other#dcd8c9
variable.parameter#a0cfa0italic
entity.name.function, support.function#a0c090
meta.function-call#cfd8c3
entity.name.class, entity.name.type.class, support.class#cfd8c3bold
entity.name.type, support.type#cfd8c3
entity.name.type.interface#6ea8a0italic
constant.numeric#b07a68
constant, constant.language, constant.character#a08090
constant.language.boolean#b07a68bold
variable.other.property, support.variable.property#cfd8c3
meta.object-literal.key#a0c090
entity.name.tag, punctuation.definition.tag#c19a6b
entity.other.attribute-name#cfd8c3italic
punctuation, meta.brace#a0cfa0
string.regexp#b07a68
constant.character.escape#6ea8a0
meta.decorator, punctuation.decorator#a0c090
invalid, invalid.illegal#c05040strikethrough
markup.heading, entity.name.section#c19a6bbold
markup.bold#cfd8c3bold
markup.italic#8ab076italic
markup.underline.link#6ea8a0
markup.inline.raw, markup.fenced_code#a0c090
support.type.property-name.json#c19a6b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#cfd8c3
support.type.property-name.css#a0c090
support.constant.property-value.css#8ab076