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#3B7EBF
  • activityBar.background#101426
  • activityBar.foreground#AFC6E9
  • activityBarBadge.background#3B7EBF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFB96C
  • badge.foreground#1A1A1A
  • button.background#3B7EBF
  • button.foreground#FFFFFF
  • button.hoverBackground#5B9DFF
  • dropdown.background#101426
  • dropdown.border#3B7EBF
  • dropdown.foreground#E0E5F2
  • editor.background#0B0F1A
  • editor.findMatchBackground#FFB96C55
  • editor.findMatchHighlightBackground#FFB96C33
  • editor.foreground#E0E5F2
  • editor.lineHighlightBackground#1A2A44
  • editor.lineHighlightBorder#3B7EBF
  • editor.selectionBackground#3B7EBF55
  • editor.selectionHighlightBackground#3B7EBF33
  • editorBracketMatch.background#3B7EBF33
  • editorBracketMatch.border#3B7EBF
  • editorCursor.foreground#E0E5F2
  • editorGroupHeader.tabsBackground#101426
  • editorIndentGuide.activeBackground#3B7EBF
  • editorIndentGuide.background#2A3A58
  • editorLineNumber.activeForeground#E0E5F2
  • editorLineNumber.foreground#7A889F
  • editorWhitespace.foreground#4A5578
  • focusBorder#3B7EBF
  • gitDecoration.conflictingResourceForeground#B770B0
  • gitDecoration.deletedResourceForeground#D56C6C
  • gitDecoration.modifiedResourceForeground#6EBE5C
  • gitDecoration.untrackedResourceForeground#5FB3B3
  • input.background#101426
  • input.border#3B7EBF
  • input.foreground#E0E5F2
  • input.placeholderForeground#7A889F
  • inputOption.activeBorder#3B7EBF
  • list.activeSelectionBackground#3B7EBF55
  • list.activeSelectionForeground#E0E5F2
  • list.focusBackground#3B7EBF44
  • list.highlightForeground#FFB96C
  • list.hoverBackground#3B7EBF33
  • minimap.background#0B0F1A
  • minimapSlider.activeBackground#5B9DFFAA
  • minimapSlider.background#2A3A58AA
  • minimapSlider.hoverBackground#3B7EBFAA
  • panel.background#0F1320
  • panel.border#101426
  • panelTitle.activeBorder#3B7EBF
  • panelTitle.activeForeground#E0E5F2
  • panelTitle.inactiveForeground#7A889F
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#5B9DFFAA
  • scrollbarSlider.background#2A3A58AA
  • scrollbarSlider.hoverBackground#3B7EBFAA
  • sideBar.background#0F1320
  • sideBar.foreground#C5D0E6
  • sideBarSectionHeader.background#101426
  • sideBarSectionHeader.foreground#AFC6E9
  • sideBarTitle.foreground#AFC6E9
  • statusBar.background#1A2A44
  • statusBar.debuggingBackground#4B274D
  • statusBar.foreground#E0E5F2
  • statusBar.noFolderBackground#3B7EBF
  • statusBarItem.hoverBackground#3B7EBF33
  • tab.activeBackground#101426
  • tab.activeBorder#3B7EBF
  • tab.activeForeground#E0E5F2
  • tab.border#0B0F1A
  • tab.inactiveBackground#0B0F1A
  • tab.inactiveForeground#7A889F
  • terminal.ansiBlue#3B7EBF
  • terminal.ansiBrightBlue#5B9DFF
  • terminal.ansiBrightCyan#73D6D6
  • terminal.ansiBrightGreen#7ED57F
  • terminal.ansiBrightMagenta#D185D1
  • terminal.ansiBrightRed#FF6F6F
  • terminal.ansiBrightYellow#FFD27F
  • terminal.ansiCyan#5FB3B3
  • terminal.ansiGreen#6EBE5C
  • terminal.ansiMagenta#B770B0
  • terminal.ansiRed#D56C6C
  • terminal.ansiYellow#FFB96C
  • terminal.background#0B0F1A
  • terminal.foreground#E0E5F2
  • titleBar.activeBackground#101426
  • titleBar.activeForeground#E0E5F2
  • titleBar.inactiveBackground#0B0F1A
  • titleBar.inactiveForeground#7A889F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A889Fitalic
string, string.quoted, string.template#6EBE5C
keyword, storage.type, storage.modifier#3B7EBFbold
keyword.operator, punctuation.accessor#AFC6E9
variable, variable.other#E0E5F2
variable.parameter#5FB3B3italic
entity.name.function, support.function#FFB96C
meta.function-call#FFB96C
entity.name.class, entity.name.type.class, support.class#5B9DFFbold
entity.name.type, support.type#5FB3B3
entity.name.type.interface#5B9DFFitalic
constant.numeric#FFB96C
constant, constant.language, constant.character#AFC6E9
constant.language.boolean#FFB96Cbold
variable.other.property, support.variable.property#AFC6E9
meta.object-literal.key#AFC6E9
entity.name.tag, punctuation.definition.tag#B770B0
entity.other.attribute-name#AFC6E9italic
punctuation, meta.brace#AFC6E9
string.regexp#FFB96C
constant.character.escape#B770B0
meta.decorator, punctuation.decorator#5B9DFF
invalid, invalid.illegal#FF6F6Fstrikethrough
markup.heading, entity.name.section#FFB96Cbold
markup.bold#FFB96Cbold
markup.italic#6EBE5Citalic
markup.underline.link#3B7EBF
markup.inline.raw, markup.fenced_code#5FB3B3
support.type.property-name.json#AFC6E9
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5B9DFF
support.type.property-name.css#6EBE5C
support.constant.property-value.css#FFB96C