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#CEFF00
  • activityBar.background#121212
  • activityBar.foreground#CCCCCC
  • activityBarBadge.background#CEFF00
  • activityBarBadge.foreground#000000
  • badge.background#CEFF00
  • badge.foreground#000000
  • button.background#2C3E00
  • button.foreground#E0E0E0
  • button.hoverBackground#3F4F00
  • dropdown.background#151515
  • dropdown.border#333333
  • dropdown.foreground#E0E0E0
  • editor.background#0A0A0A
  • editor.findMatchBackground#CEFF00
  • editor.findMatchHighlightBackground#A6C600
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#0F0F0F
  • editor.lineHighlightBorder#222222
  • editor.selectionBackground#2C3E00
  • editor.selectionHighlightBackground#3F4F00
  • editorBracketMatch.background#003300
  • editorBracketMatch.border#CEFF00
  • editorCursor.foreground#CEFF00
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#CEFF00
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#CEFF00
  • gitDecoration.conflictingResourceForeground#FF00FF
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#CEFF00
  • gitDecoration.untrackedResourceForeground#A6FF00
  • input.background#151515
  • input.border#333333
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#CEFF00
  • list.activeSelectionBackground#2C3E00
  • list.activeSelectionForeground#E0E0E0
  • list.focusBackground#2C3E00
  • list.highlightForeground#CEFF00
  • list.hoverBackground#202020
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#777777
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#555555
  • panel.background#0A0A0A
  • panel.border#222222
  • panelTitle.activeBorder#CEFF00
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#777777
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#151515
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#CEFF00
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#141414
  • statusBar.debuggingBackground#2B2B2B
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#0A0A0A
  • statusBarItem.hoverBackground#222222
  • tab.activeBackground#0A0A0A
  • tab.activeBorder#CEFF00
  • tab.activeForeground#E0E0E0
  • tab.border#222222
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#00A2FF
  • terminal.ansiBrightBlue#66B2FF
  • terminal.ansiBrightCyan#66FFE5
  • terminal.ansiBrightGreen#CCFF66
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00FFD5
  • terminal.ansiGreen#A6FF00
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFEA00
  • terminal.background#0A0A0A
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#FFB86C
keyword, storage.type, storage.modifier#CEFF00bold
keyword.operator, punctuation.accessor#CEFF00
variable, variable.other#E0E0E0
variable.parameter#A6FF00italic
entity.name.function, support.function#FFB86C
meta.function-call#FFB86C
entity.name.class, entity.name.type.class, support.class#CEFF00bold
entity.name.type, support.type#A6FF00
entity.name.type.interface#A6FF00italic
constant.numeric#FFEA00
constant, constant.language, constant.character#FFEA00
constant.language.boolean#CEFF00bold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#CEFF00
entity.name.tag, punctuation.definition.tag#FF5555
entity.other.attribute-name#FFB86Citalic
punctuation, meta.brace#CCCCCC
string.regexp#FFA500
constant.character.escape#FF5555
meta.decorator, punctuation.decorator#FFB86C
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#CEFF00bold
markup.bold#CEFF00bold
markup.italic#CEFF00italic
markup.underline.link#00A2FF
markup.inline.raw, markup.fenced_code#A6FF00
support.type.property-name.json#CEFF00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFA500
support.type.property-name.css#FFB86C
support.constant.property-value.css#A6FF00