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#00F9FF
  • activityBar.background#0A0A1F
  • activityBar.foreground#00F9FF
  • activityBarBadge.background#00F9FF
  • activityBarBadge.foreground#0B0C2C
  • badge.background#00F9FF
  • badge.foreground#0B0C2C
  • button.background#001533
  • button.foreground#E0E0E0
  • button.hoverBackground#003366
  • dropdown.background#0A0A1F
  • dropdown.border#001533
  • dropdown.foreground#E0E0E0
  • editor.background#0B0C2C
  • editor.findMatchBackground#00F9FF44
  • editor.findMatchHighlightBackground#00F9FF22
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#00114480
  • editor.lineHighlightBorder#001144
  • editor.selectionBackground#0044FF80
  • editor.selectionHighlightBackground#0044FF40
  • editorBracketMatch.background#00F9FF33
  • editorBracketMatch.border#00F9FF
  • editorCursor.foreground#00F9FF
  • editorGroupHeader.tabsBackground#0B0C2C
  • editorIndentGuide.activeBackground#33333388
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#00F9FF
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#444444
  • focusBorder#00F9FF
  • gitDecoration.conflictingResourceForeground#FFEB00
  • gitDecoration.deletedResourceForeground#FF3B30
  • gitDecoration.modifiedResourceForeground#00F9FF
  • gitDecoration.untrackedResourceForeground#A0FF00
  • input.background#0A0A1F
  • input.border#001533
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#00F9FF
  • list.activeSelectionBackground#003366
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#002244
  • list.highlightForeground#00F9FF
  • list.hoverBackground#00224466
  • minimap.background#0B0C2C
  • minimapSlider.activeBackground#00F9FF66
  • minimapSlider.background#00F9FF22
  • minimapSlider.hoverBackground#00F9FF44
  • panel.background#0B0C2C
  • panel.border#001533
  • panelTitle.activeBorder#00F9FF
  • panelTitle.activeForeground#00F9FF
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00F9FF88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#0A0A1F
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#0A0A1F
  • sideBarSectionHeader.foreground#00F9FF
  • sideBarTitle.foreground#00F9FF
  • statusBar.background#001533
  • statusBar.debuggingBackground#00F9FF
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#001533
  • statusBarItem.hoverBackground#003366
  • tab.activeBackground#001533
  • tab.activeBorder#00F9FF
  • tab.activeForeground#E0E0E0
  • tab.border#0B0C2C
  • tab.inactiveBackground#0A0A1F
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#00F9FF
  • terminal.ansiBrightBlue#66D9FF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#82FF6A
  • terminal.ansiBrightMagenta#D37EFF
  • terminal.ansiBrightRed#FF756D
  • terminal.ansiBrightYellow#FFE877
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#A0FF00
  • terminal.ansiMagenta#A94FFF
  • terminal.ansiRed#FF3B30
  • terminal.ansiYellow#FFEB00
  • terminal.background#0B0C2C
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0A0A1F
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#08081A
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#A0FF00
keyword, storage.type, storage.modifier#00F9FFbold
keyword.operator, punctuation.accessor#66D9FF
variable, variable.other#CCCCCC
variable.parameter#66D9FFitalic
entity.name.function, support.function#00F9FF
meta.function-call#66D9FF
entity.name.class, entity.name.type.class, support.class#00F9FFbold
entity.name.type, support.type#66D9FF
entity.name.type.interface#66D9FFitalic
constant.numeric#FFEB00
constant, constant.language, constant.character#FFB400
constant.language.boolean#FFEB00bold
variable.other.property, support.variable.property#CCCCCC
meta.object-literal.key#A94FFF
entity.name.tag, punctuation.definition.tag#00F9FF
entity.other.attribute-name#A94FFFitalic
punctuation, meta.brace#CCCCCC
string.regexp#FFB400
constant.character.escape#A94FFF
meta.decorator, punctuation.decorator#66D9FF
invalid, invalid.illegal#FF3B30strikethrough
markup.heading, entity.name.section#00F9FFbold
markup.bold#FFB400bold
markup.italic#A94FFFitalic
markup.underline.link#66D9FF
markup.inline.raw, markup.fenced_code#A0FF00
support.type.property-name.json#00F9FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB400
support.type.property-name.css#66D9FF
support.constant.property-value.css#A0FF00