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#000000
  • activityBar.foreground#6EACDF
  • activityBarBadge.background#ED70AC
  • activityBarBadge.foreground#EBEBE6
  • badge.background#ED70AC
  • badge.foreground#EBEBE6
  • button.background#ED70AC
  • button.foreground#EBEBE6
  • debugToolBar.background#363234
  • dropdown.background#363234
  • dropdown.foreground#EBEBE6
  • editor.background#121212
  • editor.findMatchBackground#a37c8a
  • editor.findMatchHighlightBackground#7f5c68
  • editor.findRangeHighlightBackground#ED70AC
  • editor.foreground#EBEBE6
  • editor.lineHighlightBackground#ED70ACB5
  • editor.selectionBackground#ED70ACB5
  • editorCursor.foreground#F8F8F0
  • editorGroup.border#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorLink.activeForeground#ED70AC
  • editorSuggestWidget.background#363234
  • editorSuggestWidget.border#48425c
  • editorSuggestWidget.foreground#F8F8F0
  • editorSuggestWidget.highlightForeground#EBEBE6
  • editorSuggestWidget.selectedBackground#ED70AC
  • editorWhitespace.foreground#3B3A32
  • editorWidget.background#000000
  • editorWidget.resizeBorder#48425c
  • errorForeground#EBEBE6
  • focusBorder#FFF47F
  • input.background#000000
  • input.foreground#EBEBE6
  • list.activeSelectionBackground#ed70ac
  • list.activeSelectionForeground#EBEBE6
  • list.focusBackground#000000
  • list.focusForeground#EBEBE6
  • list.hoverBackground#ed70ac
  • list.hoverForeground#EBEBE6
  • list.inactiveSelectionBackground#ed70ac
  • list.inactiveSelectionForeground#EBEBE6
  • merge.border#FFF47F
  • merge.commonContentBackground#ED70AC
  • merge.commonHeaderBackground#ED70AC
  • merge.currentContentBackground#ED70AC
  • merge.currentHeaderBackground#ED70AC
  • merge.incomingContentBackground#ED70AC
  • merge.incomingHeaderBackground#ED70AC
  • minimap.background#121212
  • minimap.errorHighlight#6EACDF
  • minimap.findMatchHighlight#FFF47F
  • minimap.selectionHighlight#ED70AC
  • minimap.warningHighlight#FFF47F
  • minimapSlider.activeBackground#363234B5
  • minimapSlider.background#FFF47FB5
  • minimapSlider.hoverBackground#FFF47FB5
  • notificationCenterHeader.foreground#EBEBE6
  • notifications.background#363234
  • notifications.foreground#EBEBE6
  • progressBar.background#F3A2C9
  • sideBar.background#121212
  • sideBar.dropBackground#000000
  • sideBar.foreground#EBEBE6
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#EBEBE6
  • statusBar.background#ed70ac
  • statusBar.debuggingBackground#F3A2C9
  • statusBar.debuggingForeground#EBEBE6
  • statusBar.foreground#EBEBE6
  • statusBar.noFolderBackground#F3A2C9
  • statusBar.noFolderForeground#EBEBE6
  • tab.border#000000
  • tab.inactiveBackground#363234
  • tab.inactiveForeground#EBEBE6
  • textLink.activeForeground#ED70AC
  • textLink.foreground#ED70AC
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#EBEBE6
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#b9b9b9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#FFF47F
comment#FFF47F italic
string#FFF47F
constant.numeric#AE81FF
constant.language#ED70AC
constant.character, constant.other#ED70AC
variable
keyword#6EACDF
storage#ED70AC
storage.type#ED70ACitalic
entity.name.class#ED70AC
entity.other.inherited-class#ED70AC
entity.name.function#AE81FF bold
variable.parameter#ED70ACitalic
entity.name.tag#ED70AC
entity.other.attribute-name#FFF47F
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.other.variable
invalid#6EACDF bold italic
invalid.deprecated#AE81FF bold italic

Shiki preview

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

Loading...

Witch Gems by Git Cute - VS Code Theme