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#A678C8
  • activityBar.background#F0E9E0
  • activityBar.foreground#A678C8
  • activityBarBadge.background#A678C8
  • activityBarBadge.foreground#FAF5EF
  • badge.background#C9A66B
  • badge.foreground#FAF5EF
  • button.background#C9A66B
  • button.foreground#FAF5EF
  • button.hoverBackground#C9A66BCC
  • dropdown.background#F0E9E0
  • dropdown.border#D8C4B3
  • dropdown.foreground#2F2F2F
  • editor.background#FAF5EF
  • editor.findMatchBackground#F5B56244
  • editor.findMatchHighlightBackground#F5B56222
  • editor.foreground#2F2F2F
  • editor.lineHighlightBackground#C9A66B33
  • editor.lineHighlightBorder#C9A66B
  • editor.selectionBackground#A678C844
  • editor.selectionHighlightBackground#A678C822
  • editorBracketMatch.background#A678C822
  • editorBracketMatch.border#A678C8
  • editorCursor.foreground#2F2F2F
  • editorGroupHeader.tabsBackground#FAF5EF
  • editorIndentGuide.activeBackground#D8C4B3
  • editorIndentGuide.background#D8C4B444
  • editorLineNumber.activeForeground#2F2F2F
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#D8C4B3
  • focusBorder#A678C8
  • gitDecoration.conflictingResourceForeground#F5B562
  • gitDecoration.deletedResourceForeground#C95F5F
  • gitDecoration.modifiedResourceForeground#66A5A1
  • gitDecoration.untrackedResourceForeground#B6C877
  • input.background#F0E9E0
  • input.border#D8C4B3
  • input.foreground#2F2F2F
  • input.placeholderForeground#777777
  • inputOption.activeBorder#A678C8
  • list.activeSelectionBackground#C9A66B44
  • list.activeSelectionForeground#FAF5EF
  • list.focusBackground#C9A66B44
  • list.highlightForeground#A678C8
  • list.hoverBackground#C9A66B22
  • minimap.background#FAF5EF
  • minimapSlider.activeBackground#D8C4B466
  • minimapSlider.background#D8C4B422
  • minimapSlider.hoverBackground#D8C4B444
  • panel.background#FAF5EF
  • panel.border#D8C4B3
  • panelTitle.activeBorder#A678C8
  • panelTitle.activeForeground#2F2F2F
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D8C4B8CC
  • scrollbarSlider.background#D8C4B444
  • scrollbarSlider.hoverBackground#D8C4B488
  • sideBar.background#F0E9E0
  • sideBar.foreground#2F2F2F
  • sideBarSectionHeader.background#F0E9E0
  • sideBarSectionHeader.foreground#A678C8
  • sideBarTitle.foreground#A678C8
  • statusBar.background#C9A66B
  • statusBar.debuggingBackground#F5B562
  • statusBar.foreground#FAF5EF
  • statusBar.noFolderBackground#F0E9E0
  • statusBarItem.hoverBackground#C9A66B44
  • tab.activeBackground#FAF5EF
  • tab.activeBorder#A678C8
  • tab.activeForeground#2F2F2F
  • tab.border#D8C4B3
  • tab.inactiveBackground#F0E9E0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#66A5A1
  • terminal.ansiBrightBlue#85C2BF
  • terminal.ansiBrightCyan#7CCED5
  • terminal.ansiBrightGreen#C9DA93
  • terminal.ansiBrightMagenta#CFA6D7
  • terminal.ansiBrightRed#E07A7A
  • terminal.ansiBrightYellow#DEBC84
  • terminal.ansiCyan#5FA8B0
  • terminal.ansiGreen#B6C877
  • terminal.ansiMagenta#A678C8
  • terminal.ansiRed#C95F5F
  • terminal.ansiYellow#C9A66B
  • terminal.background#FAF5EF
  • terminal.foreground#2F2F2F
  • titleBar.activeBackground#E7DCD5
  • titleBar.activeForeground#2F2F2F
  • titleBar.inactiveBackground#FAF5EF
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8B9D4italic
string, string.quoted, string.template#6ED3D1
keyword, storage.type, storage.modifier#F7C873bold
keyword.operator, punctuation.accessor#D899C7
variable, variable.other#2A2A2A
variable.parameter#A8B9D4italic
entity.name.function, support.function#F7C873
meta.function-call#6ED3D1
entity.name.class, entity.name.type.class, support.class#D899C7bold
entity.name.type, support.type#6ED3D1
entity.name.type.interface#6ED3D1italic
constant.numeric#F7C873
constant, constant.language, constant.character#D899C7
constant.language.boolean#F7C873bold
variable.other.property, support.variable.property#6ED3D1
meta.object-literal.key#D899C7
entity.name.tag, punctuation.definition.tag#D899C7
entity.other.attribute-name#F7C873italic
punctuation, meta.brace#2A2A2A
string.regexp#F7C873
constant.character.escape#D899C7
meta.decorator, punctuation.decorator#6ED3D1
invalid, invalid.illegal#E06666strikethrough
markup.heading, entity.name.section#D899C7bold
markup.bold#F7C873bold
markup.italic#A8B9D4italic
markup.underline.link#6ED3D1
markup.inline.raw, markup.fenced_code#6ED3D1
support.type.property-name.json#D899C7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F7C873
support.type.property-name.css#6ED3D1
support.constant.property-value.css#D899C7
themesmith by CyberBoost - VS Code Theme