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#7FFF00
  • activityBar.background#021800
  • activityBar.foreground#7FFF00
  • activityBarBadge.background#FF6FFF
  • activityBarBadge.foreground#0A1F0A
  • badge.background#FF6FFF
  • badge.foreground#0A1F0A
  • button.background#7FFF00
  • button.foreground#0A1F0A
  • button.hoverBackground#7FFF1477
  • dropdown.background#041C04
  • dropdown.border#FF6FFF
  • dropdown.foreground#D0F0C0
  • editor.background#0A1F0A
  • editor.findMatchBackground#FF6FFF44
  • editor.findMatchHighlightBackground#FF6FFF22
  • editor.foreground#D0F0C0
  • editor.lineHighlightBackground#7FFF1440
  • editor.lineHighlightBorder#7FFF1470
  • editor.selectionBackground#7FFF1477
  • editor.selectionHighlightBackground#7FFF1433
  • editorBracketMatch.background#7FFF1333
  • editorBracketMatch.border#7FFF00
  • editorCursor.foreground#7FFF00
  • editorGroupHeader.tabsBackground#0A1F0A
  • editorIndentGuide.activeBackground#55555588
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#7FFF00
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#7FFF00
  • gitDecoration.conflictingResourceForeground#FF6FFF
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#7FFF00
  • gitDecoration.untrackedResourceForeground#00FFAA
  • input.background#041C04
  • input.border#FF6FFF
  • input.foreground#D0F0C0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#7FFF00
  • list.activeSelectionBackground#7FFF1466
  • list.activeSelectionForeground#0A1F0A
  • list.focusBackground#7FFF1466
  • list.highlightForeground#7FFF00
  • list.hoverBackground#7FFF1444
  • minimap.background#0A1F0A
  • minimapSlider.activeBackground#7FFF1266
  • minimapSlider.background#7FFF1222
  • minimapSlider.hoverBackground#7FFF1244
  • panel.background#0A1F0A
  • panel.border#7FFF00
  • panelTitle.activeBorder#7FFF00
  • panelTitle.activeForeground#7FFF00
  • panelTitle.inactiveForeground#88B788
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#555555CC
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#041C04
  • sideBar.foreground#D0F0C0
  • sideBarSectionHeader.background#021800
  • sideBarSectionHeader.foreground#7FFF00
  • sideBarTitle.foreground#7FFF00
  • statusBar.background#032C03
  • statusBar.debuggingBackground#FF6FFF
  • statusBar.foreground#D0F0C0
  • statusBar.noFolderBackground#032C03
  • statusBarItem.hoverBackground#7FFF1466
  • tab.activeBackground#0A1F0A
  • tab.activeBorder#7FFF00
  • tab.activeForeground#D0F0C0
  • tab.border#0A1F0A
  • tab.inactiveBackground#021800
  • tab.inactiveForeground#88B788
  • terminal.ansiBlue#00AAFF
  • terminal.ansiBrightBlue#55DDFF
  • terminal.ansiBrightCyan#55FFAA
  • terminal.ansiBrightGreen#AAFF55
  • terminal.ansiBrightMagenta#FF88FF
  • terminal.ansiBrightRed#FF8888
  • terminal.ansiBrightYellow#FFFF88
  • terminal.ansiCyan#00FFAA
  • terminal.ansiGreen#7FFF00
  • terminal.ansiMagenta#FF6FFF
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFEA00
  • terminal.background#0A1F0A
  • terminal.foreground#D0F0C0
  • titleBar.activeBackground#021800
  • titleBar.activeForeground#D0F0C0
  • titleBar.inactiveBackground#022200
  • titleBar.inactiveForeground#88B788

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#556655italic
string, string.quoted, string.template#00FFAA
keyword, storage.type, storage.modifier#7FFF00bold
keyword.operator, punctuation.accessor#FF6FFF
variable, variable.other#D0F0C0
variable.parameter#00FFAAitalic
entity.name.function, support.function#88B788
meta.function-call#D0F0C0
entity.name.class, entity.name.type.class, support.class#FF6FFFbold
entity.name.type, support.type#88B788
entity.name.type.interface#00FFAAitalic
constant.numeric#FF6FFF
constant, constant.language, constant.character#00FFAA
constant.language.boolean#7FFF00bold
variable.other.property, support.variable.property#D0F0C0
meta.object-literal.key#88B788
entity.name.tag, punctuation.definition.tag#7FFF00
entity.other.attribute-name#FF6FFFitalic
punctuation, meta.brace#D0F0C0
string.regexp#FF6FFF
constant.character.escape#00FFAA
meta.decorator, punctuation.decorator#FF6FFF
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#7FFF00bold
markup.bold#FF6FFFbold
markup.italic#00FFAAitalic
markup.underline.link#88B788
markup.inline.raw, markup.fenced_code#00FFAA
support.type.property-name.json#7FFF00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6FFF
support.type.property-name.css#88B788
support.constant.property-value.css#00FFAA