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#7A3D9F
  • activityBar.background#12081F
  • activityBar.foreground#BFA99C
  • activityBarBadge.background#7A3D9F
  • activityBarBadge.foreground#E5D8B3
  • badge.background#7A3D9F
  • badge.foreground#E5D8B3
  • button.background#7A3D9F
  • button.foreground#E5D8B3
  • button.hoverBackground#8A4DAF
  • dropdown.background#160C23
  • dropdown.border#7A3D9F40
  • dropdown.foreground#E5D8B3
  • editor.background#1B0D2E
  • editor.findMatchBackground#00D4C822
  • editor.findMatchHighlightBackground#00D4C811
  • editor.foreground#E5D8B3
  • editor.lineHighlightBackground#7A3D9F20
  • editor.lineHighlightBorder#7A3D9F40
  • editor.selectionBackground#7A3D9F33
  • editor.selectionHighlightBackground#7A3D9F1A
  • editorBracketMatch.background#7A3D9F22
  • editorBracketMatch.border#7A3D9F
  • editorCursor.foreground#00D4C8
  • editorGroupHeader.tabsBackground#12081F
  • editorIndentGuide.activeBackground#7A3D9F44
  • editorIndentGuide.background#7A3D9F22
  • editorLineNumber.activeForeground#7A3D9F
  • editorLineNumber.foreground#5A4A6A
  • editorWhitespace.foreground#7A3D9F33
  • focusBorder#7A3D9F
  • gitDecoration.conflictingResourceForeground#FFE66B
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#00D4C8
  • gitDecoration.untrackedResourceForeground#7EE8A3
  • input.background#160C23
  • input.border#7A3D9F40
  • input.foreground#E5D8B3
  • input.placeholderForeground#5A4A6A
  • inputOption.activeBorder#7A3D9F
  • list.activeSelectionBackground#7A3D9F40
  • list.activeSelectionForeground#E5D8B3
  • list.focusBackground#7A3D9F33
  • list.highlightForeground#7A3D9F
  • list.hoverBackground#7A3D9F20
  • minimap.background#160C23
  • minimapSlider.activeBackground#7A3D9F66
  • minimapSlider.background#7A3D9F22
  • minimapSlider.hoverBackground#7A3D9F44
  • panel.background#160C23
  • panel.border#7A3D9F40
  • panelTitle.activeBorder#7A3D9F
  • panelTitle.activeForeground#7A3D9F
  • panelTitle.inactiveForeground#BFA99C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#7A3D9F66
  • scrollbarSlider.background#7A3D9F22
  • scrollbarSlider.hoverBackground#7A3D9F44
  • sideBar.background#160C23
  • sideBar.foreground#BFA99C
  • sideBarSectionHeader.background#12081F
  • sideBarSectionHeader.foreground#7A3D9F
  • sideBarTitle.foreground#7A3D9F
  • statusBar.background#12081F
  • statusBar.debuggingBackground#7A3D9F
  • statusBar.foreground#E5D8B3
  • statusBar.noFolderBackground#160C23
  • statusBarItem.hoverBackground#2A122F
  • tab.activeBackground#1B0D2E
  • tab.activeBorder#7A3D9F
  • tab.activeForeground#E5D8B3
  • tab.border#12081F
  • tab.inactiveBackground#160C23
  • tab.inactiveForeground#BFA99C
  • terminal.ansiBlue#6A5EE9
  • terminal.ansiBrightBlue#8FA6FF
  • terminal.ansiBrightCyan#9ED8F3
  • terminal.ansiBrightGreen#9EF8C3
  • terminal.ansiBrightMagenta#E8AFFF
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFF68B
  • terminal.ansiCyan#00D4C8
  • terminal.ansiGreen#7EE8A3
  • terminal.ansiMagenta#C88FFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFE66B
  • terminal.background#160C23
  • terminal.foreground#E5D8B3
  • titleBar.activeBackground#12081F
  • titleBar.activeForeground#E5D8B3
  • titleBar.inactiveBackground#160C23
  • titleBar.inactiveForeground#BFA99C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6F6Fitalic
string, string.quoted, string.template#00D4C8—
keyword, storage.type, storage.modifier#D0A0FFbold
keyword.operator, punctuation.accessor#BFA99C—
variable, variable.other#E5D8B3—
variable.parameter#FFB86Bitalic
entity.name.function, support.function#7EE8A3—
meta.function-call#9EF8C3—
entity.name.class, entity.name.type.class, support.class#D0A0FFbold
entity.name.type, support.type#D0A0FF—
entity.name.type.interface#7A9FC8italic
constant.numeric#FF9B6B—
constant, constant.language, constant.character#FFB86B—
constant.language.boolean#FF9B6Bbold
variable.other.property, support.variable.property#BFA99C—
meta.object-literal.key#7EE8A3—
entity.name.tag, punctuation.definition.tag#C88FFF—
entity.other.attribute-name#FFB86Bitalic
punctuation, meta.brace#BFA99C—
string.regexp#FF9B6B—
constant.character.escape#C88FFF—
meta.decorator, punctuation.decorator#FFE66B—
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#C88FFFbold
markup.bold#FFB86Bbold
markup.italic#C88FFFitalic
markup.underline.link#00D4C8—
markup.inline.raw, markup.fenced_code#7EE8A3—
support.type.property-name.json#7EE8A3—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE66B—
support.type.property-name.css#7EE8A3—
support.constant.property-value.css#00D4C8—