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#00E5FF
  • activityBar.background#00162B
  • activityBar.foreground#00E5FF
  • activityBarBadge.background#00E5FF
  • activityBarBadge.foreground#001021
  • badge.background#00E5FF
  • badge.foreground#001021
  • button.background#002839
  • button.foreground#FFFFFF
  • button.hoverBackground#003344
  • dropdown.background#00162B
  • dropdown.border#002839
  • dropdown.foreground#E0F0FF
  • editor.background#001021
  • editor.findMatchBackground#00E5FF30
  • editor.findMatchHighlightBackground#00E5FF15
  • editor.foreground#E0F0FF
  • editor.lineHighlightBackground#00335580
  • editor.lineHighlightBorder#00E5FF30
  • editor.selectionBackground#00E5FF40
  • editor.selectionHighlightBackground#00E5FF20
  • editorBracketMatch.background#00E5FF20
  • editorBracketMatch.border#00E5FF
  • editorCursor.foreground#00E5FF
  • editorGroupHeader.tabsBackground#001021
  • editorIndentGuide.activeBackground#00E5FF60
  • editorIndentGuide.background#00334440
  • editorLineNumber.activeForeground#00E5FF
  • editorLineNumber.foreground#445566
  • editorWhitespace.foreground#003344
  • focusBorder#00E5FF
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#A8FF00
  • input.background#00162B
  • input.border#002839
  • input.foreground#E0F0FF
  • input.placeholderForeground#445566
  • inputOption.activeBorder#00E5FF
  • list.activeSelectionBackground#002839
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#002839
  • list.highlightForeground#00E5FF
  • list.hoverBackground#00283966
  • minimap.background#001021
  • minimapSlider.activeBackground#00E5FF60
  • minimapSlider.background#00E5FF20
  • minimapSlider.hoverBackground#00E5FF40
  • panel.background#001021
  • panel.border#002839
  • panelTitle.activeBorder#00E5FF
  • panelTitle.activeForeground#00E5FF
  • panelTitle.inactiveForeground#A8C8FF
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#00E5FF80
  • scrollbarSlider.background#00334440
  • scrollbarSlider.hoverBackground#00334480
  • sideBar.background#00162B
  • sideBar.foreground#A8C8FF
  • sideBarSectionHeader.background#00162B
  • sideBarSectionHeader.foreground#00E5FF
  • sideBarTitle.foreground#00E5FF
  • statusBar.background#00162B
  • statusBar.debuggingBackground#FF00E5
  • statusBar.foreground#E0F0FF
  • statusBar.noFolderBackground#00162B
  • statusBarItem.hoverBackground#003344
  • tab.activeBackground#002839
  • tab.activeBorder#00E5FF
  • tab.activeForeground#FFFFFF
  • tab.border#001021
  • tab.inactiveBackground#00162B
  • tab.inactiveForeground#A8C8FF
  • terminal.ansiBlue#00E5FF
  • terminal.ansiBrightBlue#7FFFD4
  • terminal.ansiBrightCyan#7FFFD4
  • terminal.ansiBrightGreen#C0FF00
  • terminal.ansiBrightMagenta#FF77FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFEE88
  • terminal.ansiCyan#00FFC4
  • terminal.ansiGreen#A8FF00
  • terminal.ansiMagenta#FF00E5
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFD700
  • terminal.background#001021
  • terminal.foreground#E0F0FF
  • titleBar.activeBackground#00162B
  • titleBar.activeForeground#E0F0FF
  • titleBar.inactiveBackground#001021
  • titleBar.inactiveForeground#A8C8FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555F7Aitalic
string, string.quoted, string.template#A8FF00
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#FF00E5
variable, variable.other#E0F0FF
variable.parameter#FFD700italic
entity.name.function, support.function#00FFC4
meta.function-call#A8C8FF
entity.name.class, entity.name.type.class, support.class#FF00E5bold
entity.name.type, support.type#FF00E5
entity.name.type.interface#FF00E5italic
constant.numeric#FFD700
constant, constant.language, constant.character#FFD700
constant.language.boolean#FFD700bold
variable.other.property, support.variable.property#A8C8FF
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#00E5FF
entity.other.attribute-name#FF00E5italic
punctuation, meta.brace#00E5FF
string.regexp#FF5555
constant.character.escape#FF00E5
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FFD700bold
markup.italic#FF00E5italic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#A8FF00
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD700
support.type.property-name.css#00E5FF
support.constant.property-value.css#A8FF00