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#5B7FAE
  • activityBar.background#C8B090
  • activityBar.foreground#3B3028
  • activityBarBadge.background#5B7FAE
  • activityBarBadge.foreground#FAF3E0
  • badge.background#5B7FAE
  • badge.foreground#FAF3E0
  • button.background#5B7FAE
  • button.foreground#FAF3E0
  • button.hoverBackground#5B7FAE60
  • dropdown.background#F0E5D2
  • dropdown.border#C8B090
  • dropdown.foreground#3B3028
  • editor.background#FAF3E0
  • editor.findMatchBackground#D4A64C33
  • editor.findMatchHighlightBackground#D4A64C22
  • editor.foreground#3B3028
  • editor.lineHighlightBackground#5B7FAE20
  • editor.lineHighlightBorder#5B7FAE80
  • editor.selectionBackground#5B7FAE66
  • editor.selectionHighlightBackground#5B7FAE20
  • editorBracketMatch.background#5B7FAE20
  • editorBracketMatch.border#5B7FAE
  • editorCursor.foreground#5B7FAE
  • editorGroupHeader.tabsBackground#FAF3E0
  • editorIndentGuide.activeBackground#C8B090
  • editorIndentGuide.background#C8B09055
  • editorLineNumber.activeForeground#3B3028
  • editorLineNumber.foreground#9B8C80
  • editorWhitespace.foreground#C8B090
  • focusBorder#5B7FAE
  • gitDecoration.conflictingResourceForeground#D4A64C
  • gitDecoration.deletedResourceForeground#C95F5F
  • gitDecoration.modifiedResourceForeground#5B7FAE
  • gitDecoration.untrackedResourceForeground#6AA85D
  • input.background#F0E5D2
  • input.border#C8B090
  • input.foreground#3B3028
  • input.placeholderForeground#9B8C80
  • inputOption.activeBorder#5B7FAE
  • list.activeSelectionBackground#5B7FAE40
  • list.activeSelectionForeground#FAF3E0
  • list.focusBackground#5B7FAE30
  • list.highlightForeground#5B7FAE
  • list.hoverBackground#5B7FAE20
  • minimap.background#FAF3E0
  • minimapSlider.activeBackground#C8B09066
  • minimapSlider.background#C8B09022
  • minimapSlider.hoverBackground#C8B09044
  • panel.background#FAF3E0
  • panel.border#C8B090
  • panelTitle.activeBorder#5B7FAE
  • panelTitle.activeForeground#5B7FAE
  • panelTitle.inactiveForeground#9B8C80
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#C8B090AA
  • scrollbarSlider.background#C8B09066
  • scrollbarSlider.hoverBackground#C8B09088
  • sideBar.background#FAF3E0
  • sideBar.foreground#3B3028
  • sideBarSectionHeader.background#C8B090
  • sideBarSectionHeader.foreground#FAF3E0
  • sideBarTitle.foreground#D4A64C
  • statusBar.background#C8B090
  • statusBar.debuggingBackground#C95F5F
  • statusBar.foreground#FAF3E0
  • statusBar.noFolderBackground#C8B090
  • statusBarItem.hoverBackground#5B7FAE33
  • tab.activeBackground#FAF3E0
  • tab.activeBorder#5B7FAE
  • tab.activeForeground#3B3028
  • tab.border#C8B090
  • tab.inactiveBackground#F0E5D2
  • tab.inactiveForeground#9B8C80
  • terminal.ansiBlue#5B7FAE
  • terminal.ansiBrightBlue#7B9FCF
  • terminal.ansiBrightCyan#5ED4BB
  • terminal.ansiBrightGreen#8CCF7D
  • terminal.ansiBrightMagenta#C89ABF
  • terminal.ansiBrightRed#E07777
  • terminal.ansiBrightYellow#E2B56A
  • terminal.ansiCyan#3AB9A3
  • terminal.ansiGreen#6AA85D
  • terminal.ansiMagenta#B47EA5
  • terminal.ansiRed#C95F5F
  • terminal.ansiYellow#D4A64C
  • terminal.background#FAF3E0
  • terminal.foreground#3B3028
  • titleBar.activeBackground#C8B090
  • titleBar.activeForeground#FAF3E0
  • titleBar.inactiveBackground#FAF3E0
  • titleBar.inactiveForeground#3B3028

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9B8C80italic
string, string.quoted, string.template#3AB9A3
keyword, storage.type, storage.modifier#5B7FAEbold
keyword.operator, punctuation.accessor#C8B090
variable, variable.other#3B3028
variable.parameter#D4A64Citalic
entity.name.function, support.function#5B7FAE
meta.function-call#D4A64C
entity.name.class, entity.name.type.class, support.class#5B7FAEbold
entity.name.type, support.type#6AA85D
entity.name.type.interface#6AA85Ditalic
constant.numeric#D4A64C
constant, constant.language, constant.character#5B7FAE
constant.language.boolean#D4A64Cbold
variable.other.property, support.variable.property#3AB9A3
meta.object-literal.key#3AB9A3
entity.name.tag, punctuation.definition.tag#5B7FAE
entity.other.attribute-name#D4A64Citalic
punctuation, meta.brace#3B3028
string.regexp#C95F5F
constant.character.escape#3AB9A3
meta.decorator, punctuation.decorator#6AA85D
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#5B7FAEbold
markup.bold#5B7FAEbold
markup.italic#D4A64Citalic
markup.underline.link#D4A64C
markup.inline.raw, markup.fenced_code#C95F5F
support.type.property-name.json#5B7FAE
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4A64C
support.type.property-name.css#3AB9A3
support.constant.property-value.css#D4A64C