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#7B5EA0
  • activityBar.background#F0E9DC
  • activityBar.foreground#5A4638
  • activityBarBadge.background#7B5EA0
  • activityBarBadge.foreground#FAF4E6
  • badge.background#7B5EA0
  • badge.foreground#FAF4E6
  • button.background#DDD5C5
  • button.foreground#5A4638
  • button.hoverBackground#CBBFAF
  • dropdown.background#F5EFDF
  • dropdown.border#E8E0D0
  • dropdown.foreground#5A4638
  • editor.background#FAF4E6
  • editor.findMatchBackground#D99A6E44
  • editor.findMatchHighlightBackground#D99A6E22
  • editor.foreground#5A4638
  • editor.lineHighlightBackground#DDD5C5
  • editor.lineHighlightBorder#7B5EA040
  • editor.selectionBackground#7B5EA04D
  • editor.selectionHighlightBackground#7B5EA033
  • editorBracketMatch.background#7B5EA033
  • editorBracketMatch.border#7B5EA0
  • editorCursor.foreground#D99A6E
  • editorGroupHeader.tabsBackground#F5EFDF
  • editorIndentGuide.activeBackground#C0B4A277
  • editorIndentGuide.background#C0B4A233
  • editorLineNumber.activeForeground#5A4638
  • editorLineNumber.foreground#B3A99D
  • editorWhitespace.foreground#C0B4A2
  • focusBorder#7B5EA0
  • gitDecoration.conflictingResourceForeground#E56C6C
  • gitDecoration.deletedResourceForeground#C45A5A
  • gitDecoration.modifiedResourceForeground#7B5EA0
  • gitDecoration.untrackedResourceForeground#5DA9A7
  • input.background#F5EFDF
  • input.border#E8E0D0
  • input.foreground#5A4638
  • input.placeholderForeground#B3A99D
  • inputOption.activeBorder#7B5EA0
  • list.activeSelectionBackground#DDD5C5
  • list.activeSelectionForeground#5A4638
  • list.focusBackground#DDD5C5
  • list.highlightForeground#7B5EA0
  • list.hoverBackground#DDD5C566
  • minimap.background#FAF4E6
  • minimapSlider.activeBackground#7B5EA066
  • minimapSlider.background#7B5EA022
  • minimapSlider.hoverBackground#7B5EA044
  • panel.background#FAF4E6
  • panel.border#E8E0D0
  • panelTitle.activeBorder#7B5EA0
  • panelTitle.activeForeground#5A4638
  • panelTitle.inactiveForeground#8A735E
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#7B5EA088
  • scrollbarSlider.background#C0B4A233
  • scrollbarSlider.hoverBackground#C0B4A255
  • sideBar.background#F5EFDF
  • sideBar.foreground#5A4638
  • sideBarSectionHeader.background#F0E9DC
  • sideBarSectionHeader.foreground#5A4638
  • sideBarTitle.foreground#7B5EA0
  • statusBar.background#E8E0D0
  • statusBar.debuggingBackground#7B5EA0
  • statusBar.foreground#5A4638
  • statusBar.noFolderBackground#F0E9DC
  • statusBarItem.hoverBackground#DDD5C5
  • tab.activeBackground#E8E0D0
  • tab.activeBorder#7B5EA0
  • tab.activeForeground#5A4638
  • tab.border#F0E9DC
  • tab.inactiveBackground#F5EFDF
  • tab.inactiveForeground#8A735E
  • terminal.ansiBlue#7B5EA0
  • terminal.ansiBrightBlue#9BBFE6
  • terminal.ansiBrightCyan#C0D8CE
  • terminal.ansiBrightGreen#F0C28A
  • terminal.ansiBrightMagenta#C89CD8
  • terminal.ansiBrightRed#E56C6C
  • terminal.ansiBrightYellow#F3D28A
  • terminal.ansiCyan#5DA9A7
  • terminal.ansiGreen#5DA9A7
  • terminal.ansiMagenta#A58EBE
  • terminal.ansiRed#C45A5A
  • terminal.ansiYellow#D99A6E
  • terminal.background#FAF4E6
  • terminal.foreground#5A4638
  • titleBar.activeBackground#F0E9DC
  • titleBar.activeForeground#5A4638
  • titleBar.inactiveBackground#F5EFDF
  • titleBar.inactiveForeground#8A735E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A89F92italic
string, string.quoted, string.template#5DA9A7—
keyword, storage.type, storage.modifier#7B5EA0bold
keyword.operator, punctuation.accessor#D99A6E—
variable, variable.other#5A4638—
variable.parameter#8A735Eitalic
entity.name.function, support.function#7B5EA0—
meta.function-call#D99A6E—
entity.name.class, entity.name.type.class, support.class#6A4B8Fbold
entity.name.type, support.type#5A4638—
entity.name.type.interface#8A6FAFitalic
constant.numeric#5DA9A7—
constant, constant.language, constant.character#C45A5A—
constant.language.boolean#7B5EA0bold
variable.other.property, support.variable.property#8A735E—
meta.object-literal.key#7B5EA0—
entity.name.tag, punctuation.definition.tag#6A4B8F—
entity.other.attribute-name#8A6FAFitalic
punctuation, meta.brace#8A735E—
string.regexp#5DA9A7—
constant.character.escape#C45A5A—
meta.decorator, punctuation.decorator#A58EBE—
invalid, invalid.illegal#C45A5Astrikethrough
markup.heading, entity.name.section#7B5EA0bold
markup.bold#D99A6Ebold
markup.italic#8A735Eitalic
markup.underline.link#7B5EA0—
markup.inline.raw, markup.fenced_code#5DA9A7—
support.type.property-name.json#7B5EA0—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6A4B8F—
support.type.property-name.css#8A735E—
support.constant.property-value.css#D99A6E—
themesmith by CyberBoost - VS Code Theme