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#F1F8E9
  • activityBar.foreground#1C270F
  • activityBar.inactiveForeground#1C270F60
  • activityBarBadge.background#8BC34A
  • activityBarBadge.foreground#F1F8E9
  • editor.background#F1F8E9
  • editor.foreground#1C270F
  • editor.lineHighlightBackground#F2F9EB
  • editor.selectionBackground#8BC34A80
  • editorCursor.foreground#8BC34A
  • editorIndentGuide.activeBackground#8BC34A60
  • editorIndentGuide.background#53752C20
  • editorWhitespace.foreground#53752C40
  • sideBar.background#F2F9EB
  • sideBar.foreground#1C270F
  • sideBarSectionHeader.background#F1F8E9
  • statusBar.background#8BC34A
  • statusBar.foreground#F1F8E9
  • statusBar.noFolderBackground#8BC34A
  • tab.activeBackground#F1F8E9
  • tab.activeForeground#1C270F
  • tab.inactiveBackground#D9DFD2
  • tab.inactiveForeground#1C270F80
  • terminal.background#F1F8E9
  • terminal.foreground#1C270F
  • titleBar.activeBackground#F1F8E9
  • titleBar.activeForeground#1C270F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#53752C
string#4FC34A
string.regexp#C34A8B
constant.numeric#824AC3
constant.language#824AC3italic
keyword#8BC34Abold
storage#8BC34A
storage.type#824AC3italic
entity.name.function#4A8BC3
entity.name.class#4AC3BFbold
entity.name.type#824AC3
variable#1C270F
variable.parameter#C3BF4Aitalic
variable.other.property#4A4EC3
punctuation#1C270FB0
Themixir! Elixir Themes for VS Code (and Cursor, and Antigravity, and all the folks) by Lorenzo-SF - VS Code Theme