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—