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#000
  • activityBar.border#222426
  • activityBar.dropBackground#222426
  • activityBar.foreground#fff
  • activityBarBadge.background#fff
  • activityBarBadge.foreground#000
  • badge.background#fff
  • badge.foreground#000
  • button.background#f700a9
  • button.foreground#fff
  • button.hoverBackground#f700a9
  • debugToolBar.background#000
  • descriptionForeground#fff
  • diffEditor.insertedTextBackground#0096872d
  • diffEditor.removedTextBackground#ff00002d
  • dropdown.background#fff
  • dropdown.border#222426
  • dropdown.foreground#000
  • dropdown.listBackground#fff
  • editor.background#000000
  • editor.foreground#c7c6f8
  • editor.lineHighlightBackground#1b1b1b
  • editor.selectionBackground#505050
  • editorCursor.foreground#f006e0
  • editorGroup.background#000
  • editorGroup.border#222426
  • editorGroup.dropBackground#222426
  • editorGroupHeader.noTabsBackground#000
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#222426
  • editorWhitespace.foreground#505050
  • errorForeground#ff0000
  • extensionButton.prominentBackground#222426
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#fff
  • focusBorder#f700a9
  • foreground#fff
  • input.background#000
  • input.border#222426
  • input.foreground#fff
  • input.placeholderForeground#222426
  • inputOption.activeBorder#fff
  • inputValidation.errorBackground#000
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBackground#000
  • inputValidation.infoBorder#f700a9
  • inputValidation.warningBackground#000
  • inputValidation.warningBorder#e6a23c
  • list.activeSelectionBackground#222426
  • list.activeSelectionForeground#fff
  • list.focusBackground#222426
  • list.focusForeground#fff
  • list.highlightForeground#f700a9
  • list.hoverBackground#222426
  • list.hoverForeground#fff
  • list.inactiveFocusBackground#222426
  • list.inactiveFocusForeground#fff
  • list.inactiveSelectionBackground#222426
  • list.inactiveSelectionForeground#fff
  • list.invalidItemForeground#ff4545
  • notificationCenter.border#222426
  • notificationCenterHeader.background#000
  • notificationCenterHeader.foreground#fff
  • notificationLink.foreground#222426
  • notifications.background#000
  • notifications.border#000
  • notifications.foreground#fff
  • notificationToast.border#222426
  • panel.background#000
  • panel.border#222426
  • panel.dropBackground#222426
  • panelTitle.activeBorder#fff
  • peekView.border#222426
  • peekViewEditor.background#000
  • pickerGroup.border#222426
  • pickerGroup.foreground#fff
  • progressBar.background#fff
  • scrollbar.shadow#000
  • scrollbarSlider.activeBackground#fff
  • scrollbarSlider.background#222426
  • scrollbarSlider.hoverBackground#fff
  • selection.background#000
  • sideBar.background#000
  • sideBar.border#222426
  • sideBar.dropBackground#222426
  • sideBar.foreground#fff
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.foreground#fff
  • statusBar.background#000
  • statusBar.border#222426
  • statusBar.debuggingBackground#000
  • statusBar.debuggingBorder#222426
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#1C1C1D
  • statusBarItem.hoverBackground#000
  • tab.activeBackground#000
  • tab.activeBorder#fff
  • tab.border#222426
  • tab.hoverBackground#000
  • tab.hoverBorder#fff
  • tab.inactiveBackground#000
  • tab.unfocusedHoverBackground#000
  • textBlockQuote.background#000
  • textBlockQuote.border#222426
  • textCodeBlock.background#000
  • textLink.activeForeground#f700a9
  • textLink.foreground#fff
  • textPreformat.foreground#fff
  • textSeparator.foreground#fff
  • titleBar.activeBackground#000
  • titleBar.activeForeground#fff
  • titleBar.border#222426
  • titleBar.inactiveBackground#000
  • titleBar.inactiveForeground#fff
  • walkThrough.embeddedEditorBackground#000
  • welcomePage.buttonBackground#000
  • welcomePage.buttonHoverBackground#fff
  • widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9f9f9fff—
string#f006e0—
constant.numeric#fff235—
constant.language#07ac90ff—
constant.character, constant.other#1c87c7—
variable#5b6dd4ff—
keyword#7100f5—
storage, storage.type#00d181—
storage.type.core.rust#fc0000ff—
storage.type.rust#7100f5—
entity.name.class#fc0000ffunderline
entity.other.inherited-class#fc0000ff—
entity.name.function#1db0ff—
variable.parameter#fc0000ff—
entity.name.tag#ff00ffff
entity.other.attribute-name#8c4600ff
support.function#c00000—
support.constant#fc0000ff—
support.type, support.class#fc0000ff—
support.other.variable#ffffffff—
invalid#ffffffff
invalid.deprecated#ffffffff—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
Simple Dvkt Mode by dvkt - VS Code Theme