Skip to main content
Coding Theme

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#395063
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#FF7B2E
  • activityBarBadge.foreground#F8FAFD
  • badge.background#FF7B2E
  • button.background#FF7B2E
  • button.foreground#FFFFFF
  • debugToolBar.background#EEEEEE
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#EEEEEE
  • dropdown.border#DDDDDD
  • editor.background#FFFFFF
  • editor.findMatchHighlightBackground#caa4e5
  • editor.foreground#395063
  • editor.lineHighlightBackground#fafafa
  • editor.selectionBackground#eaebec
  • editorCursor.foreground#2F6F9F
  • editorError.foreground#c24038
  • editorGroup.background#FFFFFF
  • editorGroup.border#DDDDDD
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#dddddd
  • editorIndentGuide.background#EEEEEE
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#ffffff
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#dddddd
  • editorSuggestWidget.selectedBackground#f1f1f1
  • editorWhitespace.foreground#EEEEEE
  • editorWidget.background#FFFFFF
  • input.background#EEEEEE
  • list.activeSelectionBackground#DDDDDD
  • list.activeSelectionForeground#395063
  • list.focusBackground#DDDDDD
  • list.highlightForeground#2F6F9F
  • list.hoverBackground#EEEEEE
  • list.inactiveSelectionBackground#395063
  • list.inactiveSelectionForeground#d7dae0
  • notification.background#2F6F9F
  • peekViewEditor.matchHighlightBackground#e2e2e2
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#fcfcfc
  • sideBarSectionHeader.background#f2f2f2
  • statusBar.background#2F6F9F
  • statusBar.debuggingBackground#FF7B2E
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#395063
  • tab.activeBackground#FFFFFF
  • tab.border#EEEEEE
  • tab.inactiveBackground#EEEEEE
  • titleBar.activeBackground#EEEEEE
  • titleBar.activeForeground#395063
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#395063
comment#919d9f italic
string#05ad97
constant.numeric#d35400
constant.language#ed912c
constant.character, constant.other#ed912c
variable#3193c6
keyword#d35400
storage#cd4e38
storage.type#c0392b
entity.name.class#05ad97
entity.other.inherited-class#05ad97
entity.name.function#a15ebbitalic
variable.parameter#f7ab13
entity.name.tag#3193c6
entity.other.attribute-name#a15ebbitalic
support.function#3092c6
support.constant#3193c6
support.type, support.class#3193c6
support.other.variable#395063 bold
invalid#cd4e38 bold
invalid.deprecated#a15ebb bold

Shiki preview

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

Loading...

Feather - Coding Theme