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#00FFC5
  • activityBar.background#070C15
  • activityBar.foreground#00FFC5
  • activityBarBadge.background#00FFC5
  • activityBarBadge.foreground#0A0F1F
  • badge.background#00FFC5
  • badge.foreground#0A0F1F
  • button.background#001525
  • button.foreground#E0E7FF
  • button.hoverBackground#00152588
  • dropdown.background#070C15
  • dropdown.border#2F3A5C
  • dropdown.foreground#E0E7FF
  • editor.background#0A0F1F
  • editor.findMatchBackground#7A4DFF44
  • editor.findMatchHighlightBackground#7A4DFF28
  • editor.foreground#E0E7FF
  • editor.lineHighlightBackground#00152540
  • editor.lineHighlightBorder#00FFC540
  • editor.selectionBackground#00FFC540
  • editor.selectionHighlightBackground#00FFC528
  • editorBracketMatch.background#00FFC540
  • editorBracketMatch.border#00FFC5
  • editorCursor.foreground#00FFC5
  • editorGroupHeader.tabsBackground#060B14
  • editorIndentGuide.activeBackground#00FFC588
  • editorIndentGuide.background#2F3A5C44
  • editorLineNumber.activeForeground#00FFC5
  • editorLineNumber.foreground#3A4B7C
  • editorWhitespace.foreground#2F3A5C
  • focusBorder#00FFC5
  • gitDecoration.conflictingResourceForeground#FFEB5F
  • gitDecoration.deletedResourceForeground#FF5F5F
  • gitDecoration.modifiedResourceForeground#00FFC5
  • gitDecoration.untrackedResourceForeground#00FF88
  • input.background#070C15
  • input.border#2F3A5C
  • input.foreground#E0E7FF
  • input.placeholderForeground#3A4B6C
  • inputOption.activeBorder#00FFC5
  • list.activeSelectionBackground#001525
  • list.activeSelectionForeground#E0E7FF
  • list.focusBackground#001525
  • list.highlightForeground#00FFC5
  • list.hoverBackground#00152544
  • minimap.background#0A0F1F
  • minimapSlider.activeBackground#00FFC566
  • minimapSlider.background#00FFC522
  • minimapSlider.hoverBackground#00FFC544
  • panel.background#0A0F1F
  • panel.border#2F3A5C
  • panelTitle.activeBorder#00FFC5
  • panelTitle.activeForeground#00FFC5
  • panelTitle.inactiveForeground#6A7B9C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00FFC588
  • scrollbarSlider.background#2F3A5C44
  • scrollbarSlider.hoverBackground#2F3A5C88
  • sideBar.background#080D1A
  • sideBar.foreground#A5B8FF
  • sideBarSectionHeader.background#070C15
  • sideBarSectionHeader.foreground#7A4DFF
  • sideBarTitle.foreground#00FFC5
  • statusBar.background#080D1A
  • statusBar.debuggingBackground#006644
  • statusBar.foreground#E0E7FF
  • statusBar.noFolderBackground#070C15
  • statusBarItem.hoverBackground#0D1425
  • tab.activeBackground#080D1A
  • tab.activeBorder#00FFC5
  • tab.activeForeground#E0E7FF
  • tab.border#04070E
  • tab.inactiveBackground#060B14
  • tab.inactiveForeground#7A8DBF
  • terminal.ansiBlue#3A9FFF
  • terminal.ansiBrightBlue#5AB3FF
  • terminal.ansiBrightCyan#33FFFF
  • terminal.ansiBrightGreen#5FFF88
  • terminal.ansiBrightMagenta#FF99FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFF791
  • terminal.ansiCyan#00DFFF
  • terminal.ansiGreen#00FF88
  • terminal.ansiMagenta#FF77FF
  • terminal.ansiRed#FF5F5F
  • terminal.ansiYellow#FFEB5F
  • terminal.background#0A0F1F
  • terminal.foreground#E0E7FF
  • titleBar.activeBackground#080D1A
  • titleBar.activeForeground#E0E7FF
  • titleBar.inactiveBackground#05080E
  • titleBar.inactiveForeground#6A7B9C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#66FF66
keyword, storage.type, storage.modifier#00FF00bold
keyword.operator, punctuation.accessor#00AA00
variable, variable.other#A0FFA0
variable.parameter#88FFAAitalic
entity.name.function, support.function#00DD00
meta.function-call#88FFAA
entity.name.class, entity.name.type.class, support.class#00FF00bold
entity.name.type, support.type#00CC00
entity.name.type.interface#66FFAAitalic
constant.numeric#AAFF66
constant, constant.language, constant.character#AAFF66
constant.language.boolean#AAFF66bold
variable.other.property, support.variable.property#A0FFA0
meta.object-literal.key#00DD00
entity.name.tag, punctuation.definition.tag#00FF00
entity.other.attribute-name#66FFAAitalic
punctuation, meta.brace#00AA00
string.regexp#AAFF66
constant.character.escape#66FFAA
meta.decorator, punctuation.decorator#FFFF66
invalid, invalid.illegal#FF6666strikethrough
markup.heading, entity.name.section#00FF00bold
markup.bold#AAFF66bold
markup.italic#66FFAAitalic
markup.underline.link#66FF66
markup.inline.raw, markup.fenced_code#88FFAA
support.type.property-name.json#00DD00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFFF66
support.type.property-name.css#00DD00
support.constant.property-value.css#66FF66