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#151515
  • activityBar.border#2A2A2A
  • activityBar.foreground#D8D8D2
  • activityBar.inactiveForeground#7D8076
  • activityBarBadge.background#A68ACD
  • activityBarBadge.foreground#0A0A0A
  • breadcrumb.activeSelectionForeground#F2F1EA
  • breadcrumb.focusForeground#D8D8D2
  • breadcrumb.foreground#7D8076
  • button.background#A68ACD
  • button.foreground#0A0A0A
  • button.hoverBackground#967CBF
  • checkbox.background#1E1E1E
  • checkbox.border#2A2A2A
  • contrastBorder#2A2A2A
  • descriptionForeground#A6A89F
  • diffEditor.insertedTextBackground#A68ACD33
  • diffEditor.removedTextBackground#9B83B833
  • disabledForeground#7D8076
  • dropdown.background#1E1E1E
  • dropdown.border#2A2A2A
  • dropdown.foreground#D8D8D2
  • editor.background#202020
  • editor.foreground#D8D8D2
  • editor.lineHighlightBackground#262626
  • editor.lineHighlightBorder#262626
  • editorBracketMatch.background#2F2F2F
  • editorBracketMatch.border#A68ACD
  • editorCodeLens.foreground#7B7B7B
  • editorCursor.foreground#D0A85C
  • editorError.foreground#C59A3F
  • editorGroupHeader.border#2A2A2A
  • editorGroupHeader.noTabsBackground#202020
  • editorGroupHeader.tabsBackground#191919
  • editorGutter.addedBackground#A68ACD
  • editorGutter.background#191919
  • editorGutter.deletedBackground#9B83B8
  • editorGutter.modifiedBackground#C59A3F
  • editorHint.foreground#A68ACD
  • editorHoverWidget.background#1A1A1A
  • editorHoverWidget.border#2A2A2A
  • editorIndentGuide.activeBackground#3C3C3C
  • editorIndentGuide.background#2E2E2E
  • editorInfo.foreground#A68ACD
  • editorLineNumber.activeForeground#A6A89F
  • editorLineNumber.foreground#6B6B6B
  • editorLink.activeForeground#D0A85C
  • editorOverviewRuler.border#121212
  • editorRuler.foreground#2A2A2A
  • editorSuggestWidget.background#1A1A1A
  • editorSuggestWidget.border#2A2A2A
  • editorSuggestWidget.foreground#D8D8D2
  • editorSuggestWidget.selectedBackground#2A2A2A
  • editorWarning.foreground#C59A3F
  • editorWhitespace.foreground#2E2E2E
  • editorWidget.background#1A1A1A
  • editorWidget.border#2A2A2A
  • errorForeground#C59A3F
  • focusBorder#A68ACD
  • foreground#D8D8D2
  • icon.foreground#A6A89F
  • input.background#1E1E1E
  • input.border#2A2A2A
  • input.foreground#D8D8D2
  • input.placeholderForeground#7D8076
  • list.activeSelectionBackground#2A2A2A
  • list.activeSelectionForeground#F2F1EA
  • list.focusBackground#2A2A2A
  • list.highlightForeground#A68ACD
  • list.hoverBackground#202020
  • list.inactiveSelectionBackground#232323
  • list.inactiveSelectionForeground#D8D8D2
  • minimap.findMatchHighlight#A68ACD66
  • minimap.selectionHighlight#C59A3F66
  • notificationCenter.border#2A2A2A
  • notificationCenterHeader.background#151515
  • notifications.background#1A1A1A
  • notifications.border#2A2A2A
  • notifications.foreground#D8D8D2
  • notificationsErrorIcon.foreground#C59A3F
  • notificationsInfoIcon.foreground#A68ACD
  • notificationsWarningIcon.foreground#C59A3F
  • notificationToast.border#2A2A2A
  • panel.background#181818
  • panel.border#2A2A2A
  • panelTitle.activeForeground#D8D8D2
  • panelTitle.inactiveForeground#7D8076
  • peekView.border#2A2A2A
  • peekViewEditor.background#202020
  • peekViewResult.background#1A1A1A
  • peekViewResult.selectionBackground#2A2A2A
  • peekViewResult.selectionForeground#F2F1EA
  • scrollbarSlider.activeBackground#464646CC
  • scrollbarSlider.background#33333366
  • scrollbarSlider.hoverBackground#3C3C3C99
  • selection.background#2E2E2E
  • selection.foreground#F2F1EA
  • selectionHighlight.background#343434
  • sideBar.background#1A1A1A
  • sideBar.border#2A2A2A
  • sideBar.foreground#D8D8D2
  • sideBarSectionHeader.background#171717
  • sideBarSectionHeader.foreground#A6A89F
  • sideBarTitle.foreground#D8D8D2
  • statusBar.background#161616
  • statusBar.border#2A2A2A
  • statusBar.debuggingBackground#1E1E1E
  • statusBar.foreground#D8D8D2
  • statusBar.noFolderBackground#161616
  • statusBarItem.activeBackground#222222
  • statusBarItem.hoverBackground#242424
  • tab.activeBackground#202020
  • tab.activeBorder#A68ACD
  • tab.activeForeground#F2F1EA
  • tab.border#2A2A2A
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#7D8076
  • tab.unfocusedActiveBorder#2A2A2A
  • terminal.ansiBlack#101010
  • terminal.ansiBlue#9B83B8
  • terminal.ansiBrightBlack#3A3A3A
  • terminal.ansiBrightBlue#B59ACB
  • terminal.ansiBrightCyan#A4C690
  • terminal.ansiBrightGreen#A9C979
  • terminal.ansiBrightMagenta#C4A4D3
  • terminal.ansiBrightRed#D6B563
  • terminal.ansiBrightWhite#F2F1EA
  • terminal.ansiBrightYellow#E0C074
  • terminal.ansiCyan#8CBF8A
  • terminal.ansiGreen#8FBF6A
  • terminal.ansiMagenta#A68ACD
  • terminal.ansiRed#C59A3F
  • terminal.ansiWhite#D8D8D2
  • terminal.ansiYellow#D0A85C
  • terminal.background#141414
  • terminal.foreground#D8D8D2
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#D8D8D2
  • titleBar.border#2A2A2A
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#7D8076
  • widget.shadow#00000080
  • window.activeBorder#1C1C1C
  • window.inactiveBorder#121212

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7C7F73italic
string, constant.other.symbol, constant.character.escape, punctuation.definition.string#8FBF6A—
constant.numeric, constant.language, constant.other#C59A3F—
keyword, storage.type, storage.modifier, meta.control#A68ACD—
entity.name.function, support.function, meta.function-call, variable.function#D0A85C—
entity.name.type, entity.name.class, support.type, support.class#D0A85C—
variable, variable.parameter, variable.other#D8D8D2—
keyword.operator, punctuation#B0B3A6—
entity.name.tag#A68ACD—
entity.other.attribute-name#8FBF6A—
invalid, invalid.deprecated#C59A3Funderline