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—