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—
themesmith by CyberBoost - VS Code Theme