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—