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#000000
  • activityBar.border#f8f8f8
  • activityBar.foreground#007700
  • button.background#000000
  • button.border#f8f8f8
  • button.foreground#007700
  • button.hoverBackground#000000
  • button.secondaryBackground#000000
  • button.secondaryForeground#007700
  • button.secondaryHoverBackground#000000
  • button.separator#f8f8f8
  • checkbox.background#000000
  • checkbox.border#f8f8f8
  • checkbox.disabled.background#000000
  • checkbox.disabled.foreground#007700
  • checkbox.foreground#007700
  • editor.background#000000
  • editor.foreground#007700
  • editor.selectionBackground#003300
  • editorCursor.background#007700
  • editorGroup.border#f8f8f8
  • editorGroupHeader.border#f8f8f8
  • editorGroupHeader.tabsBackground#000000
  • editorLineNumber.foreground#007700
  • editorWidget.border#000000
  • menu.background#000000
  • menu.border#f8f8f8
  • menu.foreground#007700
  • panel.background#000000
  • panel.border#f8f8f8
  • sideBar.background#000000
  • sideBar.border#f8f8f8
  • sideBar.foreground#007700
  • sideBarTitle.background#000000
  • statusBar.background#000000
  • statusBar.border#f8f8f8
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#f8f8f8
  • statusBar.debuggingForeground#007700
  • statusBar.focusBorder#f8f8f8
  • statusBar.foreground#007700
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#f8f8f8
  • statusBar.noFolderForeground#007700
  • statusBarItem.activeBackground#000000
  • statusBarItem.errorBackground#000000
  • statusBarItem.errorForeground#007700
  • statusBarItem.focusBorder#f8f8f8
  • statusBarItem.hoverBackground#696969
  • statusBarItem.warningBackground#000000
  • statusBarItem.warningForeground#007700
  • terminal.background#000000
  • terminal.foreground#007700
  • textLink.foreground#007700
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#007700
  • titleBar.border#f8f8f8
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#007700
  • welcomePage.background#000000
  • welcomePage.progress.foreground#007700
  • welcomePage.tileBackground#000000
  • welcomePage.tileBorder#f8f8f8
  • welcomePage.tileHoverBackground#000000
  • window.activeBorder#000000
  • window.inactiveBorder#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
operator, punctuation, meta.object.key, meta.object.key string, keyword.control, keyword.declaration#f8f8f8
string, function.call, meta.object.value, keyword.modifier#B8860B
function.name, variable, constant, keyword.operator, keyword.other#007700
comment#696969
invalid#CD5C5C
warning#FF8C00
return to 1980 by YangZeyi - VS Code Theme