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#14161a
  • activityBar.foreground#ffffff76
  • activityBarBadge.background#a9c3ca
  • activityBarBadge.foreground#000000
  • editor.background#14161a
  • editor.foreground#8599b3
  • editor.lineHighlightBackground#ccccff07
  • editor.selectionBackground#333470f8
  • editorCursor.foreground#6a819e
  • editorGroup.border#ffffff12
  • editorGroupHeader.tabsBackground#14161a
  • editorGroupHeader.tabsBorder#14161a
  • editorGutter.addedBackground#00ff00b9
  • editorGutter.deletedBackground#f81d1db9
  • editorGutter.modifiedBackground#00ff00b9
  • editorLineNumber.foreground#ccccff31
  • editorOverviewRuler.border#3a3a3a23
  • editorOverviewRuler.deletedForeground#f81d1db9
  • editorOverviewRuler.modifiedForeground#00ff00b9
  • editorWhitespace.foreground#282f40
  • editorWidget.background#1e1f22
  • editorWidget.foreground#ffffffb2
  • focusBorder#1f1f1f77
  • input.background#ffffff09
  • input.border#b0b1d80f
  • list.activeSelectionBackground#4c5ead57
  • list.focusBackground#4c5ead58
  • list.hoverBackground#b0b1d813
  • list.inactiveSelectionBackground#4c5ead57
  • list.inactiveSelectionForeground#ffffff
  • panel.background#121418
  • panel.border#6a819e18
  • scrollbar.shadow#00000067
  • scrollbarSlider.activeBackground#ffffff13
  • scrollbarSlider.background#ffffff09
  • scrollbarSlider.hoverBackground#ffffff18
  • sideBar.background#121418
  • sideBar.border#6a819e18
  • sideBar.foreground#ffffffcc
  • sideBarSectionHeader.background#121418
  • sideBarSectionHeader.foreground#ffffff94
  • sideBarTitle.foreground#ffffff42
  • statusBar.background#1e1f22
  • statusBar.foreground#ffffffb2
  • tab.activeBackground#14161a
  • tab.activeBorderTop#5058ada4
  • tab.border#4242422c
  • tab.inactiveBackground#14161a
  • tab.inactiveForeground#ffffff81
  • terminal.ansiBlue#7556e6
  • terminal.ansiCyan#5bbad1
  • terminal.ansiGreen#4ce46d
  • terminal.ansiMagenta#d464d4
  • terminal.ansiRed#da4747
  • terminal.ansiYellow#e9e965
  • titleBar.activeBackground#14161a
  • titleBar.inactiveBackground#14161a
  • titleBar.inactiveForeground#ffffff67

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#465173
string#0AFAFA
constant.numeric#0AFAFA
constant.language#0AFAFA
constant.character, constant.other#0AFAFA
variable#3A8CC7
keyword#7F83FF
storage#7F83FF
storage.type#7F83FF
entity.name.class#FF4A98 bold
entity.other.inherited-class#FF4A98italic
entity.name.function#FF4A98
variable.parameter#45B8FF
entity.name.tag#7F83FF
entity.other.attribute-name#FF4A98
support.function#45B8FF
support.constant#45B8FF
support.type, support.class#45B8FF
support.other.variable
invalid#F1ADD2
invalid.deprecated#B2AFF0
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...

Kya by madprops - VS Code Theme