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—