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#32302f
  • activityBar.foreground#8d6b6b
  • badge.foreground#8d6b6b
  • button.background#282828
  • button.foreground#8d6b6b
  • debugExceptionWidget.border#32302f
  • dropdown.background#282828
  • dropdown.foreground#8d6b6b
  • dropdown.listBackground#282828
  • editor.background#32302f
  • editor.foreground#fdf4c1
  • editor.lineHighlightBackground#282828
  • editor.selectionBackground#282828
  • editorCursor.foreground#fdf4c1
  • editorGroupHeader.tabsBackground#32302f
  • editorHoverWidget.border#32302f
  • editorSuggestWidget.border#32302f
  • editorWhitespace.foreground#504945
  • editorWidget.background#32302f
  • editorWidget.border#32302f
  • editorWidget.foreground#8d6b6b
  • focusBorder#32302f
  • icon.foreground#8d6b6b
  • input.background#32302f
  • input.border#32302f
  • input.foreground#8d6b6b
  • input.placeholderForeground#8d6b6b
  • list.activeSelectionBackground#282828
  • list.activeSelectionForeground#8d6b6b
  • list.focusForeground#8d6b6b
  • list.hoverBackground#282828
  • list.hoverForeground#8d6b6b
  • list.inactiveSelectionBackground#282828
  • list.inactiveSelectionForeground#8d6b6b
  • notificationCenter.border#32302f
  • panel.border#32302f
  • panelTitle.activeForeground#8d6b6b
  • scrollbar.shadow#32302f
  • sideBar.background#32302f
  • sideBar.border#32302f
  • sideBar.foreground#8d6b6b
  • sideBarSectionHeader.background#32302f
  • statusBar.background#32302f
  • statusBar.debuggingBackground#32302f
  • statusBar.debuggingForeground#8d6b6b
  • statusBar.foreground#8d6b6b
  • statusBar.noFolderBackground#32302f
  • statusBar.noFolderForeground#8d6b6b
  • statusBarItem.prominentBackground#32302f
  • statusBarItem.prominentForeground#8d6b6b
  • tab.activeBackground#32302f
  • tab.activeForeground#ca9a9a
  • tab.border#32302f
  • tab.inactiveBackground#32302f
  • tab.inactiveForeground#8d6b6b
  • textLink.foreground#ca9a9a
  • titleBar.activeBackground#32302f
  • titleBar.activeForeground#8d6b6b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7C6F64
string#528B8B
constant.numeric#D3869B
constant.language#BBAA97
constant.character, constant.other#BBAA97
variable#83A598
keyword#DD6F48
storage#DD6F48
storage.type#66999D
entity.name.class#A89984underline
entity.other.inherited-class#A89984italic underline
entity.name.function#A89984
variable.parameter#83A598italic
entity.name.tag#A89984
entity.other.attribute-name#83A598
support.function#FE8019
support.constant#FE8019
support.type, support.class#FE8019italic
support.other.variable
invalid#FFFFFF bold
invalid.deprecated#FFFFFF bold
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...

Darktooth Material Theme by pedrotpo - VS Code Theme