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#39FF14
  • activityBar.background#0A0A0A
  • activityBar.foreground#39FF14
  • activityBarBadge.background#39FF14
  • activityBarBadge.foreground#0A0A0A
  • badge.background#39FF00
  • badge.foreground#001F0F
  • button.background#00331F
  • button.foreground#D0D0D0
  • button.hoverBackground#005026
  • dropdown.background#001F0F
  • dropdown.border#00331F
  • dropdown.foreground#D0D0D0
  • editor.background#0A0A0A
  • editor.findMatchBackground#39FF1444
  • editor.findMatchHighlightBackground#39FF1422
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#001F0F66
  • editor.lineHighlightBorder#39FF0140
  • editor.selectionBackground#00331F80
  • editor.selectionHighlightBackground#00331F40
  • editorBracketMatch.background#39FF0033
  • editorBracketMatch.border#39FF00
  • editorCursor.foreground#39FF14
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorIndentGuide.activeBackground#39FF0088
  • editorIndentGuide.background#00331F44
  • editorLineNumber.activeForeground#39FF00
  • editorLineNumber.foreground#00331F
  • editorWhitespace.foreground#00331F
  • focusBorder#39FF00
  • gitDecoration.conflictingResourceForeground#FF6565
  • gitDecoration.deletedResourceForeground#FF3B30
  • gitDecoration.modifiedResourceForeground#39FF00
  • gitDecoration.untrackedResourceForeground#A7FF66
  • input.background#001F0F
  • input.border#00331F
  • input.foreground#D0D0D0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#39FF00
  • list.activeSelectionBackground#00331F
  • list.activeSelectionForeground#39FF00
  • list.focusBackground#00331F
  • list.highlightForeground#39FF00
  • list.hoverBackground#001F0F66
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#39FF0066
  • minimapSlider.background#39FF0022
  • minimapSlider.hoverBackground#39FF0044
  • panel.background#0A0A0A
  • panel.border#00331F
  • panelTitle.activeBorder#39FF00
  • panelTitle.activeForeground#39FF00
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#39FF0088
  • scrollbarSlider.background#00331F44
  • scrollbarSlider.hoverBackground#00331F88
  • sideBar.background#0A0A0A
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#39FF14
  • sideBarTitle.foreground#39FF14
  • statusBar.background#001F0F
  • statusBar.debuggingBackground#39FF14
  • statusBar.foreground#39FF14
  • statusBar.noFolderBackground#0A0A0A
  • statusBarItem.hoverBackground#00331F
  • tab.activeBackground#001F0F
  • tab.activeBorder#39FF14
  • tab.activeForeground#39FF14
  • tab.border#0A0A0A
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#004F9D
  • terminal.ansiBrightBlue#0066FF
  • terminal.ansiBrightCyan#00D9FF
  • terminal.ansiBrightGreen#A7FF66
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF6565
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00A3B0
  • terminal.ansiGreen#39FF14
  • terminal.ansiMagenta#B200FF
  • terminal.ansiRed#FF3B30
  • terminal.ansiYellow#FFEA00
  • terminal.background#0A0A0A
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#FFEA00—
keyword, storage.type, storage.modifier#39FF14bold
keyword.operator, punctuation.accessor#39FF14—
variable, variable.other#D0D0D0—
variable.parameter#00A3B0italic
entity.name.function, support.function#39FF14—
meta.function-call#A0A0A0—
entity.name.class, entity.name.type.class, support.class#39FF14bold
entity.name.type, support.type#00A3B0—
entity.name.type.interface#B200FFitalic
constant.numeric#A7FF66—
constant, constant.language, constant.character#A7FF66—
constant.language.boolean#39FF14bold
variable.other.property, support.variable.property#D0D0D0—
meta.object-literal.key#39FF14—
entity.name.tag, punctuation.definition.tag#39FF14—
entity.other.attribute-name#00A3B0italic
punctuation, meta.brace#00A3B0—
string.regexp#FF3B30—
constant.character.escape#A7FF66—
meta.decorator, punctuation.decorator#B200FF—
invalid, invalid.illegal#FF3B30strikethrough
markup.heading, entity.name.section#39FF14bold
markup.bold#A7FF66bold
markup.italic#00A3B0italic
markup.underline.link#39FF14—
markup.inline.raw, markup.fenced_code#A7FF66—
support.type.property-name.json#39FF14—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#39FF14—
support.type.property-name.css#00A3B0—
support.constant.property-value.css#A7FF66—