Skip to main content
CodingTheme

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#ffffff
  • activityBar.dropBorder#ffffff
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#000000
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#000000
  • badge.background#ffffff
  • badge.foreground#000000
  • button.background#ffffff
  • button.foreground#000000
  • button.hoverBackground#ffffff
  • checkbox.border#000000
  • contrastActiveBorder#000000
  • contrastBorder#000000
  • diffEditor.border#000000
  • diffEditor.diagonalFill#000000
  • diffEditor.insertedTextBackground#ffffff
  • diffEditor.insertedTextBorder#000000
  • diffEditor.removedTextBackground#ffffff
  • diffEditor.removedTextBorder#000000
  • dropdown.border#000000
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.selectionBackground#999999
  • editor.selectionHighlightBackground#cccccc
  • editorGroup.border#000000
  • editorGroup.dropBackground#0000007a
  • editorGroupHeader.tabsBorder#000000
  • extensionBadge.remoteBackground#000000
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.prominentBackground#ffffff
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#ffffff
  • focusBorder#000000
  • foreground#000000
  • icon.foreground#000000
  • input.border#000000
  • inputOption.activeBorder#000000
  • list.activeSelectionBackground#ffffff
  • list.activeSelectionForeground#000000
  • list.inactiveSelectionBackground#ffffff
  • list.inactiveSelectionForeground#000000
  • menu.border#000000
  • menu.selectionBackground#ffffff
  • menu.selectionBorder#000000
  • menu.selectionForeground#000000
  • menubar.selectionBorder#000000
  • notificationCenter.border#000000
  • notificationCenterHeader.background#ffffff
  • notificationsErrorIcon.foreground#000000
  • notificationsInfoIcon.foreground#000000
  • notificationsWarningIcon.foreground#000000
  • notificationToast.border#000000
  • panel.border#000000
  • panelInput.border#000000
  • selection.background#999999
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#000000
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • tab.border#000000
  • terminal.border#000000
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#000000
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#000000
  • widget.shadow#00000000
  • window.activeBorder#000000
  • window.inactiveBorder#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.function, variable.functionitalic
meta.function-call entity.name.functionitalic
entity.name.functionbold
constant.other.object.key string.unquotedbold
string.quoted, string, punctuation.tag.definition.string, tag.stringitalic
commentitalic
support.type.property-name.json#000000bold
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080

Shiki preview

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

Loading...

High Contrast for E Ink by fujimo-t - VS Code Theme