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#ede5dc
  • activityBar.border#ddd5c8
  • activityBar.foreground#7c3aed
  • activityBar.inactiveForeground#b5a795
  • activityBarBadge.background#7c3aed
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeForeground#7c3aed
  • breadcrumb.background#f5f0eb
  • breadcrumb.foreground#a08878
  • button.background#7c3aed
  • button.foreground#ffffff
  • button.hoverBackground#6d28d9
  • button.secondaryBackground#ddd5c8
  • button.secondaryForeground#2d2320
  • diffEditor.insertedTextBackground#16a34a18
  • diffEditor.removedTextBackground#b91c1c18
  • dropdown.background#f5f0eb
  • dropdown.border#ddd5c8
  • dropdown.foreground#2d2320
  • editor.background#f5f0eb
  • editor.findMatchBackground#7c3aed40
  • editor.findMatchHighlightBackground#7c3aed20
  • editor.foreground#2d2320
  • editor.lineHighlightBackground#ede5dc
  • editor.selectionBackground#7c3aed30
  • editor.selectionHighlightBackground#7c3aed18
  • editor.wordHighlightBackground#a78bfa25
  • editorBracketMatch.background#7c3aed25
  • editorBracketMatch.border#7c3aed70
  • editorCursor.foreground#7c3aed
  • editorGroupHeader.tabsBackground#ede5dc
  • editorIndentGuide.activeBackground1#b5a795
  • editorIndentGuide.background1#ddd5c8
  • editorLineNumber.activeForeground#7c3aed
  • editorLineNumber.foreground#c4b5a0
  • editorRuler.foreground#ddd5c8
  • editorWhitespace.foreground#c4b5a0
  • gitDecoration.addedResourceForeground#16a34a
  • gitDecoration.deletedResourceForeground#b91c1c
  • gitDecoration.ignoredResourceForeground#b5a795
  • gitDecoration.modifiedResourceForeground#d97706
  • gitDecoration.untrackedResourceForeground#22c55e
  • input.background#f5f0eb
  • input.border#ddd5c8
  • input.foreground#2d2320
  • input.placeholderForeground#b5a795
  • inputOption.activeBorder#7c3aed
  • list.activeSelectionBackground#ddd5c8
  • list.activeSelectionForeground#7c3aed
  • list.focusBackground#ddd5c8
  • list.highlightForeground#7c3aed
  • list.hoverBackground#e8e0d6
  • list.inactiveSelectionBackground#e5ddd4
  • minimap.background#ede5dc
  • minimap.selectionHighlight#7c3aed40
  • notificationLink.foreground#7c3aed
  • notifications.background#f5f0eb
  • notifications.foreground#2d2320
  • panel.background#ede5dc
  • panel.border#ddd5c8
  • panelTitle.activeBorder#7c3aed
  • panelTitle.activeForeground#7c3aed
  • panelTitle.inactiveForeground#a08878
  • scrollbarSlider.activeBackground#7c3aed60
  • scrollbarSlider.background#c4b5a080
  • scrollbarSlider.hoverBackground#a08878aa
  • sideBar.background#ede5dc
  • sideBar.border#ddd5c8
  • sideBar.foreground#4a3f38
  • sideBarSectionHeader.background#e5ddd4
  • sideBarSectionHeader.border#ddd5c8
  • sideBarSectionHeader.foreground#5b21b6
  • sideBarTitle.foreground#7c3aed
  • statusBar.background#7c3aed
  • statusBar.border#7c3aed
  • statusBar.debuggingBackground#a78bfa
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#5b21b6
  • statusBarItem.hoverBackground#6d28d9
  • statusBarItem.remoteBackground#5b21b6
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#f5f0eb
  • tab.activeBorderTop#7c3aed
  • tab.activeForeground#7c3aed
  • tab.border#ede5dc
  • tab.hoverBackground#f0e8de
  • tab.inactiveBackground#ede5dc
  • tab.inactiveForeground#a08878
  • terminal.ansiBlue#2563eb
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#22d3ee
  • terminal.ansiBrightGreen#22c55e
  • terminal.ansiBrightMagenta#a78bfa
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightYellow#d97706
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#16a34a
  • terminal.ansiMagenta#7c3aed
  • terminal.ansiRed#b91c1c
  • terminal.ansiYellow#92400e
  • terminal.background#ede5dc
  • terminal.foreground#2d2320
  • terminalCursor.foreground#7c3aed
  • titleBar.activeBackground#ede5dc
  • titleBar.activeForeground#7c3aed
  • titleBar.border#ddd5c8
  • titleBar.inactiveBackground#ede5dc
  • titleBar.inactiveForeground#b5a795

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9ca3afitalic
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#7c3aedbold
string, string.quoted, string.template#16a34a
constant.character.escape#d97706
entity.name.function, support.function, meta.function-call entity.name.function#2563eb
variable.parameter#c2410citalic
variable, variable.other#2d2320
constant, variable.other.constant, constant.language#d97706bold
constant.numeric#ea580c
constant.language.boolean, constant.language.null, constant.language.undefined#b91c1cbold
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#5b21b6bold
entity.name.tag#7c3aed
entity.other.attribute-name#c2410c
support.type.property-name.css#2563eb
support.constant.property-value.css#16a34a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5b21b6
keyword.operator#6b7280
punctuation#9ca3af
keyword.control.import, keyword.control.export, keyword.control.from#be185d
meta.decorator, entity.name.function.decorator#d97706
support.type.property-name.json, meta.object-literal.key#2563eb
variable.language.special.self.python#7c3aeditalic
invalid#b91c1cunderline