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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Simple Dvkt Mode - Coding Theme