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.

  • badge.background#cad7e2
  • button.background#5790be
  • diffEditor.unchangedRegionBackground#f5f5f5
  • diffEditor.unchangedRegionShadow#d3d3d3
  • editor.background#f6f6ef
  • editor.foreground#000000
  • editor.lineHighlightBackground#eaeff5
  • editorBracketMatch.background#f1f8ff
  • editorBracketMatch.border#c8e1ff
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#fafbfc
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorIndentGuide.background1#eeeeee
  • editorLineNumber.foreground#9aab4a
  • focusBorder#4b4b4b
  • gitDecoration.modifiedResourceForeground#c87618
  • input.border#d1d1d1
  • list.activeSelectionBackground#5790be
  • list.activeSelectionForeground#f0f0f0
  • list.activeSelectionIconForeground#f0f0f0
  • list.focusHighlightForeground#ffffff
  • list.inactiveSelectionBackground#d0e2f0
  • panel.background#dadada
  • scrollbar.shadow#cccccc
  • sideBar.background#dadada
  • sideBar.border#000000
  • sideBar.foreground#0d0d0e
  • statusBar.background#24292e
  • statusBar.border#ff000000
  • statusBar.debuggingBackground#d64926
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#cccccc
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#24292e
  • statusBar.noFolderBorder#ff000000
  • statusBar.noFolderForeground#cccccc
  • statusBarItem.remoteBackground#d64926
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#484848
  • tab.activeBorder#e36209
  • tab.activeBorderTop#3594cf
  • tab.activeForeground#ffffff
  • tab.border#e1e4e8
  • tab.inactiveBackground#fafbfc
  • tab.inactiveForeground#586069
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6FB3D2
  • terminal.ansiBrightBlack#B0B0B0
  • terminal.ansiBrightBlue#6FB3D2
  • terminal.ansiBrightCyan#76C7B7
  • terminal.ansiBrightGreen#1ecb1b
  • terminal.ansiBrightMagenta#D381C3
  • terminal.ansiBrightRed#FB0120
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FDA331
  • terminal.ansiCyan#76C7B7
  • terminal.ansiGreen#1f9e1d
  • terminal.ansiMagenta#D381C3
  • terminal.ansiRed#fbfb01e2
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#FDA331
  • terminal.background#000000
  • terminal.foreground#fbfbfb
  • terminal.tab.activeBorder#00000000
  • titleBar.activeBackground#24292e
  • titleBar.activeForeground#ffffff
  • titleBar.border#ff000000
  • titleBar.inactiveBackground#24292e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, keyword, storage, keyword.control#d73a49italic
support.type.property-name.jsonbold
entity.name.tag.js, meta.tag.jsbold
entity.other.attribute-nameunderline
comment#6a737ditalic
keyword, storage, keyword.control
entity.name.type.class, entity.name.method, entity.name.tag#6f42c1italic
variable.language, meta.paragraph.markdown, support.type.property-name.json, string.other.link.title.markdown#005cc5italic
entity.name.tag
keyword.control
meta.paragraph.markdown, string.other.link.title.markdown, markup.underline.link.markdown#005cc5italic
support.type.property-name.json#4F90FFitalic
Geek Sharp Light by Idan Ifrach - VS Code Theme