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#6a0dad
  • activityBar.background#f2e9f9
  • activityBar.foreground#6a0dad
  • activityBarBadge.background#ff6f61
  • activityBarBadge.foreground#fafaff
  • badge.background#ff6f61
  • badge.foreground#fafaff
  • button.background#ff6f61
  • button.foreground#ffffff
  • button.hoverBackground#ff8a75
  • dropdown.background#ffffff
  • dropdown.border#d3cde0
  • dropdown.foreground#2b2b2b
  • editor.background#fafaff
  • editor.findMatchBackground#ff6f6133
  • editor.findMatchHighlightBackground#ff6f6180
  • editor.foreground#2b2b2b
  • editor.lineHighlightBackground#eae6f5
  • editor.lineHighlightBorder#d3cde0
  • editor.selectionBackground#ff6f6133
  • editor.selectionHighlightBackground#ff6f6180
  • editorBracketMatch.background#ff6f6100
  • editorBracketMatch.border#ff6f61
  • editorCursor.foreground#ff6f61
  • editorGroupHeader.tabsBackground#fafaff
  • editorIndentGuide.activeBackground#b0b0b0
  • editorIndentGuide.background#c0c0c0
  • editorLineNumber.activeForeground#ff6f61
  • editorLineNumber.foreground#828282
  • editorWhitespace.foreground#b0b0b0
  • focusBorder#6a0dad
  • gitDecoration.conflictingResourceForeground#ffd700
  • gitDecoration.deletedResourceForeground#ff6f61
  • gitDecoration.modifiedResourceForeground#ff6f61
  • gitDecoration.untrackedResourceForeground#39ff14
  • input.background#ffffff
  • input.border#d3cde0
  • input.foreground#2b2b2b
  • input.placeholderForeground#828282
  • inputOption.activeBorder#6a0dad
  • list.activeSelectionBackground#d3cde0
  • list.activeSelectionForeground#2b2b2b
  • list.focusBackground#eae6f5
  • list.highlightForeground#ff6f61
  • list.hoverBackground#eae6f5
  • minimap.background#f0f0f0
  • minimapSlider.activeBackground#ff6f6166
  • minimapSlider.background#ff6f6122
  • minimapSlider.hoverBackground#ff6f6144
  • panel.background#fafaff
  • panel.border#d3cde0
  • panelTitle.activeBorder#6a0dad
  • panelTitle.activeForeground#ff6f61
  • panelTitle.inactiveForeground#828282
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#ff6f6188
  • scrollbarSlider.background#c0c0c044
  • scrollbarSlider.hoverBackground#c0c0c088
  • sideBar.background#f5f0fa
  • sideBar.foreground#2b2b2b
  • sideBarSectionHeader.background#f2e9f9
  • sideBarSectionHeader.foreground#6a0dad
  • sideBarTitle.foreground#6a0dad
  • statusBar.background#fafaff
  • statusBar.debuggingBackground#ff6f61
  • statusBar.foreground#2b2b2b
  • statusBar.noFolderBackground#f2e9f9
  • statusBarItem.hoverBackground#ff6f6133
  • tab.activeBackground#ffffff
  • tab.activeBorder#6a0dad
  • tab.activeForeground#2b2b2b
  • tab.border#d3cde0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#828282
  • terminal.ansiBlue#4b6bff
  • terminal.ansiBrightBlue#6d85ff
  • terminal.ansiBrightCyan#73e7ff
  • terminal.ansiBrightGreen#5fff5f
  • terminal.ansiBrightMagenta#e05fe0
  • terminal.ansiBrightRed#ff8a75
  • terminal.ansiBrightYellow#ffea7f
  • terminal.ansiCyan#5fd7ff
  • terminal.ansiGreen#39ff14
  • terminal.ansiMagenta#d147d1
  • terminal.ansiRed#ff6f61
  • terminal.ansiYellow#ffd700
  • terminal.background#fafaff
  • terminal.foreground#2b2b2b
  • titleBar.activeBackground#f2e9f9
  • titleBar.activeForeground#2b2b2b
  • titleBar.inactiveBackground#fafaff
  • titleBar.inactiveForeground#828282

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e6e6eitalic
string, string.quoted, string.template#39ff14
keyword, storage.type, storage.modifier#ff6f61bold
keyword.operator, punctuation.accessor#d147d1
variable, variable.other#2b2b2b
variable.parameter#ff8a75italic
entity.name.function, support.function#4b6bff
meta.function-call#6d85ff
entity.name.class, entity.name.type.class, support.class#d147d1bold
entity.name.type, support.type#5fd7ff
entity.name.type.interface#5fd7ffitalic
constant.numeric#ffd700
constant, constant.language, constant.character#ff8a75
constant.language.boolean#ffd700bold
variable.other.property, support.variable.property#ff6f61
meta.object-literal.key#4b6bff
entity.name.tag, punctuation.definition.tag#ff6f61
entity.other.attribute-name#e05fe0italic
punctuation, meta.brace#828282
string.regexp#5fd7ff
constant.character.escape#e05fe0
meta.decorator, punctuation.decorator#ffea7f
invalid, invalid.illegal#ff6f61strikethrough
markup.heading, entity.name.section#ff6f61bold
markup.bold#ffd700bold
markup.italic#e05fe0italic
markup.underline.link#4b6bff
markup.inline.raw, markup.fenced_code#39ff14
support.type.property-name.json#4b6bff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e05fe0
support.type.property-name.css#5fd7ff
support.constant.property-value.css#ffea7f
themesmith by CyberBoost - VS Code Theme