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#D4A030
  • activityBar.background#0E1238
  • activityBar.foreground#3A9AA6
  • activityBarBadge.background#D4A030
  • activityBarBadge.foreground#0C0F2D
  • badge.background#D4A030
  • badge.foreground#0C0F2D
  • button.background#151A45
  • button.foreground#FFFFFF
  • button.hoverBackground#1F274F
  • dropdown.background#0A0D25
  • dropdown.border#151A45
  • dropdown.foreground#E0E6FF
  • editor.background#0C0F2D
  • editor.findMatchBackground#D4A03044
  • editor.findMatchHighlightBackground#D4A03022
  • editor.foreground#E0E6FF
  • editor.lineHighlightBackground#151A4566
  • editor.lineHighlightBorder#151A4599
  • editor.selectionBackground#3A9AA6AA
  • editor.selectionHighlightBackground#3A9AA655
  • editorBracketMatch.background#D4A03033
  • editorBracketMatch.border#D4A030
  • editorCursor.foreground#D4A030
  • editorGroupHeader.tabsBackground#0C0F2D
  • editorIndentGuide.activeBackground#2A3A5F88
  • editorIndentGuide.background#2A3A5F44
  • editorLineNumber.activeForeground#3A9AA6
  • editorLineNumber.foreground#3A4A7F
  • editorWhitespace.foreground#2A3A5F
  • focusBorder#D4A030
  • gitDecoration.conflictingResourceForeground#FFE66B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#D4A030
  • gitDecoration.untrackedResourceForeground#7EE8A3
  • input.background#0A0D25
  • input.border#151A45
  • input.foreground#E0E6FF
  • input.placeholderForeground#3A4A7F
  • inputOption.activeBorder#D4A030
  • list.activeSelectionBackground#151A45
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#151A45
  • list.highlightForeground#D4A030
  • list.hoverBackground#151A4566
  • minimap.background#0C0F2D
  • minimapSlider.activeBackground#D4A03066
  • minimapSlider.background#D4A03022
  • minimapSlider.hoverBackground#D4A03044
  • panel.background#0C0F2D
  • panel.border#151A45
  • panelTitle.activeBorder#D4A030
  • panelTitle.activeForeground#D4A030
  • panelTitle.inactiveForeground#B0C4FF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D4A03088
  • scrollbarSlider.background#3A4A7F44
  • scrollbarSlider.hoverBackground#3A4A7F88
  • sideBar.background#0A0D25
  • sideBar.foreground#B0C4FF
  • sideBarSectionHeader.background#0E1238
  • sideBarSectionHeader.foreground#D4A030
  • sideBarTitle.foreground#3A9AA6
  • statusBar.background#151A45
  • statusBar.debuggingBackground#D4A030
  • statusBar.foreground#E0E6FF
  • statusBar.noFolderBackground#0E1238
  • statusBarItem.hoverBackground#1F274F
  • tab.activeBackground#151A45
  • tab.activeBorder#D4A030
  • tab.activeForeground#FFFFFF
  • tab.border#0C0F2D
  • tab.inactiveBackground#0A0D25
  • tab.inactiveForeground#B0C4FF
  • terminal.ansiBlue#3A9AA6
  • terminal.ansiBrightBlue#5ABED0
  • terminal.ansiBrightCyan#8FFFE0
  • terminal.ansiBrightGreen#9EF8C3
  • terminal.ansiBrightMagenta#E8AFFF
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFF68B
  • terminal.ansiCyan#5FD7D7
  • terminal.ansiGreen#7EE8A3
  • terminal.ansiMagenta#C88FFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFE66B
  • terminal.background#0C0F2D
  • terminal.foreground#E0E6FF
  • titleBar.activeBackground#0E1238
  • titleBar.activeForeground#E0E6FF
  • titleBar.inactiveBackground#0C0F2D
  • titleBar.inactiveForeground#B0C4FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A8Fitalic
string, string.quoted, string.template#5FD7D7
keyword, storage.type, storage.modifier#D4A030bold
keyword.operator, punctuation.accessor#3A9AA6
variable, variable.other#B0C4FF
variable.parameter#FFB86Bitalic
entity.name.function, support.function#3A9AA6
meta.function-call#B0C4FF
entity.name.class, entity.name.type.class, support.class#3A9AA6bold
entity.name.type, support.type#3A9AA6
entity.name.type.interface#5FD7D7italic
constant.numeric#FF9B6B
constant, constant.language, constant.character#FFB86B
constant.language.boolean#FF9B6Bbold
variable.other.property, support.variable.property#B0C4FF
meta.object-literal.key#D4A030
entity.name.tag, punctuation.definition.tag#D4A030
entity.other.attribute-name#C88FFFitalic
punctuation, meta.brace#3A9AA6
string.regexp#FF9B6B
constant.character.escape#C88FFF
meta.decorator, punctuation.decorator#FFE66B
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#D4A030bold
markup.bold#FFB86Bbold
markup.italic#C88FFFitalic
markup.underline.link#5FD7D7
markup.inline.raw, markup.fenced_code#7EE8A3
support.type.property-name.json#D4A030
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE66B
support.type.property-name.css#3A9AA6
support.constant.property-value.css#5FD7D7