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#ffcc00
  • activityBar.background#272740
  • activityBar.foreground#c5c5e0
  • activityBarBadge.background#ff3b30
  • activityBarBadge.foreground#ffffff
  • badge.background#4a90e2
  • badge.foreground#ffffff
  • button.background#ff3b30
  • button.foreground#ffffff
  • button.hoverBackground#ff6655
  • dropdown.background#272740
  • dropdown.border#444466
  • dropdown.foreground#e0e0ff
  • editor.background#1e1e2f
  • editor.findMatchBackground#ff3b30
  • editor.findMatchHighlightBackground#ff6666
  • editor.foreground#e0e0ff
  • editor.lineHighlightBackground#2b2b3a
  • editor.lineHighlightBorder#ffcc00
  • editor.selectionBackground#4a90e2
  • editor.selectionHighlightBackground#3c3c5a
  • editorBracketMatch.background#3c3c5a
  • editorBracketMatch.border#ffcc00
  • editorCursor.foreground#ffcc00
  • editorGroupHeader.tabsBackground#272740
  • editorIndentGuide.activeBackground#ffcc00
  • editorIndentGuide.background#444466
  • editorLineNumber.activeForeground#ffcc00
  • editorLineNumber.foreground#777799
  • editorWhitespace.foreground#555577
  • focusBorder#ffcc00
  • gitDecoration.conflictingResourceForeground#ff00ff
  • gitDecoration.deletedResourceForeground#ff3b30
  • gitDecoration.modifiedResourceForeground#ffcc00
  • gitDecoration.untrackedResourceForeground#7ed321
  • input.background#272740
  • input.border#444466
  • input.foreground#e0e0ff
  • input.placeholderForeground#777799
  • inputOption.activeBorder#ffcc00
  • list.activeSelectionBackground#4a90e2
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3c3c5a
  • list.highlightForeground#ffcc00
  • list.hoverBackground#3c3c5a
  • minimap.background#1e1e2f
  • minimapSlider.activeBackground#ffcc00
  • minimapSlider.background#444466
  • minimapSlider.hoverBackground#555577
  • panel.background#1e1e2f
  • panel.border#272740
  • panelTitle.activeBorder#ff3b30
  • panelTitle.activeForeground#ffcc00
  • panelTitle.inactiveForeground#777799
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ffcc00
  • scrollbarSlider.background#444466
  • scrollbarSlider.hoverBackground#555577
  • sideBar.background#222233
  • sideBar.foreground#c0c0e0
  • sideBarSectionHeader.background#272740
  • sideBarSectionHeader.foreground#ffcc00
  • sideBarTitle.foreground#e0e0ff
  • statusBar.background#272740
  • statusBar.debuggingBackground#4a90e2
  • statusBar.foreground#e0e0ff
  • statusBar.noFolderBackground#272740
  • statusBarItem.hoverBackground#3c3c5a
  • tab.activeBackground#1e1e2f
  • tab.activeBorder#ff3b30
  • tab.activeForeground#ffcc00
  • tab.border#1e1e2f
  • tab.inactiveBackground#272740
  • tab.inactiveForeground#a0a0b0
  • terminal.ansiBlue#4a90e2
  • terminal.ansiBrightBlue#80bfff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#a8e68c
  • terminal.ansiBrightMagenta#ff80ff
  • terminal.ansiBrightRed#ff7666
  • terminal.ansiBrightYellow#fff566
  • terminal.ansiCyan#00d2ff
  • terminal.ansiGreen#7ed321
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff3b30
  • terminal.ansiYellow#ffcc00
  • terminal.background#1e1e2f
  • terminal.foreground#e0e0ff
  • titleBar.activeBackground#272740
  • titleBar.activeForeground#e0e0ff
  • titleBar.inactiveBackground#1e1e2f
  • titleBar.inactiveForeground#a0a0b0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777799italic
string, string.quoted, string.template#7ed321
keyword, storage.type, storage.modifier#4a90e2bold
keyword.operator, punctuation.accessor#00d2ff
variable, variable.other#e0e0ff
variable.parameter#ff9966italic
entity.name.function, support.function#ffcc00
meta.function-call#ffd966
entity.name.class, entity.name.type.class, support.class#ff00ffbold
entity.name.type, support.type#00d2ff
entity.name.type.interface#00d2ffitalic
constant.numeric#b184eb
constant, constant.language, constant.character#ff9966
constant.language.boolean#ff3b30bold
variable.other.property, support.variable.property#00d2ff
meta.object-literal.key#ff80ff
entity.name.tag, punctuation.definition.tag#4a90e2
entity.other.attribute-name#7ed321italic
punctuation, meta.brace#777799
string.regexp#ff9966
constant.character.escape#ff3b30
meta.decorator, punctuation.decorator#ff00ff
invalid, invalid.illegal#ff0000strikethrough
markup.heading, entity.name.section#ffcc00bold
markup.bold#ffcc00bold
markup.italic#ff80ffitalic
markup.underline.link#4a90e2
markup.inline.raw, markup.fenced_code#7ed321
support.type.property-name.json#ff9966
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b184eb
support.type.property-name.css#00d2ff
support.constant.property-value.css#ff80ff