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#2c3e50
  • dropdown.background#314b66
  • dropdown.foreground#ffffff
  • editor.background#2c3e50
  • editor.findMatchBackground#63c6f7
  • editor.findMatchHighlightBackground#197aafb5
  • editor.foreground#fafaff
  • editor.lineHighlightBackground#2378be71
  • editor.selectionBackground#197aaf
  • editor.selectionHighlightBackground#09d1c04d
  • editorBracketMatch.background#1ab4c9
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#2378be
  • editorGroup.emptyBackground#2c3e50
  • editorGroupHeader.noTabsBackground#2c3e50
  • editorGroupHeader.tabsBackground#2c3e50
  • editorGroupHeader.tabsBorder#2378be
  • editorLineNumber.activeForeground#2378be
  • editorSuggestWidget.background#314b66
  • editorWhitespace.foreground#49483e
  • editorWidget.background#2c3e50
  • input.background#314b66
  • list.activeSelectionBackground#2378be
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#2dbfca5a
  • list.focusForeground#ffffff
  • list.hoverBackground#63c6f79f
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2378be
  • list.inactiveSelectionForeground#ffffff
  • menu.background#2c3e50
  • menu.selectionBackground#094771
  • menubar.selectionBackground#094771
  • peekViewEditor.background#2c3e50
  • peekViewEditor.matchHighlightBackground#2378be
  • peekViewEditorGutter.background#2c3e50
  • peekViewResult.background#314558
  • peekViewResult.selectionBackground#2378be
  • peekViewTitle.background#2c3e50
  • sideBar.background#314558
  • sideBar.border#2378be
  • sideBarSectionHeader.background#3d4c5a
  • sideBarTitle.foreground#ffffff
  • statusBar.background#3e77b0
  • statusBar.noFolderBackground#388fe6
  • statusBarItem.activeBackground#478cdb
  • statusBarItem.hoverBackground#478cdb
  • statusBarItem.prominentBackground#1258b9
  • tab.activeBackground#2378be
  • tab.activeBorderTop#2378be
  • tab.activeForeground#ffffff
  • tab.border#2378be
  • tab.inactiveBackground#2c3e50
  • tab.inactiveForeground#c3c0c0
  • titleBar.activeBackground#2c3e50
  • titleBar.inactiveBackground#2c3e50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#fafaff
comment#94a3ac
string#ffaaaa
constant.numeric#74b8f9
constant.language#7fc0fa
constant.character, constant.other#8ac7fa
variable#1fc6ab
keyword#ff624a
storage#ff6d54
storage.type#66D9EFitalic
entity.name.class#73e286underline
entity.other.inherited-class#7ee691italic underline
entity.name.function#1dbfa2
variable.parameter#fcc048italic
entity.name.tag#ff785f
entity.other.attribute-name#89e99c
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.other.variable#ffffff
invalid#F8F8F0
invalid.deprecated#F8F8F0

Shiki preview

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

Loading...

Feel Good LY by lyfun - VS Code Theme