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#D9A44A
  • activityBar.background#1F1D2A
  • activityBar.foreground#D9A44A
  • activityBarBadge.background#D9A44A
  • activityBarBadge.foreground#1B1A2E
  • badge.background#D9A44A
  • badge.foreground#1B1A2E
  • button.background#2A283F
  • button.foreground#FFFFFF
  • button.hoverBackground#2E2B45
  • dropdown.background#212030
  • dropdown.border#2A283F
  • dropdown.foreground#E0E2EB
  • editor.background#1B1A2E
  • editor.findMatchBackground#D9A44A40
  • editor.findMatchHighlightBackground#D9A44A20
  • editor.foreground#E0E2EB
  • editor.lineHighlightBackground#2A283F80
  • editor.lineHighlightBorder#2A283FA0
  • editor.selectionBackground#5A86A870
  • editor.selectionHighlightBackground#5A86A840
  • editorBracketMatch.background#D9A44A30
  • editorBracketMatch.border#D9A44A
  • editorCursor.foreground#D9A44A
  • editorGroupHeader.tabsBackground#1B1A2E
  • editorIndentGuide.activeBackground#2E2B45C0
  • editorIndentGuide.background#2E2B4580
  • editorLineNumber.activeForeground#D9A44A
  • editorLineNumber.foreground#6A7A89
  • editorWhitespace.foreground#2E2B45
  • focusBorder#D9A44A
  • gitDecoration.conflictingResourceForeground#D9A44A
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.modifiedResourceForeground#D9A44A
  • gitDecoration.untrackedResourceForeground#8FB88F
  • input.background#212030
  • input.border#2A283F
  • input.foreground#E0E2EB
  • input.placeholderForeground#6A7A89
  • inputOption.activeBorder#D9A44A
  • list.activeSelectionBackground#2A283F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2A283F
  • list.highlightForeground#D9A44A
  • list.hoverBackground#2A283F66
  • minimap.background#1B1A2E
  • minimapSlider.activeBackground#D9A44A66
  • minimapSlider.background#D9A44A22
  • minimapSlider.hoverBackground#D9A44A44
  • panel.background#1B1A2E
  • panel.border#2A283F
  • panelTitle.activeBorder#D9A44A
  • panelTitle.activeForeground#D9A44A
  • panelTitle.inactiveForeground#B3B8C9
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D9A44A88
  • scrollbarSlider.background#6A7A8944
  • scrollbarSlider.hoverBackground#6A7A8988
  • sideBar.background#212030
  • sideBar.foreground#B3B8C9
  • sideBarSectionHeader.background#1F1D2A
  • sideBarSectionHeader.foreground#D9A44A
  • sideBarTitle.foreground#D9A44A
  • statusBar.background#2A283F
  • statusBar.debuggingBackground#D9A44A
  • statusBar.foreground#E0E2EB
  • statusBar.noFolderBackground#1F1D2A
  • statusBarItem.hoverBackground#2E2B45
  • tab.activeBackground#2A283F
  • tab.activeBorder#D9A44A
  • tab.activeForeground#FFFFFF
  • tab.border#1B1A2E
  • tab.inactiveBackground#212030
  • tab.inactiveForeground#B3B8C9
  • terminal.ansiBlue#5A86A8
  • terminal.ansiBrightBlue#7FA6D9
  • terminal.ansiBrightCyan#89E4F7
  • terminal.ansiBrightGreen#A5D9A5
  • terminal.ansiBrightMagenta#D9B0E5
  • terminal.ansiBrightRed#F28B84
  • terminal.ansiBrightYellow#E6B670
  • terminal.ansiCyan#6FD3F5
  • terminal.ansiGreen#8FB88F
  • terminal.ansiMagenta#C9A0D9
  • terminal.ansiRed#E06C75
  • terminal.ansiYellow#D9A44A
  • terminal.background#1B1A2E
  • terminal.foreground#E0E2EB
  • titleBar.activeBackground#1F1D2A
  • titleBar.activeForeground#E0E2EB
  • titleBar.inactiveBackground#1B1A2E
  • titleBar.inactiveForeground#B3B8C9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A7A89italic
string, string.quoted, string.template#6FD3F5
keyword, storage.type, storage.modifier#D9A44Abold
keyword.operator, punctuation.accessor#E0E2EB
variable, variable.other#E0E2EB
variable.parameter#B1C0D1italic
entity.name.function, support.function#8AB4F8
meta.function-call#B3B8C9
entity.name.class, entity.name.type.class, support.class#C9A0D9bold
entity.name.type, support.type#C9A0D9
entity.name.type.interface#5A86A8italic
constant.numeric#D9A44A
constant, constant.language, constant.character#D9A44A
constant.language.boolean#D9A44Abold
variable.other.property, support.variable.property#B1C0D1
meta.object-literal.key#8AB4F8
entity.name.tag, punctuation.definition.tag#D9A44A
entity.other.attribute-name#C9A0D9italic
punctuation, meta.brace#E0E2EB
string.regexp#E06C75
constant.character.escape#D19A66
meta.decorator, punctuation.decorator#D9A44A
invalid, invalid.illegal#E06C75strikethrough
markup.heading, entity.name.section#D9A44Abold
markup.bold#D9A44Abold
markup.italic#C9A0D9italic
markup.underline.link#5A86A8
markup.inline.raw, markup.fenced_code#8FB88F
support.type.property-name.json#D9A44A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D9A44A
support.type.property-name.css#8AB4F8
support.constant.property-value.css#5A86A8