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—