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#A678A1
  • activityBar.background#F2EFE9
  • activityBar.foreground#A678A1
  • activityBarBadge.background#A678A1
  • activityBarBadge.foreground#FAF7F1
  • badge.background#A678A1
  • badge.foreground#FAF7F1
  • button.background#A678A1
  • button.foreground#FAF7F1
  • button.hoverBackground#A678A180
  • dropdown.background#FEFDFB
  • dropdown.border#D5CFC4
  • dropdown.foreground#2A2824
  • editor.background#FAF7F1
  • editor.findMatchBackground#A678A144
  • editor.findMatchHighlightBackground#A678A122
  • editor.foreground#2A2824
  • editor.lineHighlightBackground#D5CFC440
  • editor.lineHighlightBorder#A678A1
  • editor.selectionBackground#5CCFD540
  • editor.selectionHighlightBackground#5CCFD520
  • editorBracketMatch.background#5CCFD533
  • editorBracketMatch.border#5CCFD5
  • editorCursor.foreground#5CCFD5
  • editorGroupHeader.tabsBackground#FAF7F1
  • editorIndentGuide.activeBackground#B8B2A844
  • editorIndentGuide.background#B8B2A822
  • editorLineNumber.activeForeground#2A2824
  • editorLineNumber.foreground#77736A
  • editorWhitespace.foreground#B8B2A8
  • focusBorder#5CCFD5
  • gitDecoration.conflictingResourceForeground#D5CFC4
  • gitDecoration.deletedResourceForeground#C74E39
  • gitDecoration.modifiedResourceForeground#5CCFD5
  • gitDecoration.untrackedResourceForeground#7FA96D
  • input.background#FEFDFB
  • input.border#D5CFC4
  • input.foreground#2A2824
  • input.placeholderForeground#B8B2A8
  • inputOption.activeBorder#A678A1
  • list.activeSelectionBackground#A678A1
  • list.activeSelectionForeground#FAF7F1
  • list.focusBackground#A678A1
  • list.highlightForeground#D5CFC4
  • list.hoverBackground#A678A166
  • minimap.background#F0ECE3
  • minimapSlider.activeBackground#5CCFD566
  • minimapSlider.background#5CCFD522
  • minimapSlider.hoverBackground#5CCFD544
  • panel.background#F5F2EC
  • panel.border#D5CFC4
  • panelTitle.activeBorder#A678A1
  • panelTitle.activeForeground#A678A1
  • panelTitle.inactiveForeground#77736A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5CCFD588
  • scrollbarSlider.background#B8B2A844
  • scrollbarSlider.hoverBackground#B8B2A888
  • sideBar.background#F5F2EC
  • sideBar.foreground#2A2824
  • sideBarSectionHeader.background#F5F2EC
  • sideBarSectionHeader.foreground#A678A1
  • sideBarTitle.foreground#A678A1
  • statusBar.background#D5CFC4
  • statusBar.debuggingBackground#5CCFD5
  • statusBar.foreground#2A2824
  • statusBar.noFolderBackground#F2EFE9
  • statusBarItem.hoverBackground#A678A140
  • tab.activeBackground#FAF7F1
  • tab.activeBorder#A678A1
  • tab.activeForeground#2A2824
  • tab.border#D5CFC4
  • tab.inactiveBackground#F0ECE3
  • tab.inactiveForeground#77736A
  • terminal.ansiBlue#5A7F85
  • terminal.ansiBrightBlue#7FAFB5
  • terminal.ansiBrightCyan#99E2F2
  • terminal.ansiBrightGreen#A5CFA5
  • terminal.ansiBrightMagenta#C9988F
  • terminal.ansiBrightRed#E6786B
  • terminal.ansiBrightYellow#D4C5A9
  • terminal.ansiCyan#5CCFD5
  • terminal.ansiGreen#7FA96D
  • terminal.ansiMagenta#A678A1
  • terminal.ansiRed#C74E39
  • terminal.ansiYellow#C5B9A9
  • terminal.background#FAF7F1
  • terminal.foreground#2A2824
  • titleBar.activeBackground#EDE9E0
  • titleBar.activeForeground#2A2824
  • titleBar.inactiveBackground#F0ECE3
  • titleBar.inactiveForeground#77736A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B8B2A8italic
string, string.quoted, string.template#5CCFD5
keyword, storage.type, storage.modifier#A678A1bold
keyword.operator, punctuation.accessor#D5CFC4
variable, variable.other#2A2824
variable.parameter#D5CFC4italic
entity.name.function, support.function#5CCFD5
meta.function-call#5A7F85
entity.name.class, entity.name.type.class, support.class#A678A1bold
entity.name.type, support.type#5A7F85
entity.name.type.interface#D5CFC4italic
constant.numeric#5CCFD5
constant, constant.language, constant.character#7FA96D
constant.language.boolean#A678A1bold
variable.other.property, support.variable.property#5A7F85
meta.object-literal.key#A678A1
entity.name.tag, punctuation.definition.tag#5CCFD5
entity.other.attribute-name#A678A1italic
punctuation, meta.brace#D5CFC4
string.regexp#7FA96D
constant.character.escape#C74E39
meta.decorator, punctuation.decorator#D5CFC4
invalid, invalid.illegal#C74E39strikethrough
markup.heading, entity.name.section#A678A1bold
markup.bold#D5CFC4bold
markup.italic#C74E39italic
markup.underline.link#5CCFD5
markup.inline.raw, markup.fenced_code#5A7F85
support.type.property-name.json#A678A1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D5CFC4
support.type.property-name.css#5A7F85
support.constant.property-value.css#5CCFD5