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.activeBackground#2F68B0
  • activityBar.activeBorder#3EA4FF
  • activityBar.background#3B3D40
  • activityBar.foreground#F3F8FF
  • activityBar.inactiveForeground#AAA
  • activityBarBadge.background#FFF
  • activityBarBadge.foreground#000
  • badge.background#3EA4ff
  • badge.foreground#FFF
  • button.background#2F68B0
  • button.hoverBackground#3EA4FF
  • checkbox.border#AAA
  • dropdown.border#AAA
  • editor.background#F2F2F2
  • editor.foreground#000
  • editor.lineHighlightBackground#0001
  • editor.selectionBackground#B7D8F4
  • editorGroup.border#888
  • editorGroupHeader.tabsBackground#AAA
  • editorLineNumber.activeForeground#009664
  • editorLineNumber.foreground#AAA
  • input.border#AAA
  • list.activeSelectionBackground#B7D8F4
  • list.activeSelectionForeground#2F68B0
  • list.focusHighlightForeground#186DE0
  • list.highlightForeground#72C4E1
  • list.hoverBackground#0001
  • list.inactiveSelectionBackground#D0DFED
  • menu.background#FBFBFB
  • menu.selectionBackground#B7D8F4
  • menu.selectionForeground#000
  • menubar.selectionBackground#0008
  • sideBar.background#E8E8E8
  • sideBar.border#BBB
  • sideBarTitle.foreground#111
  • statusBar.background#1A1A1A
  • statusBar.border#1A1A1A
  • statusBar.debuggingBackground#C51D23
  • statusBar.debuggingBorder#C51D23
  • statusBar.debuggingForeground#FFF
  • statusBar.foreground#EEE
  • statusBar.noFolderBackground#CCC
  • statusBar.noFolderBorder#CCC
  • statusBar.noFolderForeground#111
  • statusBarItem.remoteBackground#2F68B0
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#F2F2F2
  • tab.activeForeground#000
  • tab.border#AAA
  • tab.inactiveBackground#C4C4C4
  • tab.inactiveForeground#111
  • titleBar.activeBackground#004096
  • titleBar.activeForeground#FFF
  • titleBar.border#000
  • titleBar.inactiveBackground#DDD
  • titleBar.inactiveForeground#666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#070707FF
keyword.control.directive#009999
comment#808080
keyword, storage.type, entity.name.tag#00D
constant.numeric#B600FF
string#A00
constant.character.escape#009200
constant.languageunderline
constant.regexp#B600AA
constant.character.entity#009200
markup.heading, support.type.property-name#D0D
markup.bold#294bold
markup.italic#294underline
markup.list.unnumbered#6F618C
markup.list.numbered#618C85

Shiki preview

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

Loading...

Sober by jc - VS Code Theme