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#263238
  • activityBar.foreground#546e7a
  • activityBarBadge.background#ffa000
  • activityBarBadge.foreground#333333
  • contrastBorder#222c32
  • debugToolBar.background#182328
  • dropdown.background#263238
  • editor.background#152122
  • editor.findMatchBackground#b02053
  • editor.findMatchHighlightBackground#921c46
  • editor.findRangeHighlightBackground#b02053
  • editor.foreground#DDDDDD
  • editor.hoverHighlightBackground#263238
  • editor.inactiveSelectionBackground#263237
  • editor.lineHighlightBackground#263237
  • editor.lineHighlightBorder#182328
  • editor.selectionBackground#29363e
  • editor.selectionHighlightBackground#555555
  • editor.wordHighlightBackground#455c67
  • editor.wordHighlightStrongBackground#455c67
  • editorGroup.background#263238
  • editorGroup.border#182328
  • editorGroupHeader.noTabsBackground#ffa000
  • editorGroupHeader.tabsBackground#263238
  • editorHoverWidget.background#263238
  • editorHoverWidget.border#536c79
  • editorLineNumber.foreground#2c383e
  • editorSelection#182328
  • editorSuggestWidget.background#263238
  • editorSuggestWidget.border#455c67
  • editorWidget.background#182328
  • focusBorder#546e7a
  • input.background#1d272c
  • input.foreground#cccccc
  • list.activeSelectionBackground#344249
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#344249
  • list.highlightForeground#ffa000
  • list.hoverBackground#344249
  • list.inactiveSelectionBackground#344249
  • panel.background#263238
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#49616c
  • scrollbar.shadow#263238
  • scrollbarSlider.activeBackground#344249
  • scrollbarSlider.background#344249
  • scrollbarSlider.hoverBackground#344249
  • sideBar.background#263238
  • sideBarSectionHeader.background#263238
  • sideBarTitle.foreground#4a616c
  • statusBar.background#263238
  • statusBar.debuggingBackground#ebbb84
  • statusBar.foreground#4a616c
  • statusBarItem.hoverBackground#344249
  • tab.activeBackground#263238
  • tab.activeForeground#ffffff
  • tab.border#222c32
  • tab.inactiveBackground#263238
  • titleBar.activeBackground#263238

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, support.function#CFE36Dbold
comment, punctuation.definition.comment#5f6367
string#EBBB84
constant.language.boolean#1FA1F1bold
constant.numeric#1FA1F1bold
constant.language#1FA1F1bold
constant.character, constant.other#1FA1F1bold
storage.type, storage.modifier#E12977bold italic
variable.parameter#FFFFFFbold italic
keyword#E12977
string.regexp#1FA1F1bold
support.function#FFAA00bold
support.type#FFAA00
support.class#FFAA00
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#CCCCCCbold
constant.language.json#1fa1f1bold
entity.other.attribute-name.class#FFCB6B
entity.other.attribute-name.id#FFCB6B
source.css entity.name.tag#FA6981
support.type.property-name.css#e5d0b1
keyword.other.unit#FFAA00
meta.tag, punctuation.definition.tag#DDDDDD
entity.name.tag#E12977
entity.other.attribute-name#CFE36Dbold

Shiki preview

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

Loading...

dop by josenzo - VS Code Theme