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#ff00c8
  • activityBar.background#111122
  • activityBar.foreground#ff00c8
  • activityBarBadge.background#ff00c8
  • activityBarBadge.foreground#0b0b13
  • badge.background#ff00c8
  • badge.foreground#0b0b13
  • button.background#ff00c8
  • button.foreground#0b0b13
  • button.hoverBackground#ff45a8
  • dropdown.background#111122
  • dropdown.border#333344
  • dropdown.foreground#c5c6c7
  • editor.background#0b0b13
  • editor.findMatchBackground#00e5ff40
  • editor.findMatchHighlightBackground#00e5ff20
  • editor.foreground#c5c6c7
  • editor.lineHighlightBackground#ffffff0a
  • editor.lineHighlightBorder#ffffff30
  • editor.selectionBackground#ff00c840
  • editor.selectionHighlightBackground#ff00c820
  • editorBracketMatch.background#00e5ff30
  • editorBracketMatch.border#00e5ff
  • editorCursor.foreground#ff00c8
  • editorGroupHeader.tabsBackground#0b0b13
  • editorIndentGuide.activeBackground#ff00c880
  • editorIndentGuide.background#33334444
  • editorLineNumber.activeForeground#ff00c8
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#444444
  • focusBorder#ff00c8
  • gitDecoration.conflictingResourceForeground#ffdd00
  • gitDecoration.deletedResourceForeground#ff6666
  • gitDecoration.modifiedResourceForeground#ff00c8
  • gitDecoration.untrackedResourceForeground#39ff14
  • input.background#111122
  • input.border#333344
  • input.foreground#c5c6c7
  • input.placeholderForeground#777777
  • inputOption.activeBorder#ff00c8
  • list.activeSelectionBackground#ff00c840
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff00c830
  • list.highlightForeground#ff00c8
  • list.hoverBackground#ff00c820
  • minimap.background#0b0b13
  • minimapSlider.activeBackground#ff00c866
  • minimapSlider.background#ff00c822
  • minimapSlider.hoverBackground#ff00c844
  • panel.background#0b0b13
  • panel.border#1a1a2f
  • panelTitle.activeBorder#ff00c8
  • panelTitle.activeForeground#ff00c8
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff00c888
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#0c0c1a
  • sideBar.foreground#b0b2b5
  • sideBarSectionHeader.background#111122
  • sideBarSectionHeader.foreground#ff00c8
  • sideBarTitle.foreground#ff00c8
  • statusBar.background#1a1a2f
  • statusBar.debuggingBackground#ff00c8
  • statusBar.foreground#c5c6c7
  • statusBar.noFolderBackground#111122
  • statusBarItem.hoverBackground#333344
  • tab.activeBackground#1a1a2f
  • tab.activeBorder#ff00c8
  • tab.activeForeground#ff00c8
  • tab.border#000000
  • tab.inactiveBackground#0c0c1a
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#00e5ff
  • terminal.ansiBrightBlue#66d9ff
  • terminal.ansiBrightCyan#33fff5
  • terminal.ansiBrightGreen#66ff66
  • terminal.ansiBrightMagenta#ff66b2
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightYellow#ffff99
  • terminal.ansiCyan#00fff5
  • terminal.ansiGreen#39ff14
  • terminal.ansiMagenta#ff00c8
  • terminal.ansiRed#ff0040
  • terminal.ansiYellow#ffdd00
  • terminal.background#0b0b13
  • terminal.foreground#c5c6c7
  • titleBar.activeBackground#111122
  • titleBar.activeForeground#c5c6c7
  • titleBar.inactiveBackground#0b0b13
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00c853
keyword, storage.type, storage.modifier#ff1744bold
keyword.operator, punctuation.accessor#e0e0e0
variable, variable.other#e0e0e0
variable.parameter#00bcd4italic
entity.name.function, support.function#2196f3
meta.function-call#64b5f6
entity.name.class, entity.name.type.class, support.class#e91e63bold
entity.name.type, support.type#ff9800
entity.name.type.interface#ff9800italic
constant.numeric#ffea00
constant, constant.language, constant.character#ffea00
constant.language.boolean#ffea00bold
variable.other.property, support.variable.property#ff1744
meta.object-literal.key#64b5f6
entity.name.tag, punctuation.definition.tag#ff1744
entity.other.attribute-name#e91e63italic
punctuation, meta.brace#e0e0e0
string.regexp#ff1744
constant.character.escape#e91e63
meta.decorator, punctuation.decorator#ffea00
invalid, invalid.illegal#ff5252strikethrough
markup.heading, entity.name.section#ff1744bold
markup.bold#ff1744bold
markup.italic#e91e63italic
markup.underline.link#2196f3
markup.inline.raw, markup.fenced_code#00c853
support.type.property-name.json#2196f3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff1744
support.type.property-name.css#e91e63
support.constant.property-value.css#00c853
themesmith by CyberBoost - VS Code Theme