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—