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#0B0808
  • activityBar.foreground#39FF14
  • activityBarBadge.background#39FF14
  • activityBarBadge.foreground#120404
  • badge.background#39FF14
  • badge.foreground#120404
  • button.background#331500
  • button.foreground#E2E0E0
  • button.hoverBackground#39FF14
  • dropdown.background#1A0A0A
  • dropdown.border#39FF14
  • dropdown.foreground#E2E0E0
  • editor.background#120404
  • editor.findMatchBackground#FF950066
  • editor.findMatchHighlightBackground#FF950044
  • editor.foreground#E2E0E0
  • editor.lineHighlightBackground#331500
  • editor.lineHighlightBorder#FF6F00
  • editor.selectionBackground#39FF1466
  • editor.selectionHighlightBackground#39FF1444
  • editorBracketMatch.background#39FF1222
  • editorBracketMatch.border#39FF14
  • editorCursor.foreground#39FF14
  • editorGroupHeader.tabsBackground#120404
  • editorIndentGuide.activeBackground#39FF1466
  • editorIndentGuide.background#33150066
  • editorLineNumber.activeForeground#39FF14
  • editorLineNumber.foreground#331500
  • editorWhitespace.foreground#331500
  • focusBorder#39FF14
  • gitDecoration.conflictingResourceForeground#FF9500
  • gitDecoration.deletedResourceForeground#FF3333
  • gitDecoration.modifiedResourceForeground#39FF14
  • gitDecoration.untrackedResourceForeground#39FF14
  • input.background#1A0A0A
  • input.border#39FF14
  • input.foreground#E2E0E0
  • input.placeholderForeground#39FF14
  • inputOption.activeBorder#39FF14
  • list.activeSelectionBackground#331500
  • list.activeSelectionForeground#E2E0E0
  • list.focusBackground#331500
  • list.highlightForeground#39FF14
  • list.hoverBackground#33150044
  • minimap.background#120404
  • minimapSlider.activeBackground#39FF0288
  • minimapSlider.background#39FF0222
  • minimapSlider.hoverBackground#39FF0244
  • panel.background#120404
  • panel.border#331500
  • panelTitle.activeBorder#39FF14
  • panelTitle.activeForeground#E2E0E0
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#39FF0888
  • scrollbarSlider.background#33150044
  • scrollbarSlider.hoverBackground#33150088
  • sideBar.background#110505
  • sideBar.foreground#E2E0E0
  • sideBarSectionHeader.background#120404
  • sideBarSectionHeader.foreground#39FF14
  • sideBarTitle.foreground#39FF14
  • statusBar.background#1A0A0A
  • statusBar.debuggingBackground#39FF14
  • statusBar.foreground#E2E0E0
  • statusBar.noFolderBackground#120404
  • statusBarItem.hoverBackground#331500
  • tab.activeBackground#1A0A0A
  • tab.activeBorder#39FF14
  • tab.activeForeground#E2E0E0
  • tab.border#120404
  • tab.inactiveBackground#120404
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#39FF14
  • terminal.ansiBrightBlue#9AFF99
  • terminal.ansiBrightCyan#66FFEE
  • terminal.ansiBrightGreen#66FF99
  • terminal.ansiBrightMagenta#FFAA66
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFD966
  • terminal.ansiCyan#00FFC2
  • terminal.ansiGreen#39FF14
  • terminal.ansiMagenta#FF6F00
  • terminal.ansiRed#FF3333
  • terminal.ansiYellow#FFB400
  • terminal.background#120404
  • terminal.foreground#E2E0E0
  • titleBar.activeBackground#120404
  • titleBar.activeForeground#E2E0E0
  • titleBar.inactiveBackground#0B0808
  • titleBar.inactiveForeground#39FF14

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B5A00italic
string, string.quoted, string.template#39FF14
keyword, storage.type, storage.modifier#39FF14bold
keyword.operator, punctuation.accessor#FF6F00
variable, variable.other#E2E0E0
variable.parameter#39FF14italic
entity.name.function, support.function#FF6F00
meta.function-call#FF9500
entity.name.class, entity.name.type.class, support.class#39FF14bold
entity.name.type, support.type#E2E0E0
entity.name.type.interface#39FF14italic
constant.numeric#FF9500
constant, constant.language, constant.character#FFB400
constant.language.boolean#FFB400bold
variable.other.property, support.variable.property#E2E0E0
meta.object-literal.key#39FF14
entity.name.tag, punctuation.definition.tag#FF6F00
entity.other.attribute-name#39FF14italic
punctuation, meta.brace#E2E0E0
string.regexp#FF9500
constant.character.escape#FFB400
meta.decorator, punctuation.decorator#39FF14
invalid, invalid.illegal#FF3333strikethrough
markup.heading, entity.name.section#39FF14bold
markup.bold#FFB400bold
markup.italic#39FF14italic
markup.underline.link#39FF14
markup.inline.raw, markup.fenced_code#39FF14
support.type.property-name.json#39FF14
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB400
support.type.property-name.css#39FF14
support.constant.property-value.css#39FF14