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#FF2D78
  • activityBar.background#1B1029
  • activityBar.foreground#FF6EC7
  • activityBar.inactiveForeground#6E5A99
  • activityBarBadge.background#FF2D78
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF2D78
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FF2D78
  • breadcrumb.background#1E1730
  • breadcrumb.foreground#8A6FB8
  • breadcrumbPicker.background#1E1730
  • button.background#9B30FF
  • button.foreground#FFFFFF
  • button.hoverBackground#B96BFF
  • dropdown.background#1E1730
  • dropdown.border#3A2E52
  • dropdown.foreground#F0E6FF
  • editor.background#241B2F
  • editor.findMatchBackground#FF6EC766
  • editor.findMatchHighlightBackground#FF6EC733
  • editor.foreground#F0E6FF
  • editor.lineHighlightBackground#2E2440
  • editor.selectionBackground#9B30FF44
  • editor.selectionHighlightBackground#FF6EC726
  • editor.wordHighlightBackground#C77DFF33
  • editorCursor.foreground#FF2D78
  • editorError.foreground#FF2D78
  • editorGroupHeader.tabsBackground#1E1730
  • editorGutter.addedBackground#39FF14
  • editorGutter.deletedBackground#FF2D78
  • editorGutter.modifiedBackground#FF6EC7
  • editorIndentGuide.activeBackground1#C77DFF
  • editorIndentGuide.background1#352A4D
  • editorInfo.foreground#00F5FF
  • editorLineNumber.activeForeground#FF6EC7
  • editorLineNumber.foreground#5A4A7A
  • editorOverviewRuler.addedForeground#39FF14
  • editorOverviewRuler.errorForeground#FF2D78
  • editorOverviewRuler.modifiedForeground#FF6EC7
  • editorWarning.foreground#FFD700
  • editorWhitespace.foreground#3A2E52
  • gitDecoration.addedResourceForeground#39FF14
  • gitDecoration.deletedResourceForeground#FF2D78
  • gitDecoration.modifiedResourceForeground#FF6EC7
  • gitDecoration.untrackedResourceForeground#8A6FB8
  • input.background#1A1426
  • input.border#3A2E52
  • input.foreground#F0E6FF
  • input.placeholderForeground#6E5A99
  • inputOption.activeBackground#C77DFF33
  • inputOption.activeBorder#FF2D78
  • list.activeSelectionBackground#7B2FBE
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#9B30FF55
  • list.hoverBackground#9B30FF26
  • list.inactiveSelectionBackground#2A2042
  • notificationCenterHeader.background#1B1029
  • notificationCenterHeader.foreground#FF6EC7
  • notifications.background#1E1730
  • notifications.border#3A2E52
  • panel.background#1E1730
  • panel.border#3A2E52
  • panelTitle.activeBorder#FF2D78
  • panelTitle.activeForeground#FF2D78
  • quickInput.background#1E1730
  • quickInputList.focusBackground#7B2FBE
  • scrollbarSlider.activeBackground#FF2D78AA
  • scrollbarSlider.background#C77DFF33
  • scrollbarSlider.hoverBackground#C77DFF66
  • sideBar.background#1E1730
  • sideBar.border#3A2E52
  • sideBar.foreground#F0E6FF
  • sideBarSectionHeader.background#2A2042
  • sideBarSectionHeader.foreground#FF6EC7
  • sideBarTitle.foreground#C77DFF
  • statusBar.background#1B1029
  • statusBar.debuggingBackground#FF2D78
  • statusBar.foreground#FF6EC7
  • statusBar.noFolderBackground#2A2042
  • statusBarItem.hoverBackground#FF6EC733
  • tab.activeBackground#241B2F
  • tab.activeBorderTop#FF2D78
  • tab.activeForeground#F0E6FF
  • tab.border#1E1730
  • tab.hoverBackground#9B30FF26
  • tab.inactiveBackground#1A1426
  • tab.inactiveForeground#8A6FB8
  • terminal.ansiBlack#2D0057
  • terminal.ansiBlue#6E44FF
  • terminal.ansiBrightBlack#7B4F9E
  • terminal.ansiBrightBlue#AE8FFF
  • terminal.ansiBrightCyan#66FAFF
  • terminal.ansiBrightGreen#80FF44
  • terminal.ansiBrightMagenta#FF6EC7
  • terminal.ansiBrightRed#FF6EC7
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE84D
  • terminal.ansiCyan#00F5FF
  • terminal.ansiGreen#39FF14
  • terminal.ansiMagenta#FF2D78
  • terminal.ansiRed#FF2D78
  • terminal.ansiWhite#E8D5FF
  • terminal.ansiYellow#FFD700
  • terminal.background#1A1029
  • terminal.foreground#E8D5FF
  • terminalCursor.foreground#FF2D78
  • titleBar.activeBackground#1B1029
  • titleBar.activeForeground#FF6EC7
  • titleBar.inactiveBackground#241B2F
  • titleBar.inactiveForeground#6E5A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E5A99italic
string, string.quoted#F472A6
constant.character.escape#FF2D78bold
constant.numeric, constant.language#FF6EC7bold
keyword, keyword.control, keyword.operator.new#C77DFFbold
storage, storage.type#B96BFFbold
entity.name.function, meta.function-call entity.name.function#FF2D78bold
variable.parameter#D9B8FF
entity.name.class, entity.name.type, support.class#9B7BFFbold
entity.other.inherited-class#C4AEFFitalic
variable, variable.other#F0E6FF
variable.language, support.variable#B96BFF
variable.other.property, support.type.property-name, entity.other.attribute-name#2EE6FF
support.function, support.function.builtin#FF6EC7
keyword.operator, punctuation.separator.key-value#FF2D78
punctuation, meta.brace#9A7FC0
entity.name.tag, meta.tag#C77DFFbold
entity.other.attribute-name.html#FF6EC7
support.type.property-name.css, meta.property-name.css#2EE6FF
meta.property-value.css, support.constant.property-value.css#FF6EC7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF2D78bold
keyword.control.import, keyword.control.from, support.module#C77DFFbold
meta.decorator, entity.name.function.decorator, punctuation.decorator#FFD700italic
meta.type.annotation, support.type.primitive#9B7BFF
variable.other.constant#FF6EC7bold
invalid#FF2D78bold underline
markup.heading, entity.name.section.markdown#C77DFFbold
markup.bold#FF2D78bold
markup.italic#D9B8FFitalic
markup.inline.raw, markup.fenced_code.block#2EE6FF
markup.underline.link#FF6EC7underline