Skip to main content
Coding Theme

Color themes

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#F5F5F7
  • activityBar.border#FFFFFF00
  • activityBar.foreground#403F53
  • activityBarBadge.background#FFB454
  • activityBarBadge.foreground#FAFAFA
  • dropdown.background#FAFAFA
  • dropdown.border#FFFFFF00
  • dropdown.foreground#403F53
  • editor.background#FAFAFA
  • editor.foreground#403F53
  • editorGroup.border#FFFFFF00
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorGroupHeader.tabsBorder#FFFFFF00
  • editorLineNumber.activeForeground#FFB454
  • editorLineNumber.foreground#A0A1B5
  • editorRuler.foreground#FAFAFA
  • editorWidget.background#FAFAFA
  • editorWidget.border#FFFFFF00
  • focusBorder#FAFAFA
  • input.background#FAFAFA
  • input.border#FFFFFF00
  • input.foreground#403F53
  • input.placeholderForeground#A0A1B5
  • list.activeSelectionBackground#FAFAFA
  • list.activeSelectionForeground#FFB454
  • list.hoverBackground#F7F8FA
  • list.hoverForeground#FFB454
  • list.inactiveSelectionBackground#FAFAFA
  • list.inactiveSelectionForeground#403F53
  • menu.background#FAFAFA
  • menu.border#FFFFFF00
  • menu.foreground#403F53
  • menu.selectionBackground#F7F8FA
  • menu.selectionForeground#FFB454
  • menu.separatorBackground#FAFAFA
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#FFB45422
  • minimapSlider.background#E5E5E544
  • minimapSlider.hoverBackground#FFB45422
  • panel.background#FAFAFA
  • panel.border#FFFFFF00
  • panelTitle.activeForeground#FFB454
  • peekViewEditor.background#FAFAFA
  • peekViewEditor.matchHighlightBackground#FFB45422
  • quickInput.background#FAFAFA
  • quickInput.foreground#403F53
  • scrollbar.shadow#00000000
  • selection.background#FFEFD5
  • sideBar.background#F5F5F7
  • sideBar.border#FFFFFF00
  • sideBar.foreground#403F53
  • sideBarSectionHeader.background#F5F5F7
  • sideBarSectionHeader.border#FFFFFF00
  • sideBarSectionHeader.foreground#403F53
  • statusBar.background#FAFAFA
  • statusBar.border#FFFFFF00
  • statusBar.foreground#403F53
  • tab.activeBackground#FAFAFA
  • tab.activeForeground#FFB454
  • tab.border#FFFFFF00
  • tab.inactiveBackground#F5F5F7
  • tab.inactiveForeground#A0A1B5
  • terminal.background#FAFAFA
  • terminal.foreground#403F53
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#403F53
  • titleBar.border#FFFFFF00
  • titleBar.inactiveBackground#F5F5F7
  • titleBar.inactiveForeground#A0A1B5
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B0B1BAitalic
string, constant.other.symbol#86B300
constant.numeric#A37ACC
keyword#FF7733
variable, variable.parameter#403F53
entity.name.function#FFB454
entity.name.type, support.class#399EE6
punctuation#403F53
Nimbo Theme by Rohit Ramteke - VS Code Theme