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#6EE7FF
  • activityBar.background#150D21
  • activityBar.foreground#6EE7FF
  • activityBarBadge.background#6EE7FF
  • activityBarBadge.foreground#1A0F2E
  • badge.background#6EE7FF
  • badge.foreground#1A0F2E
  • button.background#2A1A3E
  • button.foreground#D8D8D8
  • button.hoverBackground#3B254E
  • dropdown.background#261A35
  • dropdown.border#2A1A3E
  • dropdown.foreground#D8D8D8
  • editor.background#1A0F2E
  • editor.findMatchBackground#6EE7FF44
  • editor.findMatchHighlightBackground#6EE7FF22
  • editor.foreground#D8D8D8
  • editor.lineHighlightBackground#2B213940
  • editor.lineHighlightBorder#2B2139CC
  • editor.selectionBackground#6EE7FF33
  • editor.selectionHighlightBackground#6EE7FF22
  • editorBracketMatch.background#6EE7FF22
  • editorBracketMatch.border#6EE7FF
  • editorCursor.foreground#6EE7FF
  • editorGroupHeader.tabsBackground#1A0F2E
  • editorIndentGuide.activeBackground#55557788
  • editorIndentGuide.background#44446644
  • editorLineNumber.activeForeground#6EE7FF
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#444444
  • focusBorder#6EE7FF
  • gitDecoration.conflictingResourceForeground#C792EA
  • gitDecoration.deletedResourceForeground#F28B82
  • gitDecoration.modifiedResourceForeground#6EE7FF
  • gitDecoration.untrackedResourceForeground#84F5C9
  • input.background#261A35
  • input.border#2A1A3E
  • input.foreground#D8D8D8
  • input.placeholderForeground#777777
  • inputOption.activeBorder#6EE7FF
  • list.activeSelectionBackground#2A1A3E
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2A1A3E
  • list.highlightForeground#6EE7FF
  • list.hoverBackground#2A1A3E80
  • minimap.background#1A0F2E
  • minimapSlider.activeBackground#6EE7FF66
  • minimapSlider.background#6EE7FF22
  • minimapSlider.hoverBackground#6EE7FF44
  • panel.background#1A0F2E
  • panel.border#2A1A3E
  • panelTitle.activeBorder#6EE7FF
  • panelTitle.activeForeground#6EE7FF
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6EE7FF88
  • scrollbarSlider.background#44446644
  • scrollbarSlider.hoverBackground#44446688
  • sideBar.background#1E122C
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#1A0F2E
  • sideBarSectionHeader.foreground#6EE7FF
  • sideBarTitle.foreground#6EE7FF
  • statusBar.background#2A1A3E
  • statusBar.debuggingBackground#6EE7FF
  • statusBar.foreground#D8D8D8
  • statusBar.noFolderBackground#1A0F2E
  • statusBarItem.hoverBackground#3B254E
  • tab.activeBackground#221730
  • tab.activeBorder#A78BFA
  • tab.activeForeground#FFFFFF
  • tab.border#1A0F2E
  • tab.inactiveBackground#1E122C
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#6EE7FF
  • terminal.ansiBrightBlue#8BF5FF
  • terminal.ansiBrightCyan#A1F8D0
  • terminal.ansiBrightGreen#B9F5B5
  • terminal.ansiBrightMagenta#D1A9FF
  • terminal.ansiBrightRed#FF9A94
  • terminal.ansiBrightYellow#FFF9A1
  • terminal.ansiCyan#84F5C9
  • terminal.ansiGreen#A6E3A1
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#F28B82
  • terminal.ansiYellow#FFF475
  • terminal.background#1A0F2E
  • terminal.foreground#D8D8D8
  • titleBar.activeBackground#1A0F2E
  • titleBar.activeForeground#D8D8D8
  • titleBar.inactiveBackground#150D21
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#84F5C9
keyword, storage.type, storage.modifier#6EE7FFbold
keyword.operator, punctuation.accessor#6EE7FF
variable, variable.other#D8D8D8
variable.parameter#BBBBBBitalic
entity.name.function, support.function#6EE7FF
meta.function-call#A0A0A0
entity.name.class, entity.name.type.class, support.class#6EE7FFbold
entity.name.type, support.type#6EE7FF
entity.name.type.interface#84F5C9italic
constant.numeric#BBBBBB
constant, constant.language, constant.character#BBBBBB
constant.language.boolean#BBBBBBbold
variable.other.property, support.variable.property#A0A0A0
meta.object-literal.key#6EE7FF
entity.name.tag, punctuation.definition.tag#6EE7FF
entity.other.attribute-name#84F5C9italic
punctuation, meta.brace#888888
string.regexp#F28B82
constant.character.escape#84F5C9
meta.decorator, punctuation.decorator#BBBBBB
invalid, invalid.illegal#F28B82strikethrough
markup.heading, entity.name.section#6EE7FFbold
markup.bold#D8D8D8bold
markup.italic#84F5C9italic
markup.underline.link#84F5C9
markup.inline.raw, markup.fenced_code#84F5C9
support.type.property-name.json#6EE7FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#BBBBBB
support.type.property-name.css#6EE7FF
support.constant.property-value.css#84F5C9