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#272727
  • activityBar.foreground#d0dada
  • activityBarBadge.background#c8daf4
  • activityBarBadge.foreground#1f57a4
  • badge.background#c8daf4
  • badge.foreground#1f57a4
  • button.background#b8c1c1
  • button.foreground#000000
  • button.hoverBackground#8c9696
  • descriptionForeground#9fa7a7
  • dropdown.background#b8c1c1
  • dropdown.border#9fa7a7
  • dropdown.foreground#000000
  • dropdown.listBackground#b8c1c1
  • editor.background#25467A
  • editor.foreground#EAEAEA
  • editor.lineHighlightBackground#172b4b
  • editor.selectionBackground#000000
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.noTabsBackground#343334
  • editorGroupHeader.tabsBackground#343334
  • editorGutter.background#25467A
  • editorIndentGuide.activeBackground#25467A
  • editorIndentGuide.background#25467A
  • editorRuler.foreground#777777
  • editorWhitespace.foreground#25467A
  • focusBorder#9fa7a7
  • foreground#EAEAEA
  • gitDecoration.addedResourceForeground#cfffce
  • gitDecoration.conflictingResourceForeground#ecc068
  • gitDecoration.deletedResourceForeground#f39191
  • gitDecoration.ignoredResourceForeground#ecc068
  • gitDecoration.modifiedResourceForeground#f8ff9b
  • gitDecoration.submoduleResourceForeground#ecc068
  • gitDecoration.untrackedResourceForeground#22aaaf
  • input.background#343334
  • input.border#595859
  • list.activeSelectionBackground#a6a5a6
  • list.activeSelectionForeground#000000
  • list.dropBackground#eaeaea91
  • list.errorForeground#c6a21a
  • list.focusBackground#2d74da
  • list.focusForeground#e4e4e4
  • list.highlightForeground#e39d14
  • list.hoverBackground#8c9696
  • list.hoverForeground#EAEAEA
  • list.inactiveFocusBackground#a6a5a6
  • list.inactiveSelectionBackground#a6a5a6
  • list.inactiveSelectionForeground#000000
  • list.invalidItemForeground#EAEAEA
  • list.warningForeground#f7aac3
  • selection.background#91721f
  • settings.dropdownBackground#EAEAEA
  • settings.dropdownForeground#464646
  • sideBar.background#303030
  • sideBar.foreground#EAEAEA
  • sideBarTitle.foreground#d0dada
  • statusBar.background#272727
  • statusBar.debuggingBackground#3d1717
  • statusBar.foreground#d0dada
  • statusBar.noFolderBackground#272727
  • tab.activeBackground#464646
  • tab.activeBorder#b8c1c1
  • tab.activeForeground#EAEAEA
  • tab.border#343334
  • tab.inactiveBackground#343334
  • tab.inactiveForeground#d0dada
  • titleBar.activeBackground#272727
  • titleBar.activeForeground#d0dada
  • titleBar.border#272727
  • titleBar.inactiveBackground#595859
  • titleBar.inactiveForeground#b8c1c1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6F7878
string#FFFFFF
constant.numeric#79A6F6
constant.language#79A6F6
constant.character, constant.other#79A6F6
variable#EAEAEA
keyword#B8C1C1
storage#FBEAAE italic
storage.type#46C1F2italic
entity.name.class#C6A21Aunderline
entity.other.inherited-class#C6A21Aitalic underline
entity.name.function#FED500
variable.parameter#C7B6F7
entity.name.tag#F7AAC3
entity.other.attribute-name#79A6F6
support.function#C6A21A
support.constant#C6A21A
support.type, support.class#C6A21Aitalic
support.other.variable#EAEAEA
invalid#E01010
invalid.deprecated#7cb421

Shiki preview

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

Loading...

Nineties by jibjack - VS Code Theme