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#5A7DFF
  • activityBar.background#12152F
  • activityBar.foreground#CBD3F0
  • activityBarBadge.background#F2C94C
  • activityBarBadge.foreground#1A1A1A
  • badge.background#F2C94C
  • badge.foreground#1A1A1A
  • button.background#5A7DFF
  • button.foreground#0A0E1A
  • button.hoverBackground#8AB4FF
  • dropdown.background#12152F
  • dropdown.border#2C3E6F
  • dropdown.foreground#E0E5FF
  • editor.background#0A0E1A
  • editor.findMatchBackground#F2C94C70
  • editor.findMatchHighlightBackground#F2C94C30
  • editor.foreground#E0E5FF
  • editor.lineHighlightBackground#1E2A5C20
  • editor.lineHighlightBorder#5A7DFF
  • editor.selectionBackground#5A7DFF60
  • editor.selectionHighlightBackground#5A7DFF30
  • editorBracketMatch.background#5A7DFF33
  • editorBracketMatch.border#5A7DFF88
  • editorCursor.foreground#E0E5FF
  • editorGroupHeader.tabsBackground#0A0E1A
  • editorIndentGuide.activeBackground#5A7DFF
  • editorIndentGuide.background#333755
  • editorLineNumber.activeForeground#E0E5FF
  • editorLineNumber.foreground#7A85B2
  • editorWhitespace.foreground#555A70
  • focusBorder#5A7DFF
  • gitDecoration.conflictingResourceForeground#C58AF9
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.modifiedResourceForeground#61C2D4
  • gitDecoration.untrackedResourceForeground#7ED957
  • input.background#12152F
  • input.border#2C3E6F
  • input.foreground#E0E5FF
  • input.placeholderForeground#555A70
  • inputOption.activeBorder#5A7DFF
  • list.activeSelectionBackground#5A7DFF33
  • list.activeSelectionForeground#E0E5FF
  • list.focusBackground#1E2A5C
  • list.highlightForeground#F2C94C
  • list.hoverBackground#1E2A5C
  • minimap.background#0A0E1A
  • minimapSlider.activeBackground#2C3E6FC0
  • minimapSlider.background#2C3E6F80
  • minimapSlider.hoverBackground#2C3E6FA0
  • panel.background#0A0E1A
  • panel.border#2C3E6F
  • panelTitle.activeBorder#5A7DFF
  • panelTitle.activeForeground#E0E5FF
  • panelTitle.inactiveForeground#7A85B2
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#2C3E6FC0
  • scrollbarSlider.background#2C3E6F80
  • scrollbarSlider.hoverBackground#2C3E6FA0
  • sideBar.background#101330
  • sideBar.foreground#CBD3F0
  • sideBarSectionHeader.background#12152F
  • sideBarSectionHeader.foreground#F2C94C
  • sideBarTitle.foreground#E0E5FF
  • statusBar.background#0C1138
  • statusBar.debuggingBackground#3B2E5C
  • statusBar.foreground#F2C94C
  • statusBar.noFolderBackground#0A0E1A
  • statusBarItem.hoverBackground#1E2A5C
  • tab.activeBackground#151A3C
  • tab.activeBorder#5A7DFF
  • tab.activeForeground#E0E5FF
  • tab.border#2C3E6F
  • tab.inactiveBackground#0A0E1A
  • tab.inactiveForeground#7A85B2
  • terminal.ansiBlue#5A7DFF
  • terminal.ansiBrightBlue#8AB4FF
  • terminal.ansiBrightCyan#9ED9E8
  • terminal.ansiBrightGreen#A6E89D
  • terminal.ansiBrightMagenta#D6A9FF
  • terminal.ansiBrightRed#F28B96
  • terminal.ansiBrightYellow#F9E37A
  • terminal.ansiCyan#61C2D4
  • terminal.ansiGreen#7ED957
  • terminal.ansiMagenta#C58AF9
  • terminal.ansiRed#E06C75
  • terminal.ansiYellow#F2C94C
  • terminal.background#0A0E1A
  • terminal.foreground#E0E5FF
  • titleBar.activeBackground#151A3C
  • titleBar.activeForeground#E0E5FF
  • titleBar.inactiveBackground#101330
  • titleBar.inactiveForeground#7A85B2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555A70italic
string, string.quoted, string.template#7ED957
keyword, storage.type, storage.modifier#5A7DFFbold
keyword.operator, punctuation.accessor#C58AF9
variable, variable.other#E0E5FF
variable.parameter#61C2D4italic
entity.name.function, support.function#F2C94C
meta.function-call#8AB4FF
entity.name.class, entity.name.type.class, support.class#C58AF9bold
entity.name.type, support.type#61C2D4
entity.name.type.interface#5A7DFFitalic
constant.numeric#E06C75
constant, constant.language, constant.character#F2C94C
constant.language.boolean#E06C75bold
variable.other.property, support.variable.property#8AB4FF
meta.object-literal.key#8AB4FF
entity.name.tag, punctuation.definition.tag#5A7DFF
entity.other.attribute-name#61C2D4italic
punctuation, meta.brace#E0E5FF
string.regexp#C58AF9
constant.character.escape#E06C75
meta.decorator, punctuation.decorator#C58AF9
invalid, invalid.illegal#E06C75strikethrough
markup.heading, entity.name.section#5A7DFFbold
markup.bold#5A7DFFbold
markup.italic#61C2D4italic
markup.underline.link#8AB4FF
markup.inline.raw, markup.fenced_code#7ED957
support.type.property-name.json#8AB4FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#61C2D4
support.type.property-name.css#7ED957
support.constant.property-value.css#F2C94C