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#8ab4ff
  • activityBar.background#0d274a
  • activityBar.foreground#8ab4ff
  • activityBarBadge.background#8ab4ff
  • activityBarBadge.foreground#0b1a30
  • badge.background#8ab4ff
  • badge.foreground#0b1a30
  • button.background#1c3d7a
  • button.foreground#ffffff
  • button.hoverBackground#274e8b
  • dropdown.background#0c213f
  • dropdown.border#1c3d7a
  • dropdown.foreground#c0d9ff
  • editor.background#0b1a30
  • editor.findMatchBackground#8ab4ff44
  • editor.findMatchHighlightBackground#8ab4ff22
  • editor.foreground#c0d9ff
  • editor.lineHighlightBackground#1c3d7a60
  • editor.lineHighlightBorder#1c3d7a90
  • editor.selectionBackground#3b6ea560
  • editor.selectionHighlightBackground#3b6ea540
  • editorBracketMatch.background#8ab4ff33
  • editorBracketMatch.border#8ab4ff
  • editorCursor.foreground#8ab4ff
  • editorGroupHeader.tabsBackground#0b1a30
  • editorIndentGuide.activeBackground#274e8b88
  • editorIndentGuide.background#274e8b44
  • editorLineNumber.activeForeground#8ab4ff
  • editorLineNumber.foreground#5a7ba9
  • editorWhitespace.foreground#274e8b
  • focusBorder#8ab4ff
  • gitDecoration.conflictingResourceForeground#ffd66b
  • gitDecoration.deletedResourceForeground#ff6f6f
  • gitDecoration.modifiedResourceForeground#8ab4ff
  • gitDecoration.untrackedResourceForeground#7ef5a3
  • input.background#0c213f
  • input.border#1c3d7a
  • input.foreground#c0d9ff
  • input.placeholderForeground#5a7ba9
  • inputOption.activeBorder#8ab4ff
  • list.activeSelectionBackground#1c3d7a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1c3d7a
  • list.highlightForeground#8ab4ff
  • list.hoverBackground#1c3d7a66
  • minimap.background#0b1a30
  • minimapSlider.activeBackground#8ab4ff66
  • minimapSlider.background#8ab4ff22
  • minimapSlider.hoverBackground#8ab4ff44
  • panel.background#0b1a30
  • panel.border#1c3d7a
  • panelTitle.activeBorder#8ab4ff
  • panelTitle.activeForeground#8ab4ff
  • panelTitle.inactiveForeground#a5c8ff
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#8ab4ff88
  • scrollbarSlider.background#5a7ba944
  • scrollbarSlider.hoverBackground#5a7ba988
  • sideBar.background#0c213f
  • sideBar.foreground#a5c8ff
  • sideBarSectionHeader.background#0d274a
  • sideBarSectionHeader.foreground#8ab4ff
  • sideBarTitle.foreground#8ab4ff
  • statusBar.background#1c3d7a
  • statusBar.debuggingBackground#6fa9ff
  • statusBar.foreground#c0d9ff
  • statusBar.noFolderBackground#0d274a
  • statusBarItem.hoverBackground#274e8b
  • tab.activeBackground#1c3d7a
  • tab.activeBorder#8ab4ff
  • tab.activeForeground#ffffff
  • tab.border#0b1a30
  • tab.inactiveBackground#0c213f
  • tab.inactiveForeground#a5c8ff
  • terminal.ansiBlue#5f9eff
  • terminal.ansiBrightBlue#8ac6ff
  • terminal.ansiBrightCyan#9aefff
  • terminal.ansiBrightGreen#9ff9b5
  • terminal.ansiBrightMagenta#d5a1ff
  • terminal.ansiBrightRed#ff8b8b
  • terminal.ansiBrightYellow#ffeb8b
  • terminal.ansiCyan#7ddfff
  • terminal.ansiGreen#7ef5a3
  • terminal.ansiMagenta#c58eff
  • terminal.ansiRed#ff6f6f
  • terminal.ansiYellow#ffd66b
  • terminal.background#0b1a30
  • terminal.foreground#c0d9ff
  • titleBar.activeBackground#0d274a
  • titleBar.activeForeground#c0d9ff
  • titleBar.inactiveBackground#0b1a30
  • titleBar.inactiveForeground#a5c8ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a7ba9italic
string, string.quoted, string.template#7ddfff
keyword, storage.type, storage.modifier#5f9effbold
keyword.operator, punctuation.accessor#8ab4ff
variable, variable.other#b0d0ff
variable.parameter#ffb86bitalic
entity.name.function, support.function#6fb3ff
meta.function-call#a5c8ff
entity.name.class, entity.name.type.class, support.class#8ab4ffbold
entity.name.type, support.type#8ab4ff
entity.name.type.interface#7ddfffitalic
constant.numeric#ff9b6b
constant, constant.language, constant.character#ffb86b
constant.language.boolean#ff9b6bbold
variable.other.property, support.variable.property#a5c8ff
meta.object-literal.key#6fb3ff
entity.name.tag, punctuation.definition.tag#5f9eff
entity.other.attribute-name#c58effitalic
punctuation, meta.brace#8ab4ff
string.regexp#ff9b6b
constant.character.escape#c58eff
meta.decorator, punctuation.decorator#ffd66b
invalid, invalid.illegal#ff6f6fstrikethrough
markup.heading, entity.name.section#5f9effbold
markup.bold#ffb86bbold
markup.italic#c58effitalic
markup.underline.link#7ddfff
markup.inline.raw, markup.fenced_code#7ef5a3
support.type.property-name.json#5f9eff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffd66b
support.type.property-name.css#6fb3ff
support.constant.property-value.css#7ddfff