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#D4A657
  • activityBar.background#1A1C3F
  • activityBar.foreground#A68B6D
  • activityBarBadge.background#A68B6D
  • activityBarBadge.foreground#1A1C3F
  • badge.background#A68B6D
  • badge.foreground#1A1C3F
  • button.background#161839
  • button.foreground#FFFFFF
  • button.hoverBackground#2E304D
  • dropdown.background#1A1C3F
  • dropdown.border#161839
  • dropdown.foreground#E0E4F1
  • editor.background#1A1C3F
  • editor.findMatchBackground#D4A65744
  • editor.findMatchHighlightBackground#D4A65722
  • editor.foreground#E0E4F1
  • editor.lineHighlightBackground#16183980
  • editor.lineHighlightBorder#161839C0
  • editor.selectionBackground#D4A65755
  • editor.selectionHighlightBackground#D4A65733
  • editorBracketMatch.background#A68B6D33
  • editorBracketMatch.border#A68B6D
  • editorCursor.foreground#D4A657
  • editorGroupHeader.tabsBackground#1A1C3F
  • editorIndentGuide.activeBackground#4B517088
  • editorIndentGuide.background#4B517044
  • editorLineNumber.activeForeground#A68B6D
  • editorLineNumber.foreground#4B5170
  • editorWhitespace.foreground#4B5170
  • focusBorder#A68B6D
  • gitDecoration.conflictingResourceForeground#D4A657
  • gitDecoration.deletedResourceForeground#CF6F6F
  • gitDecoration.modifiedResourceForeground#A68B6D
  • gitDecoration.untrackedResourceForeground#9FCF9F
  • input.background#1A1C3F
  • input.border#161839
  • input.foreground#E0E4F1
  • input.placeholderForeground#4B5170
  • inputOption.activeBorder#D4A657
  • list.activeSelectionBackground#161839
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#161839
  • list.highlightForeground#A68B6D
  • list.hoverBackground#16183966
  • minimap.background#1A1C3F
  • minimapSlider.activeBackground#A68B6D66
  • minimapSlider.background#A68B6D22
  • minimapSlider.hoverBackground#A68B6D44
  • panel.background#1A1C3F
  • panel.border#161839
  • panelTitle.activeBorder#D4A657
  • panelTitle.activeForeground#D4A657
  • panelTitle.inactiveForeground#A68B6D
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#A68B6D88
  • scrollbarSlider.background#4B517044
  • scrollbarSlider.hoverBackground#4B517088
  • sideBar.background#1A1C3F
  • sideBar.foreground#E0E4F1
  • sideBarSectionHeader.background#1A1C3F
  • sideBarSectionHeader.foreground#A68B6D
  • sideBarTitle.foreground#A68B6D
  • statusBar.background#161839
  • statusBar.debuggingBackground#8A6FBF
  • statusBar.foreground#E0E4F1
  • statusBar.noFolderBackground#1A1C3F
  • statusBarItem.hoverBackground#2E304D
  • tab.activeBackground#161839
  • tab.activeBorder#D4A657
  • tab.activeForeground#FFFFFF
  • tab.border#1A1C3F
  • tab.inactiveBackground#1A1C3F
  • tab.inactiveForeground#A68B6D
  • terminal.ansiBlue#5A6FBF
  • terminal.ansiBrightBlue#8A9FFF
  • terminal.ansiBrightCyan#7EDFFF
  • terminal.ansiBrightGreen#BFFFAF
  • terminal.ansiBrightMagenta#D9BFFF
  • terminal.ansiBrightRed#FF9F9F
  • terminal.ansiBrightYellow#FFD68B
  • terminal.ansiCyan#6FAFBF
  • terminal.ansiGreen#9FCF9F
  • terminal.ansiMagenta#B58FCF
  • terminal.ansiRed#CF6F6F
  • terminal.ansiYellow#D4A657
  • terminal.background#1A1C3F
  • terminal.foreground#E0E4F1
  • titleBar.activeBackground#1A1C3F
  • titleBar.activeForeground#E0E4F1
  • titleBar.inactiveBackground#1A1C3F
  • titleBar.inactiveForeground#A68B6D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A7A92italic
string, string.quoted, string.template#F2A65A
keyword, storage.type, storage.modifier#7A8ED6bold
keyword.operator, punctuation.accessor#C0C5E8
variable, variable.other#C0C5E8
variable.parameter#F2A65Aitalic
entity.name.function, support.function#8FA8E8
meta.function-call#A8B2D8
entity.name.class, entity.name.type.class, support.class#9FC5FFbold
entity.name.type, support.type#9FC5FF
entity.name.type.interface#6A9BC8italic
constant.numeric#F2A65A
constant, constant.language, constant.character#F2A65A
constant.language.boolean#F2A65Abold
variable.other.property, support.variable.property#A8B2D8
meta.object-literal.key#8FA8E8
entity.name.tag, punctuation.definition.tag#7A8ED6
entity.other.attribute-name#A88FC8italic
punctuation, meta.brace#C0C5E8
string.regexp#F2A65A
constant.character.escape#A88FC8
meta.decorator, punctuation.decorator#F2A65A
invalid, invalid.illegal#D66B6Bstrikethrough
markup.heading, entity.name.section#7A8ED6bold
markup.bold#F2A65Abold
markup.italic#A88FC8italic
markup.underline.link#6A9BC8
markup.inline.raw, markup.fenced_code#8FB89A
support.type.property-name.json#7A8ED6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F2A65A
support.type.property-name.css#8FA8E8
support.constant.property-value.css#6A9BC8