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#00C8FF
  • activityBar.background#0D0F2A
  • activityBar.foreground#00C8FF
  • activityBarBadge.background#00C8FF
  • activityBarBadge.foreground#0B0E22
  • badge.background#00C8FF
  • badge.foreground#0B0E22
  • button.background#11142D
  • button.foreground#FFFFFF
  • button.hoverBackground#1A1C38
  • dropdown.background#0D0F2A
  • dropdown.border#11142D
  • dropdown.foreground#D0D5E9
  • editor.background#0B0E22
  • editor.findMatchBackground#FFB30044
  • editor.findMatchHighlightBackground#FFB30022
  • editor.foreground#D0D5E9
  • editor.lineHighlightBackground#11142D80
  • editor.lineHighlightBorder#11142D
  • editor.selectionBackground#00C8FF44
  • editor.selectionHighlightBackground#00C8FF22
  • editorBracketMatch.background#00C8FF33
  • editorBracketMatch.border#00C8FF
  • editorCursor.foreground#00C8FF
  • editorGroupHeader.tabsBackground#0B0E22
  • editorIndentGuide.activeBackground#40456088
  • editorIndentGuide.background#40456044
  • editorLineNumber.activeForeground#00C8FF
  • editorLineNumber.foreground#606680
  • editorWhitespace.foreground#404560
  • focusBorder#00C8FF
  • gitDecoration.conflictingResourceForeground#FF6FDF
  • gitDecoration.deletedResourceForeground#FF5F57
  • gitDecoration.modifiedResourceForeground#00C8FF
  • gitDecoration.untrackedResourceForeground#7EF9A9
  • input.background#0D0F2A
  • input.border#11142D
  • input.foreground#D0D5E9
  • input.placeholderForeground#606680
  • inputOption.activeBorder#00C8FF
  • list.activeSelectionBackground#11142D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#11142D
  • list.highlightForeground#00C8FF
  • list.hoverBackground#11142D66
  • minimap.background#0B0E22
  • minimapSlider.activeBackground#00C8FF66
  • minimapSlider.background#00C8FF22
  • minimapSlider.hoverBackground#00C8FF44
  • panel.background#0B0E22
  • panel.border#11142D
  • panelTitle.activeBorder#00C8FF
  • panelTitle.activeForeground#00C8FF
  • panelTitle.inactiveForeground#A0A8C5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00C8FF88
  • scrollbarSlider.background#60668044
  • scrollbarSlider.hoverBackground#60668088
  • sideBar.background#0D0F2A
  • sideBar.foreground#A0A8C5
  • sideBarSectionHeader.background#0C0E28
  • sideBarSectionHeader.foreground#00C8FF
  • sideBarTitle.foreground#00C8FF
  • statusBar.background#11142D
  • statusBar.debuggingBackground#FFB300
  • statusBar.foreground#D0D5E9
  • statusBar.noFolderBackground#0C0E28
  • statusBarItem.hoverBackground#1A1C38
  • tab.activeBackground#11142D
  • tab.activeBorder#00C8FF
  • tab.activeForeground#FFFFFF
  • tab.border#0B0E22
  • tab.inactiveBackground#0A0C20
  • tab.inactiveForeground#A0A8C5
  • terminal.ansiBlue#00C8FF
  • terminal.ansiBrightBlue#33D8FF
  • terminal.ansiBrightCyan#99EFFF
  • terminal.ansiBrightGreen#9EFFB5
  • terminal.ansiBrightMagenta#FF91E6
  • terminal.ansiBrightRed#FF8B80
  • terminal.ansiBrightYellow#FFCC66
  • terminal.ansiCyan#5CD9FF
  • terminal.ansiGreen#7EF9A9
  • terminal.ansiMagenta#FF6FDF
  • terminal.ansiRed#FF5F57
  • terminal.ansiYellow#FFB300
  • terminal.background#0B0E22
  • terminal.foreground#D0D5E9
  • titleBar.activeBackground#0C0E28
  • titleBar.activeForeground#D0D5E9
  • titleBar.inactiveBackground#0B0E22
  • titleBar.inactiveForeground#A0A8C5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#606680italic
string, string.quoted, string.template#7EF9A9
keyword, storage.type, storage.modifier#00C8FFbold
keyword.operator, punctuation.accessor#D0D5E9
variable, variable.other#D0D5E9
variable.parameter#FF6FDFitalic
entity.name.function, support.function#00C8FF
meta.function-call#A0A8C5
entity.name.class, entity.name.type.class, support.class#00C8FFbold
entity.name.type, support.type#00C8FF
entity.name.type.interface#FF6FDFitalic
constant.numeric#FFB300
constant, constant.language, constant.character#FFB300
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#A0A8C5
meta.object-literal.key#00C8FF
entity.name.tag, punctuation.definition.tag#00C8FF
entity.other.attribute-name#FF6FDFitalic
punctuation, meta.brace#D0D5E9
string.regexp#FF6FDF
constant.character.escape#FF6FDF
meta.decorator, punctuation.decorator#FF6FDF
invalid, invalid.illegal#FF5F57strikethrough
markup.heading, entity.name.section#00C8FFbold
markup.bold#FF6FDFbold
markup.italic#FF6FDFitalic
markup.underline.link#00C8FF
markup.inline.raw, markup.fenced_code#7EF9A9
support.type.property-name.json#00C8FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6FDF
support.type.property-name.css#00C8FF
support.constant.property-value.css#7EF9A9