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#C5944A
  • activityBar.background#F5F4EA
  • activityBar.foreground#C5944A
  • activityBarBadge.background#C5944A
  • activityBarBadge.foreground#FFFCF5
  • badge.background#C5944A
  • badge.foreground#FFFCF5
  • button.background#C5944A
  • button.foreground#FFFCF5
  • button.hoverBackground#D6A55A
  • dropdown.background#FFFFFF
  • dropdown.border#C0C0B0
  • dropdown.foreground#2C3E5A
  • editor.background#FFFCF5
  • editor.findMatchBackground#6A8C5A44
  • editor.findMatchHighlightBackground#6A8C5A22
  • editor.foreground#2C3E5A
  • editor.lineHighlightBackground#F0EFE5
  • editor.lineHighlightBorder#E0DFD5
  • editor.selectionBackground#C5944A40
  • editor.selectionHighlightBackground#C5944A33
  • editorBracketMatch.background#C5944A22
  • editorBracketMatch.border#C5944A
  • editorCursor.foreground#C5944A
  • editorGroupHeader.tabsBackground#F7F6ED
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#C0C0B0
  • editorLineNumber.activeForeground#C5944A
  • editorLineNumber.foreground#B2B2A8
  • editorWhitespace.foreground#C0C0B0
  • focusBorder#C5944A
  • gitDecoration.conflictingResourceForeground#D4A030
  • gitDecoration.deletedResourceForeground#B03A3A
  • gitDecoration.modifiedResourceForeground#C5944A
  • gitDecoration.untrackedResourceForeground#7A9A4A
  • input.background#FFFFFF
  • input.border#C0C0B0
  • input.foreground#2C3E5A
  • input.placeholderForeground#A8A8A8
  • inputOption.activeBorder#C5944A
  • list.activeSelectionBackground#C5944A
  • list.activeSelectionForeground#FFFCF5
  • list.focusBackground#D0D9E5
  • list.highlightForeground#C5944A
  • list.hoverBackground#E0E8F0
  • minimap.background#F9F8EE
  • minimapSlider.activeBackground#6A8C5B99
  • minimapSlider.background#6A8C5B33
  • minimapSlider.hoverBackground#6A8C5B66
  • panel.background#FFFCF5
  • panel.border#E0DFD5
  • panelTitle.activeBorder#C5944A
  • panelTitle.activeForeground#C5944A
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#C5944A88
  • scrollbarSlider.background#C0C0B844
  • scrollbarSlider.hoverBackground#C0C0B888
  • sideBar.background#F9F8EE
  • sideBar.foreground#2C3E5A
  • sideBarSectionHeader.background#F0EFE5
  • sideBarSectionHeader.foreground#C5944A
  • sideBarTitle.foreground#C5944A
  • statusBar.background#6A8C5A
  • statusBar.debuggingBackground#D48A34
  • statusBar.foreground#FFFCF5
  • statusBar.noFolderBackground#E0DFD5
  • statusBarItem.hoverBackground#D4D3C9
  • tab.activeBackground#FFFCF5
  • tab.activeBorder#C5944A
  • tab.activeForeground#2C3E5A
  • tab.border#E0DFD5
  • tab.inactiveBackground#F7F6ED
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#C5944A
  • terminal.ansiBrightBlue#D1AB73
  • terminal.ansiBrightCyan#5ED2D2
  • terminal.ansiBrightGreen#85C677
  • terminal.ansiBrightMagenta#D19ECF
  • terminal.ansiBrightRed#D55656
  • terminal.ansiBrightYellow#D9BC62
  • terminal.ansiCyan#3A9E9E
  • terminal.ansiGreen#7A9A4A
  • terminal.ansiMagenta#B07D9E
  • terminal.ansiRed#B03A3A
  • terminal.ansiYellow#D4A030
  • terminal.background#FFFCF5
  • terminal.foreground#2C3E5A
  • titleBar.activeBackground#F2F1E9
  • titleBar.activeForeground#2C3E5A
  • titleBar.inactiveBackground#F5F4EE
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
string, string.quoted, string.template#3A9E9E
keyword, storage.type, storage.modifier#C5944Abold
keyword.operator, punctuation.accessor#6A8C5A
variable, variable.other#2C3E5A
variable.parameter#6A8C5Aitalic
entity.name.function, support.function#C5944A
meta.function-call#6A8C5A
entity.name.class, entity.name.type.class, support.class#C5944Abold
entity.name.type, support.type#C5944A
entity.name.type.interface#C5944Aitalic
constant.numeric#D4A030
constant, constant.language, constant.character#6A8C5A
constant.language.boolean#6A8C5Abold
variable.other.property, support.variable.property#C5944A
meta.object-literal.key#C5944A
entity.name.tag, punctuation.definition.tag#C5944A
entity.other.attribute-name#6A8C5Aitalic
punctuation, meta.brace#7A7A73
string.regexp#D4A030
constant.character.escape#B03A3A
meta.decorator, punctuation.decorator#C5A34F
invalid, invalid.illegal#B03A3Astrikethrough
markup.heading, entity.name.section#C5944Abold
markup.bold#6A8C5Abold
markup.italic#7A7A73italic
markup.underline.link#3A9E9E
markup.inline.raw, markup.fenced_code#3A9E9E
support.type.property-name.json#C5944A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C5A34F
support.type.property-name.css#C5944A
support.constant.property-value.css#3A9E9E