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#ffde00
  • activityBar.background#252526
  • activityBar.foreground#ffde00
  • activityBarBadge.background#ffde00
  • activityBarBadge.foreground#1e1e1e
  • badge.background#ffb800
  • badge.foreground#1e1e1e
  • button.background#ffde00
  • button.foreground#1e1e1e
  • button.hoverBackground#ffd700
  • dropdown.background#3c3c3c
  • dropdown.border#555555
  • dropdown.foreground#d4d4d4
  • editor.background#1e1e1e
  • editor.findMatchBackground#ffb800
  • editor.findMatchHighlightBackground#ffb80080
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#2a2a2a
  • editor.lineHighlightBorder#ffde00
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#3a3d41
  • editorBracketMatch.background#3a3d41
  • editorBracketMatch.border#ffde00
  • editorCursor.foreground#ffde00
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorIndentGuide.activeBackground#ffde00
  • editorIndentGuide.background#2d2d2d
  • editorLineNumber.activeForeground#ffde00
  • editorLineNumber.foreground#858585
  • editorWhitespace.foreground#3b3a32
  • focusBorder#ffde00
  • gitDecoration.conflictingResourceForeground#ffb800
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.modifiedResourceForeground#ffde00
  • gitDecoration.untrackedResourceForeground#00ffff
  • input.background#3c3c3c
  • input.border#555555
  • input.foreground#d4d4d4
  • input.placeholderForeground#808080
  • inputOption.activeBorder#ffde00
  • list.activeSelectionBackground#264f78
  • list.activeSelectionForeground#ffde00
  • list.focusBackground#264f78
  • list.highlightForeground#ffde00
  • list.hoverBackground#2a2d2e
  • minimap.background#1e1e1e
  • minimapSlider.activeBackground#7e7e7e
  • minimapSlider.background#5a5a5a
  • minimapSlider.hoverBackground#6c6c6c
  • panel.background#252526
  • panel.border#000000
  • panelTitle.activeBorder#ffde00
  • panelTitle.activeForeground#ffde00
  • panelTitle.inactiveForeground#808080
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#6c6c6c
  • scrollbarSlider.background#484848
  • scrollbarSlider.hoverBackground#5a5a5a
  • sideBar.background#252526
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#1e1e1e
  • sideBarSectionHeader.foreground#ffde00
  • sideBarTitle.foreground#ffde00
  • statusBar.background#333333
  • statusBar.debuggingBackground#ffb800
  • statusBar.foreground#ffde00
  • statusBar.noFolderBackground#333333
  • statusBarItem.hoverBackground#444444
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#ffde00
  • tab.activeForeground#ffde00
  • tab.border#000000
  • tab.inactiveBackground#2d2d2d
  • tab.inactiveForeground#808080
  • terminal.ansiBlue#007acc
  • terminal.ansiBrightBlue#3794ff
  • terminal.ansiBrightCyan#5ff0ff
  • terminal.ansiBrightGreen#6cfc84
  • terminal.ansiBrightMagenta#ff84ff
  • terminal.ansiBrightRed#ff6f6f
  • terminal.ansiBrightYellow#fff173
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#d670d6
  • terminal.ansiRed#ff0000
  • terminal.ansiYellow#ffde00
  • terminal.background#1e1e1e
  • terminal.foreground#d4d4d4
  • titleBar.activeBackground#1e1e1e
  • titleBar.activeForeground#ffde00
  • titleBar.inactiveBackground#1e1e1e
  • titleBar.inactiveForeground#808080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a9955italic
string, string.quoted, string.template#ffb800
keyword, storage.type, storage.modifier#00ffffbold
keyword.operator, punctuation.accessor#ff77ff
variable, variable.other#9cdcfe
variable.parameter#9cdcfeitalic
entity.name.function, support.function#ffde00
meta.function-call#ffb800
entity.name.class, entity.name.type.class, support.class#ff77ffbold
entity.name.type, support.type#00ffff
entity.name.type.interface#d670d6italic
constant.numeric#ffb800
constant, constant.language, constant.character#6a9955
constant.language.boolean#d670d6bold
variable.other.property, support.variable.property#00ffff
meta.object-literal.key#ff77ff
entity.name.tag, punctuation.definition.tag#ff0000
entity.other.attribute-name#6a9955italic
punctuation, meta.brace#d4d4d4
string.regexp#00ffff
constant.character.escape#d670d6
meta.decorator, punctuation.decorator#ff77ff
invalid, invalid.illegal#ff6f6fstrikethrough
markup.heading, entity.name.section#ffde00bold
markup.bold#ffb800bold
markup.italic#ff77ffitalic
markup.underline.link#00ffff
markup.inline.raw, markup.fenced_code#ff77ff
support.type.property-name.json#00ffff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff77ff
support.type.property-name.css#ffb800
support.constant.property-value.css#00ffff
themesmith by CyberBoost - VS Code Theme