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#00F5FF
  • activityBar.background#090A1A
  • activityBar.foreground#00F5FF
  • activityBarBadge.background#00F5FF
  • activityBarBadge.foreground#0B0C1F
  • badge.background#00F5FF
  • badge.foreground#0B0C1F
  • button.background#15162A
  • button.foreground#FFFFFF
  • button.hoverBackground#1A1B3A
  • dropdown.background#11122A
  • dropdown.border#15162A
  • dropdown.foreground#E0E0FF
  • editor.background#0B0C1F
  • editor.findMatchBackground#FFB84D44
  • editor.findMatchHighlightBackground#FFB84D22
  • editor.foreground#E0E0FF
  • editor.lineHighlightBackground#1A1B3A40
  • editor.lineHighlightBorder#00F5FF20
  • editor.selectionBackground#00F5FF33
  • editor.selectionHighlightBackground#00F5FF1A
  • editorBracketMatch.background#00F5FF33
  • editorBracketMatch.border#00F5FF
  • editorCursor.foreground#00F5FF
  • editorGroupHeader.tabsBackground#0B0C1F
  • editorIndentGuide.activeBackground#2A2A3A88
  • editorIndentGuide.background#2A2A3A44
  • editorLineNumber.activeForeground#00F5FF
  • editorLineNumber.foreground#4A4A6A
  • editorWhitespace.foreground#2A2A3A
  • focusBorder#00F5FF
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#00F5FF
  • gitDecoration.untrackedResourceForeground#A8FF60
  • input.background#11122A
  • input.border#15162A
  • input.foreground#E0E0FF
  • input.placeholderForeground#555555
  • inputOption.activeBorder#00F5FF
  • list.activeSelectionBackground#15162A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#15162A
  • list.highlightForeground#00F5FF
  • list.hoverBackground#15162A66
  • minimap.background#0B0C1F
  • minimapSlider.activeBackground#00F5FF66
  • minimapSlider.background#00F5FF22
  • minimapSlider.hoverBackground#00F5FF44
  • panel.background#0B0C1F
  • panel.border#15162A
  • panelTitle.activeBorder#00F5FF
  • panelTitle.activeForeground#00F5FF
  • panelTitle.inactiveForeground#C0C0D0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00F5FF88
  • scrollbarSlider.background#4A4A6A44
  • scrollbarSlider.hoverBackground#4A4A6A88
  • sideBar.background#11122A
  • sideBar.foreground#C0C0D0
  • sideBarSectionHeader.background#090A1A
  • sideBarSectionHeader.foreground#00F5FF
  • sideBarTitle.foreground#00F5FF
  • statusBar.background#15162A
  • statusBar.debuggingBackground#00F5FF
  • statusBar.foreground#E0E0FF
  • statusBar.noFolderBackground#090A1A
  • statusBarItem.hoverBackground#1A1B3A
  • tab.activeBackground#15162A
  • tab.activeBorder#00F5FF
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C1F
  • tab.inactiveBackground#11122A
  • tab.inactiveForeground#C0C0D0
  • terminal.ansiBlue#3A9FFF
  • terminal.ansiBrightBlue#66C1FF
  • terminal.ansiBrightCyan#66F5FF
  • terminal.ansiBrightGreen#C8FF80
  • terminal.ansiBrightMagenta#D3A8FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFE766
  • terminal.ansiCyan#00F5FF
  • terminal.ansiGreen#A8FF60
  • terminal.ansiMagenta#B388FF
  • terminal.ansiRed#FF5555
  • terminal.ansiYellow#FFD700
  • terminal.background#0B0C1F
  • terminal.foreground#E0E0FF
  • titleBar.activeBackground#090A1A
  • titleBar.activeForeground#E0E0FF
  • titleBar.inactiveBackground#101020
  • titleBar.inactiveForeground#A0A0B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A8FF60
keyword, storage.type, storage.modifier#00E5FFbold
keyword.operator, punctuation.accessor#B388FF
variable, variable.other#E0E0E0
variable.parameter#FFD700italic
entity.name.function, support.function#00B4CC
meta.function-call#B3B3B3
entity.name.class, entity.name.type.class, support.class#B388FFbold
entity.name.type, support.type#B388FF
entity.name.type.interface#00E5FFitalic
constant.numeric#FFD700
constant, constant.language, constant.character#FFD700
constant.language.boolean#FFD700bold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#00E5FF
entity.name.tag, punctuation.definition.tag#00E5FF
entity.other.attribute-name#B388FFitalic
punctuation, meta.brace#B388FF
string.regexp#FF5555
constant.character.escape#B388FF
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#00E5FFbold
markup.bold#FFD700bold
markup.italic#B388FFitalic
markup.underline.link#00E5FF
markup.inline.raw, markup.fenced_code#A8FF60
support.type.property-name.json#00E5FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD700
support.type.property-name.css#00E5FF
support.constant.property-value.css#A8FF60