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#D6435C
  • activityBar.background#2C1A3F
  • activityBar.foreground#EDEDED
  • activityBarBadge.background#D6435C
  • activityBarBadge.foreground#1B0F2E
  • badge.background#D6435C
  • badge.foreground#1B0F2E
  • button.background#D6435C
  • button.foreground#1B0F2E
  • button.hoverBackground#D6435CAA
  • dropdown.background#2F1F44
  • dropdown.border#D6435C
  • dropdown.foreground#EDEDED
  • editor.background#1B0F2E
  • editor.findMatchBackground#D6435C44
  • editor.findMatchHighlightBackground#D6435C22
  • editor.foreground#EDEDED
  • editor.lineHighlightBackground#D6435C30
  • editor.lineHighlightBorder#D6435C80
  • editor.selectionBackground#D6435C55
  • editor.selectionHighlightBackground#D6435C33
  • editorBracketMatch.background#D6435C33
  • editorBracketMatch.border#D6435C
  • editorCursor.foreground#D6435C
  • editorGroupHeader.tabsBackground#2C1A3F
  • editorIndentGuide.activeBackground#D6435C88
  • editorIndentGuide.background#33333344
  • editorLineNumber.activeForeground#D6435C
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#333333
  • focusBorder#D6435C
  • gitDecoration.conflictingResourceForeground#C678DD
  • gitDecoration.deletedResourceForeground#FF7F7F
  • gitDecoration.modifiedResourceForeground#D6435C
  • gitDecoration.untrackedResourceForeground#A3E635
  • input.background#2F1F44
  • input.border#D6435C
  • input.foreground#EDEDED
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#D6435C
  • list.activeSelectionBackground#D6435C55
  • list.activeSelectionForeground#1B0F2E
  • list.focusBackground#D6435C44
  • list.highlightForeground#D6435C
  • list.hoverBackground#D6435C33
  • minimap.background#1B0F2E
  • minimapSlider.activeBackground#D6435C66
  • minimapSlider.background#D6435C22
  • minimapSlider.hoverBackground#D6435C44
  • panel.background#2C1A3F
  • panel.border#1B0F2E
  • panelTitle.activeBorder#D6435C
  • panelTitle.activeForeground#EDEDED
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D6435C88
  • scrollbarSlider.background#33333344
  • scrollbarSlider.hoverBackground#33333388
  • sideBar.background#2C1A3F
  • sideBar.foreground#EDEDED
  • sideBarSectionHeader.background#2C1A3F
  • sideBarSectionHeader.foreground#D6435C
  • sideBarTitle.foreground#D6435C
  • statusBar.background#1B0F2E
  • statusBar.debuggingBackground#D6435C
  • statusBar.foreground#EDEDED
  • statusBar.noFolderBackground#2C1A3F
  • statusBarItem.hoverBackground#D6435C80
  • tab.activeBackground#1B0F2E
  • tab.activeBorder#D6435C
  • tab.activeForeground#EDEDED
  • tab.border#000000
  • tab.inactiveBackground#2C1A3F
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#6A85B1
  • terminal.ansiBrightBlue#82A0FF
  • terminal.ansiBrightCyan#98EFFE
  • terminal.ansiBrightGreen#C8FF8E
  • terminal.ansiBrightMagenta#E5A5FF
  • terminal.ansiBrightRed#FF7F7F
  • terminal.ansiBrightYellow#FFE699
  • terminal.ansiCyan#6FC6C9
  • terminal.ansiGreen#A3E635
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#D6435C
  • terminal.ansiYellow#F2C55C
  • terminal.background#1B0F2E
  • terminal.foreground#EDEDED
  • titleBar.activeBackground#2C1A3F
  • titleBar.activeForeground#EDEDED
  • titleBar.inactiveBackground#1B0F2E
  • titleBar.inactiveForeground#EDEDED

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#A3E635
keyword, storage.type, storage.modifier#D6435Cbold
keyword.operator, punctuation.accessor#C678DD
variable, variable.other#EDEDED
variable.parameter#A0A0A0italic
entity.name.function, support.function#6A85B1
meta.function-call#82A0FF
entity.name.class, entity.name.type.class, support.class#F2C55Cbold
entity.name.type, support.type#82A0FF
entity.name.type.interface#6FC6C9italic
constant.numeric#FF7F7F
constant, constant.language, constant.character#C678DD
constant.language.boolean#FF7F7Fbold
variable.other.property, support.variable.property#D6435C
meta.object-literal.key#F2C55C
entity.name.tag, punctuation.definition.tag#D6435C
entity.other.attribute-name#C678DDitalic
punctuation, meta.brace#EDEDED
string.regexp#FF7F7F
constant.character.escape#C678DD
meta.decorator, punctuation.decorator#6A85B1
invalid, invalid.illegal#FF7F7Fstrikethrough
markup.heading, entity.name.section#D6435Cbold
markup.bold#D6435Cbold
markup.italic#A3E635italic
markup.underline.link#6A85B1
markup.inline.raw, markup.fenced_code#A3E635
support.type.property-name.json#6A85B1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C678DD
support.type.property-name.css#6FC6C9
support.constant.property-value.css#A3E635
themesmith by CyberBoost - VS Code Theme