Skip to main content
CodingTheme

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.background#7B6E4D
  • activityBar.border#5A5139
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#FFFFFF80
  • activityBarBadge.background#9A8960
  • activityBarBadge.foreground#ffffff
  • badge.background#9A8960
  • badge.foreground#ffffff
  • button.background#7B6E4D
  • button.border#5A5139
  • button.foreground#ffffff
  • button.hoverBackground#8B7D58
  • diffEditor.insertedLineBackground#7A9A5A1A
  • diffEditor.insertedTextBackground#7A9A5A33
  • diffEditor.removedLineBackground#C05A5A1A
  • diffEditor.removedTextBackground#C05A5A33
  • dropdown.background#7B6E4D
  • dropdown.border#5A5139
  • dropdown.foreground#ffffff
  • dropdown.listBackground#5A5139
  • editor.background#5A5139
  • editor.findMatchBackground#9A8960
  • editor.findMatchHighlightBackground#9A89601A
  • editor.foreground#E6DCC4
  • editor.lineHighlightBackground#7B6E4D50
  • editor.selectionBackground#9A896033
  • editor.selectionForeground#ffffff
  • editorCursor.foreground#ffffff
  • editorGroup.border#5A5139
  • editorGroup.dropBackground#9A89601A
  • editorGutter.background#7B6E4D
  • editorLineNumber.activeForeground#B9A473
  • editorLineNumber.foreground#9A8960
  • editorWhitespace.foreground#7B6E4D
  • editorWidget.background#7B6E4D
  • editorWidget.border#5A5139
  • editorWidget.foreground#ffffff
  • errorForeground#ff6b6b
  • focusBorder#9A8960
  • gitDecoration.addedResourceForeground#7A9A5A
  • gitDecoration.conflictingResourceForeground#C07A4A
  • gitDecoration.deletedResourceForeground#C05A5A
  • gitDecoration.ignoredResourceForeground#9A8960
  • gitDecoration.modifiedResourceForeground#B9A473
  • gitDecoration.untrackedResourceForeground#7A9A5A
  • input.background#5A5139
  • input.border#5A5139
  • input.foreground#ffffff
  • input.placeholderForeground#9A8960
  • inputOption.activeBackground#9A8960
  • inputOption.activeBorder#ffffff
  • inputOption.activeForeground#ffffff
  • inputOption.hoverBackground#9A89601A
  • list.activeSelectionBackground#9A8960
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#9A89601A
  • list.errorForeground#ff6b6b
  • list.focusBackground#9A8960
  • list.focusForeground#ffffff
  • list.highlightForeground#B9A473
  • list.hoverBackground#9A89601A
  • list.inactiveSelectionBackground#7B6E4D
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#B9A473
  • menu.background#7B6E4D
  • menu.border#5A5139
  • menu.foreground#ffffff
  • menu.selectionBackground#9A8960
  • menu.selectionForeground#ffffff
  • menubar.selectionBackground#9A8960
  • menubar.selectionForeground#ffffff
  • panel.background#7B6E4D
  • panel.border#5A5139
  • panelTitle.activeForeground#E6DCC4
  • panelTitle.inactiveForeground#9A8960
  • quickInput.background#7B6E4D
  • quickInput.foreground#ffffff
  • quickInputList.focusBackground#9A8960
  • quickInputList.focusForeground#ffffff
  • scrollbar.shadow#5A5139
  • scrollbarSlider.activeBackground#9A89607F
  • scrollbarSlider.background#7B6E4D7F
  • scrollbarSlider.hoverBackground#9A89604C
  • sideBar.background#7B6E4D
  • sideBar.border#5A5139
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#9A8960
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#7B6E4D
  • statusBar.border#5A5139
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#7B6E4D
  • tab.activeBackground#5A5139
  • tab.activeBorder#9A8960
  • tab.activeForeground#ffffff
  • tab.border#5A5139
  • tab.inactiveBackground#7B6E4D
  • tab.inactiveForeground#B9A473
  • terminal.ansiBlack#2D2920
  • terminal.ansiBlue#4A5A7A
  • terminal.ansiBrightBlack#5A5139
  • terminal.ansiBrightBlue#6A8AC0
  • terminal.ansiBrightCyan#6AAAA0
  • terminal.ansiBrightGreen#7A9A5A
  • terminal.ansiBrightMagenta#A06A8A
  • terminal.ansiBrightRed#C05A5A
  • terminal.ansiBrightWhite#E6DCC4
  • terminal.ansiBrightYellow#D4C088
  • terminal.ansiCyan#4A7A6A
  • terminal.ansiGreen#5A7A4A
  • terminal.ansiMagenta#7A4A6A
  • terminal.ansiRed#8B3A3A
  • terminal.ansiWhite#B9A473
  • terminal.ansiYellow#9A8960
  • terminal.background#5A5139
  • terminal.foreground#E6DCC4
  • titleBar.activeBackground#9A8960
  • titleBar.activeForeground#ffffff
  • titleBar.border#5A5139
  • titleBar.inactiveBackground#7B6E4D
  • titleBar.inactiveForeground#B9A473
  • toolbar.hoverBackground#9A89601A
  • toolbar.hoverOutline#9A8960
  • window.activeBorder#9A8960
  • window.inactiveBorder#5A5139

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8A6Aitalic
string, constant.other.symbol#C09060
constant.numeric, constant.language, constant.character, constant.other#C07A50
keyword, storage.type, storage.modifier#D4C088bold
entity.name.function, support.function#6A9A8A
variable, support.variable, entity.name.variable#E6DCC4
entity.name.type, support.type, support.class#A8C0A0
markup.heading, entity.name.section#B9A473bold
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.fenced_code.block#9A8960
variable.parameter#B9A473italic
variable.language#B9A473bold
meta.object-literal.key#6AAAA0
invalid.illegal#C05A5Abold
keyword.operator#C09060
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#A8C0A0
entity.other.attribute-name, entity.other.attribute-name.html#D4C088
support.type.property-name, support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss#6AAAA0
string.regexp, constant.regexp#C05A5A
meta.decorator, entity.name.function.decorator, punctuation.decorator#6A9A8A
entity.name.namespace, entity.name.type.namespace, entity.name.module#A8C0A0

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...