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.background#120E18
  • activityBar.border#2A2234
  • activityBar.foreground#C89090
  • activityBar.inactiveForeground#6A5A78
  • activityBarBadge.background#FF7766
  • activityBarBadge.foreground#1A1420
  • badge.background#FF7766
  • badge.foreground#1A1420
  • breadcrumb.activeSelectionForeground#E8E0F0
  • breadcrumb.background#1A1420
  • breadcrumb.focusForeground#E8E0F0
  • breadcrumb.foreground#8A7A98
  • breadcrumbPicker.background#16101C
  • button.background#883358
  • button.foreground#E8E0F0
  • button.hoverBackground#994468
  • button.secondaryBackground#3A2E44
  • button.secondaryForeground#E8E0F0
  • button.secondaryHoverBackground#4A3E54
  • diffEditor.insertedTextBackground#88C89822
  • diffEditor.removedTextBackground#FF776622
  • dropdown.background#201828
  • dropdown.border#3A2E44
  • dropdown.foreground#E8E0F0
  • editor.background#1A1420
  • editor.findMatchBackground#FF776644
  • editor.findMatchBorder#FF7766
  • editor.findMatchHighlightBackground#FF776633
  • editor.foreground#E8E0F0
  • editor.inactiveSelectionBackground#6B4A7822
  • editor.lineHighlightBackground#261E2E
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#6B4A7855
  • editor.selectionHighlightBackground#6B4A7833
  • editor.wordHighlightBackground#7A5A8833
  • editor.wordHighlightStrongBackground#7A5A8855
  • editorBracketMatch.background#FFD70033
  • editorBracketMatch.border#FFD700
  • editorCursor.background#1A1420
  • editorCursor.foreground#FF8866
  • editorError.foreground#FF7766
  • editorGroupHeader.tabsBackground#16101C
  • editorGroupHeader.tabsBorder#2A2234
  • editorHoverWidget.background#16101C
  • editorHoverWidget.border#3A2E44
  • editorHoverWidget.foreground#E8E0F0
  • editorIndentGuide.activeBackground#5A4A68
  • editorIndentGuide.background#3A2E44
  • editorInfo.foreground#88A8D8
  • editorLineNumber.activeForeground#9A8AB0
  • editorLineNumber.foreground#5A4A68
  • editorSuggestWidget.background#16101C
  • editorSuggestWidget.border#3A2E44
  • editorSuggestWidget.foreground#E8E0F0
  • editorSuggestWidget.highlightForeground#FFD080
  • editorSuggestWidget.selectedBackground#3A2848
  • editorWarning.foreground#FFD080
  • editorWhitespace.foreground#3A2E4466
  • editorWidget.background#16101C
  • editorWidget.border#3A2E44
  • editorWidget.foreground#E8E0F0
  • gitDecoration.addedResourceForeground#88C898
  • gitDecoration.conflictingResourceForeground#D898D8
  • gitDecoration.deletedResourceForeground#FF7766
  • gitDecoration.ignoredResourceForeground#5A4A68
  • gitDecoration.modifiedResourceForeground#FFD080
  • gitDecoration.untrackedResourceForeground#88D8D0
  • input.background#201828
  • input.border#3A2E44
  • input.foreground#E8E0F0
  • input.placeholderForeground#6A5A78
  • inputOption.activeBackground#6B4A78
  • inputOption.activeForeground#E8E0F0
  • list.activeSelectionBackground#3A2848
  • list.activeSelectionForeground#E8E0F0
  • list.errorForeground#FF7766
  • list.focusBackground#3A2848
  • list.highlightForeground#FFD080
  • list.hoverBackground#261E2E
  • list.hoverForeground#E8E0F0
  • list.inactiveSelectionBackground#2A2234
  • list.inactiveSelectionForeground#C8C0D8
  • list.warningForeground#FFD080
  • minimap.background#16101C
  • minimap.findMatchHighlight#FF776688
  • minimap.selectionHighlight#6B4A7888
  • notificationCenterHeader.background#16101C
  • notifications.background#201828
  • notifications.border#3A2E44
  • notifications.foreground#E8E0F0
  • panel.background#16101C
  • panel.border#2A2234
  • panelTitle.activeBorder#C89090
  • panelTitle.activeForeground#E8E0F0
  • panelTitle.inactiveForeground#6A5A78
  • quickInput.background#16101C
  • quickInput.foreground#E8E0F0
  • quickInputList.focusBackground#2A2234
  • quickInputList.focusForeground#E8E0F0
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#7A6A8888
  • scrollbarSlider.background#5A4A6844
  • scrollbarSlider.hoverBackground#6A5A7866
  • sideBar.background#16101C
  • sideBar.border#2A2234
  • sideBar.foreground#C8C0D8
  • sideBarSectionHeader.background#201828
  • sideBarSectionHeader.foreground#B0A8C0
  • sideBarTitle.foreground#E8E0F0
  • statusBar.background#2A1828
  • statusBar.border#3A2234
  • statusBar.debuggingBackground#883344
  • statusBar.debuggingForeground#E8E0F0
  • statusBar.foreground#C8B0B8
  • statusBar.noFolderBackground#3A2E44
  • statusBarItem.hoverBackground#3A2838
  • statusBarItem.remoteBackground#883344
  • statusBarItem.remoteForeground#E8E0F0
  • tab.activeBackground#1A1420
  • tab.activeBorder#00000000
  • tab.activeBorderTop#C89090
  • tab.activeForeground#E8E0F0
  • tab.border#2A2234
  • tab.hoverBackground#201828
  • tab.inactiveBackground#16101C
  • tab.inactiveForeground#8A7A98
  • terminal.ansiBlack#1A1420
  • terminal.ansiBlue#88A8D8
  • terminal.ansiBrightBlack#6A5A78
  • terminal.ansiBrightBlue#A8C8F0
  • terminal.ansiBrightCyan#A8F0E8
  • terminal.ansiBrightGreen#A8E8B8
  • terminal.ansiBrightMagenta#F0B8F0
  • terminal.ansiBrightRed#FFA090
  • terminal.ansiBrightWhite#F8F0FF
  • terminal.ansiBrightYellow#FFE0A0
  • terminal.ansiCyan#88D8D0
  • terminal.ansiGreen#88C898
  • terminal.ansiMagenta#D898D8
  • terminal.ansiRed#FF7766
  • terminal.ansiWhite#E8E0F0
  • terminal.ansiYellow#FFD080
  • terminal.background#16101C
  • terminal.foreground#E8E0F0
  • terminalCursor.foreground#FF8866
  • titleBar.activeBackground#120E18
  • titleBar.activeForeground#C8C0D8
  • titleBar.border#2A2234
  • titleBar.inactiveBackground#120E18
  • titleBar.inactiveForeground#6A5A78
  • tree.indentGuidesStroke#3A2E44

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A5A78italic
string, string.quoted#FFD080—
constant.character.escape#FFE0A0—
string.template, punctuation.definition.string.template#FFD080—
punctuation.definition.template-expression#D898D8—
constant.numeric#FF9080—
constant.language#FF9080italic
constant.other, variable.other.constant#FFD080—
keyword, keyword.control#D898D8—
keyword.operator#88D8D0—
storage, storage.type#D898D8—
storage.modifier#D898D8italic
entity.name.function, meta.function-call, support.function#88C898—
variable.parameter, meta.parameter#FFD080italic
entity.name.class, entity.name.type.class, support.class#88A8D8—
entity.other.inherited-class#A8C8F0italic
entity.name.type, support.type, support.type.primitive#88D8D0—
entity.name.type.interface#88D8D0italic
variable, variable.other#E8E0F0—
variable.other.property, variable.other.object.property, meta.object-literal.key#A8E8B8—
variable.language.this, variable.language.self#FF9080italic
entity.name.tag#FF7766—
entity.other.attribute-name#FFD080italic
support.class.component, entity.name.tag.js, entity.name.tag support.class.component#88A8D8—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD080—
support.type.property-name.css#88C898—
support.constant.property-value.css#FFE0A0—
keyword.other.unit.css#FF9080—
entity.other.attribute-name.pseudo-class.css#D898D8—
support.type.property-name.json#C89090—
string.quoted.double.json#FFD080—
heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading#88A8D8bold
markup.bold#FFE0A0bold
markup.italic#D898D8italic
markup.underline.link#88D8D0—
markup.inline.raw, markup.fenced_code#88C898—
markup.quote#6A5A78italic
punctuation#B0A8C0—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments#B0A8C0—
string.regexp#88D8D0—
meta.decorator, meta.annotation#FFD080italic
keyword.control.import, keyword.control.export, keyword.control.from#D898D8—
invalid, invalid.illegal#FF7766underline
invalid.deprecated#FF8866strikethrough