Skip to main content
CodingTheme

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#070707
  • activityBar.border#d3830b
  • activityBar.dropBackground#d3830b
  • activityBar.foreground#d3830b
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#d3830b
  • activityBarBadge.foreground#ffffff
  • badge.background#d3830b
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#ffffff
  • button.background#d3830b
  • debugToolBar.background#070707
  • debugToolBar.border#d3830b
  • dropdown.background#070707
  • dropdown.border#d3830b
  • dropdown.foreground#ffffff
  • dropdown.listBackground#d3830b
  • editor.background#070707
  • editorCursor.foreground#ffffff
  • editorHoverWidget.background#070707
  • editorLineNumber.activeForeground#ffffff
  • editorWidget.background#070707
  • editorWidget.border#d3830b
  • focusBorder#d3830b
  • input.background#070707
  • input.border#d3830b
  • list.activeSelectionBackground#d3830b
  • list.hoverBackground#d3830b
  • list.inactiveFocusBackground#d3830b
  • listFilterWidget.background#070707
  • menu.background#070707
  • menu.border#d3830b
  • menu.foreground#ffffff
  • menu.selectionBackground#d3830b
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#ffffff
  • menubar.selectionBackground#d3830b
  • menubar.selectionForeground#ffffff
  • notificationCenter.border#d3830b
  • notificationToast.border#d3830b
  • panel.background#070707
  • panel.border#d3830b
  • panelTitle.activeBorder#d3830b
  • panelTitle.activeForeground#ffffff
  • scrollbar.shadow#d3830b
  • sideBar.background#070707
  • sideBar.border#d3830b
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#d3830b
  • sideBarSectionHeader.border#d3830b
  • statusBar.background#070707
  • statusBar.border#d3830b
  • statusBar.debuggingBackground#d3830b
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#d3830b
  • statusBarItem.activeBackground#d3830b
  • statusBarItem.hoverBackground#d3830b
  • tab.activeBackground#d3830b
  • tab.border#d3830b
  • tab.hoverBorder#ffffff
  • tab.inactiveBackground#070707
  • tab.inactiveForeground#ffffff
  • terminal.background#070707
  • terminal.border#d3830b
  • terminal.foreground#ffffff
  • titleBar.activeBackground#070707
  • titleBar.border#d3830b
  • widget.shadow#d3830b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment#b5ffac
string#b9a703
constant.numeric#9462f1
constant.language#aa86ee
constant.character, constant.other#af8bf1
variable
keyword#b60345
storage#b60345
storage.type#1dcaecitalic
entity.name.class#a5da3bunderline
entity.other.inherited-class#cf5252italic underline
entity.name.function#a5da3b
variable.parameter#f3e84ditalic
entity.name.tag#f51a6a
entity.other.attribute-name#96df05
support.function#18c3e6
support.constant#18c3e6
support.type, support.class#18c3e6italic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0

Shiki preview

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

Loading...