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#5B3A8A
  • activityBar.background#F0E5D0
  • activityBar.foreground#4B382E
  • activityBarBadge.background#5B3A8A
  • activityBarBadge.foreground#FAF3E0
  • badge.background#5B3A8A
  • badge.foreground#FAF3E0
  • button.background#5B3A8A
  • button.foreground#FAF3E0
  • button.hoverBackground#7C5A5A
  • dropdown.background#F2E9D4
  • dropdown.border#D3C5A0
  • dropdown.foreground#4B382E
  • editor.background#FAF3E0
  • editor.findMatchBackground#5B3A8A
  • editor.findMatchHighlightBackground#A5B0C0
  • editor.foreground#4B382E
  • editor.lineHighlightBackground#F2E9D4
  • editor.lineHighlightBorder#5B3A8A
  • editor.selectionBackground#C5D5E0
  • editor.selectionHighlightBackground#C5D5E080
  • editorBracketMatch.background#A5C8D8
  • editorBracketMatch.border#5B3A8A
  • editorCursor.foreground#5B3A8A
  • editorGroupHeader.tabsBackground#F0E5D0
  • editorIndentGuide.activeBackground#5B3A8A
  • editorIndentGuide.background#8A9A8F
  • editorLineNumber.activeForeground#5B3A8A
  • editorLineNumber.foreground#7A6F5C
  • editorWhitespace.foreground#8A9A8F
  • focusBorder#5B3A8A
  • gitDecoration.conflictingResourceForeground#8A9A8F
  • gitDecoration.deletedResourceForeground#8C5A5A
  • gitDecoration.modifiedResourceForeground#5B6A8E
  • gitDecoration.untrackedResourceForeground#3A8E7C
  • input.background#F2E9D4
  • input.border#D3C5A0
  • input.foreground#4B382E
  • input.placeholderForeground#8A9A8F
  • inputOption.activeBorder#5B3A8A
  • list.activeSelectionBackground#F0E5D0
  • list.activeSelectionForeground#4B382E
  • list.focusBackground#F0E5D0
  • list.highlightForeground#5B3A8A
  • list.hoverBackground#F0E5D0
  • minimap.background#FAF3E0
  • minimapSlider.activeBackground#5B3A8A66
  • minimapSlider.background#5B3A8A22
  • minimapSlider.hoverBackground#5B3A8A44
  • panel.background#FAF3E0
  • panel.border#D3C5A0
  • panelTitle.activeBorder#5B3A8A
  • panelTitle.activeForeground#4B382E
  • panelTitle.inactiveForeground#8A9A8F
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5B3A8A88
  • scrollbarSlider.background#A89F9044
  • scrollbarSlider.hoverBackground#A89F9088
  • sideBar.background#FAF3E0
  • sideBar.foreground#4B382E
  • sideBarSectionHeader.background#F0E5D0
  • sideBarSectionHeader.foreground#4B382E
  • sideBarTitle.foreground#4B382E
  • statusBar.background#5B3A8A
  • statusBar.debuggingBackground#506070
  • statusBar.foreground#FAF3E0
  • statusBar.noFolderBackground#506070
  • statusBarItem.hoverBackground#7C5A5A
  • tab.activeBackground#F0E5D0
  • tab.activeBorder#5B3A8A
  • tab.activeForeground#4B382E
  • tab.border#D3C5A0
  • tab.inactiveBackground#FAF3E0
  • tab.inactiveForeground#8A9A8F
  • terminal.ansiBlue#5B6A8E
  • terminal.ansiBrightBlue#7A8FA0
  • terminal.ansiBrightCyan#6A8D6A
  • terminal.ansiBrightGreen#6A8D6A
  • terminal.ansiBrightMagenta#A35050
  • terminal.ansiBrightRed#A35050
  • terminal.ansiBrightYellow#C0A080
  • terminal.ansiCyan#3A8E7C
  • terminal.ansiGreen#3A8E7C
  • terminal.ansiMagenta#5B3A8A
  • terminal.ansiRed#8C5A5A
  • terminal.ansiYellow#A89F90
  • terminal.background#FAF3E0
  • terminal.foreground#4B382E
  • titleBar.activeBackground#F0E5D0
  • titleBar.activeForeground#4B382E
  • titleBar.inactiveBackground#FAF3E0
  • titleBar.inactiveForeground#5B3A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A89F90italic
string, string.quoted, string.template#3A8E7C
keyword, storage.type, storage.modifier#5B3A8Abold
keyword.operator, punctuation.accessor#7A6F5C
variable, variable.other#4B382E
variable.parameter#3A8E7Citalic
entity.name.function, support.function#8C5A5A
meta.function-call#5B6A8E
entity.name.class, entity.name.type.class, support.class#5B3A8Abold
entity.name.type, support.type#5B6A8E
entity.name.type.interface#5B6A8Eitalic
constant.numeric#8C5A5A
constant, constant.language, constant.character#5B6A8E
constant.language.boolean#8C5A5Abold
variable.other.property, support.variable.property#4B382E
meta.object-literal.key#5B6A8E
entity.name.tag, punctuation.definition.tag#5B3A8A
entity.other.attribute-name#5B6A8Eitalic
punctuation, meta.brace#7A6F5C
string.regexp#3A8E7C
constant.character.escape#5B6A8E
meta.decorator, punctuation.decorator#5B3A8A
invalid, invalid.illegal#A35050strikethrough
markup.heading, entity.name.section#5B3A8Abold
markup.bold#5B3A8Abold
markup.italic#7A6F5Citalic
markup.underline.link#5B6A8E
markup.inline.raw, markup.fenced_code#3A8E7C
support.type.property-name.json#5B6A8E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5B6A8E
support.type.property-name.css#3A8E7C
support.constant.property-value.css#5B3A8A