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#0C0C0C
  • activityBar.border#1E1E1E
  • 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#121212
  • checkbox.border#1E1E1E
  • contrastBorder#1E1E1E
  • descriptionForeground#A6A89F
  • diffEditor.insertedTextBackground#A68ACD33
  • diffEditor.removedTextBackground#9B83B833
  • disabledForeground#7D8076
  • dropdown.background#121212
  • dropdown.border#1E1E1E
  • dropdown.foreground#D8D8D2
  • editor.background#121212
  • editor.foreground#D8D8D2
  • editor.lineHighlightBackground#181818
  • editor.lineHighlightBorder#181818
  • editorBracketMatch.background#212121
  • editorBracketMatch.border#A68ACD
  • editorCodeLens.foreground#6C6C6C
  • editorCursor.foreground#D0A85C
  • editorError.foreground#C59A3F
  • editorGroupHeader.border#1E1E1E
  • editorGroupHeader.noTabsBackground#121212
  • editorGroupHeader.tabsBackground#0F0F0F
  • editorGutter.addedBackground#A68ACD
  • editorGutter.background#0E0E0E
  • editorGutter.deletedBackground#9B83B8
  • editorGutter.modifiedBackground#C59A3F
  • editorHint.foreground#A68ACD
  • editorHoverWidget.background#101010
  • editorHoverWidget.border#1E1E1E
  • editorIndentGuide.activeBackground#2C2C2C
  • editorIndentGuide.background#1E1E1E
  • editorInfo.foreground#A68ACD
  • editorLineNumber.activeForeground#A6A89F
  • editorLineNumber.foreground#5C5C5C
  • editorLink.activeForeground#D0A85C
  • editorOverviewRuler.border#0A0A0A
  • editorRuler.foreground#1E1E1E
  • editorSuggestWidget.background#101010
  • editorSuggestWidget.border#1E1E1E
  • editorSuggestWidget.foreground#D8D8D2
  • editorSuggestWidget.selectedBackground#202020
  • editorWarning.foreground#C59A3F
  • editorWhitespace.foreground#202020
  • editorWidget.background#101010
  • editorWidget.border#1E1E1E
  • errorForeground#C59A3F
  • focusBorder#A68ACD
  • foreground#D8D8D2
  • icon.foreground#A6A89F
  • input.background#121212
  • input.border#1E1E1E
  • input.foreground#D8D8D2
  • input.placeholderForeground#7D8076
  • list.activeSelectionBackground#202020
  • list.activeSelectionForeground#F2F1EA
  • list.focusBackground#202020
  • list.highlightForeground#A68ACD
  • list.hoverBackground#181818
  • list.inactiveSelectionBackground#1A1A1A
  • list.inactiveSelectionForeground#D8D8D2
  • minimap.findMatchHighlight#A68ACD66
  • minimap.selectionHighlight#C59A3F66
  • notificationCenter.border#1E1E1E
  • notificationCenterHeader.background#0C0C0C
  • notifications.background#101010
  • notifications.border#1E1E1E
  • notifications.foreground#D8D8D2
  • notificationsErrorIcon.foreground#C59A3F
  • notificationsInfoIcon.foreground#A68ACD
  • notificationsWarningIcon.foreground#C59A3F
  • notificationToast.border#1E1E1E
  • panel.background#0E0E0E
  • panel.border#1E1E1E
  • panelTitle.activeForeground#D8D8D2
  • panelTitle.inactiveForeground#7D8076
  • peekView.border#1E1E1E
  • peekViewEditor.background#121212
  • peekViewResult.background#101010
  • peekViewResult.selectionBackground#202020
  • peekViewResult.selectionForeground#F2F1EA
  • scrollbarSlider.activeBackground#383838CC
  • scrollbarSlider.background#25252566
  • scrollbarSlider.hoverBackground#2F2F2F99
  • selection.background#202020
  • selection.foreground#F2F1EA
  • selectionHighlight.background#262626
  • sideBar.background#101010
  • sideBar.border#1E1E1E
  • sideBar.foreground#D8D8D2
  • sideBarSectionHeader.background#0E0E0E
  • sideBarSectionHeader.foreground#A6A89F
  • sideBarTitle.foreground#D8D8D2
  • statusBar.background#0D0D0D
  • statusBar.border#1E1E1E
  • statusBar.debuggingBackground#161616
  • statusBar.foreground#D8D8D2
  • statusBar.noFolderBackground#0D0D0D
  • statusBarItem.activeBackground#191919
  • statusBarItem.hoverBackground#1B1B1B
  • tab.activeBackground#121212
  • tab.activeBorder#A68ACD
  • tab.activeForeground#F2F1EA
  • tab.border#1E1E1E
  • tab.inactiveBackground#0F0F0F
  • tab.inactiveForeground#7D8076
  • tab.unfocusedActiveBorder#1E1E1E
  • terminal.ansiBlack#0A0A0A
  • terminal.ansiBlue#9B83B8
  • terminal.ansiBrightBlack#2E2E2E
  • 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#0C0C0C
  • terminal.foreground#D8D8D2
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#D8D8D2
  • titleBar.border#1E1E1E
  • titleBar.inactiveBackground#090909
  • titleBar.inactiveForeground#7D8076
  • widget.shadow#00000080
  • window.activeBorder#121212
  • window.inactiveBorder#0A0A0A

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