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#48584E
  • activityBar.border#48584E
  • activityBar.foreground#D3C6AA
  • activityBar.inactiveForeground#9DA9A0
  • activityBarBadge.background#D3C6AA
  • activityBarBadge.foreground#48584E
  • button.background#D3C6AA
  • button.foreground#48584E
  • button.hoverBackground#9DA9A0
  • descriptionForeground#9DA9A0
  • editor.background#48584E
  • editor.foreground#D3C6AA
  • editor.inactiveSelectionBackground#5D6B6633
  • editor.lineHighlightBackground#5D6B6633
  • editor.selectionBackground#5D6B6666
  • editor.wordHighlightBackground#7A847844
  • editorCursor.foreground#D3C6AA
  • editorGroupHeader.tabsBackground#5D6B66
  • editorGroupHeader.tabsBorder#48584E
  • editorIndentGuide.activeBackground#7A8478
  • editorIndentGuide.background#5D6B6644
  • editorLineNumber.activeForeground#D3C6AA
  • editorLineNumber.foreground#5D6B66
  • editorWhitespace.foreground#5D6B6666
  • errorForeground#5C3F4F
  • focusBorder#7A8478
  • foreground#D3C6AA
  • input.background#48584E
  • input.border#7A8478
  • input.foreground#D3C6AA
  • input.placeholderForeground#9DA9A0
  • list.activeSelectionBackground#D3C6AA
  • list.activeSelectionForeground#48584E
  • list.hoverBackground#7A8478
  • list.inactiveSelectionBackground#5D6B66
  • list.inactiveSelectionForeground#D3C6AA
  • panel.background#48584E
  • panel.border#5D6B66
  • panelTitle.activeBorder#D3C6AA
  • panelTitle.activeForeground#D3C6AA
  • panelTitle.inactiveForeground#9DA9A0
  • selection.background#5D6B6688
  • sideBar.background#5D6B66
  • sideBar.border#48584E
  • sideBar.foreground#D3C6AA
  • sideBarSectionHeader.background#48584E
  • sideBarTitle.foreground#D3C6AA
  • statusBar.background#5D6B66
  • statusBar.border#48584E
  • statusBar.debuggingBackground#5C3F4F
  • statusBar.foreground#D3C6AA
  • statusBar.noFolderBackground#48584E
  • tab.activeBackground#48584E
  • tab.activeBorderTop#D3C6AA
  • tab.activeForeground#D3C6AA
  • tab.border#48584E
  • tab.inactiveBackground#5D6B66
  • tab.inactiveForeground#9DA9A0
  • terminal.foreground#D3C6AA
  • terminalCursor.foreground#D3C6AA
  • titleBar.activeBackground#5D6B66
  • titleBar.activeForeground#D3C6AA
  • titleBar.border#48584E
  • titleBar.inactiveBackground#48584E
  • widget.shadow#48584E44

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9DA9A0italic
keyword, storage, storage.type#7A8478bold
entity.name.function, support.function, meta.function-call#D3C6AAbold
string, string.quoted#9DA9A0
constant.numeric, constant.language, constant.character#5C3F4F
entity.name.type, entity.name.class, support.type, support.class#7A8478
variable, variable.parameter, variable.other#D3C6AA
keyword.operator, punctuation#9DA9A0
entity.name.tag#7A8478
entity.other.attribute-name#9DA9A0
Evergreen tranquil theme by Juan Manuel San Martin - VS Code Theme