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#4F5154
  • activityBar.border#3B322C
  • activityBar.foreground#FDE8DE
  • activityBar.inactiveForeground#BDB5B1
  • activityBarBadge.background#E18D48
  • activityBarBadge.foreground#3B322C
  • button.background#E18D48
  • button.foreground#3B322C
  • editor.background#FDE8DE
  • editor.findMatchBackground#E18D4888
  • editor.foreground#3B322C
  • editor.lineHighlightBackground#F9E2D8
  • editor.lineHighlightBorder#EBE0DA
  • editor.selectionBackground#5A8BA144
  • editor.wordHighlightBackground#E18D4833
  • editorCursor.foreground#E18D48
  • editorGroupHeader.tabsBackground#4F5154
  • editorGroupHeader.tabsBorder#3B322C
  • editorIndentGuide.activeBackground#8A817C
  • editorIndentGuide.background#EBE0DA
  • editorLineNumber.activeForeground#8A817C
  • editorLineNumber.foreground#BDB5B1
  • editorWidget.background#FDF6F2
  • editorWidget.border#EBE0DA
  • focusBorder#E18D48
  • foreground#3B322C
  • gitDecoration.addedResourceForeground#6A994E
  • gitDecoration.deletedResourceForeground#BC4749
  • gitDecoration.modifiedResourceForeground#5A8BA1
  • gitDecoration.untrackedResourceForeground#D18E7D
  • icon.foreground#8A817C
  • input.background#FFFFFF
  • list.activeSelectionBackground#E18D48
  • list.activeSelectionForeground#3B322C
  • list.focusBackground#E18D48
  • list.highlightForeground#E18D48
  • list.hoverBackground#6B6B7F
  • list.inactiveSelectionBackground#3B322C
  • list.inactiveSelectionForeground#BDB5B1
  • menu.background#4F5154
  • menu.foreground#FDE8DE
  • menu.selectionBackground#E18D48
  • menu.selectionForeground#3B322C
  • menu.separatorBackground#3B322C
  • panel.background#F9E2D8
  • panel.border#EBE0DA
  • panelTitle.activeBorder#E18D48
  • panelTitle.activeForeground#3B322C
  • panelTitle.inactiveForeground#8A817C
  • scrollbar.shadow#00000033
  • settings.headerForeground#E18D48
  • settings.modifiedItemIndicator#E18D48
  • sideBar.background#4F5154
  • sideBar.border#3B322C
  • sideBar.foreground#FDE8DE
  • sideBarSectionHeader.background#3B322C
  • sideBarSectionHeader.foreground#FDE8DE
  • sideBarTitle.foreground#FDE8DE
  • statusBar.background#4F5154
  • statusBar.border#3B322C
  • statusBar.debuggingBackground#E18D48
  • statusBar.debuggingForeground#3B322C
  • statusBar.foreground#FDE8DE
  • tab.activeBackground#FDE8DE
  • tab.activeBorderTop#E18D48
  • tab.activeForeground#3B322C
  • tab.border#3B322C
  • tab.inactiveBackground#4F5154
  • tab.inactiveForeground#BDB5B1
  • titleBar.activeBackground#4F5154
  • titleBar.activeForeground#FDE8DE
  • titleBar.inactiveBackground#4F5154
  • titleBar.inactiveForeground#BDB5B1
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A817Citalic
punctuation, keyword.operator#8A817C—
variable, variable.parameter#3B322C—
string, constant.numeric, constant.language#D18E7D—
keyword, storage.type, storage.modifier#E18D48italic
entity.name.function, support.function, meta.function-call#E18D48—
entity.name.class, entity.name.type.class, support.class, entity.name.struct#5A8BA1bold
entity.name.type, support.type, entity.name.interface, entity.name.enum#5A8BA1—
entity.other.inherited-class#5A8BA1italic bold
entity.name.namespace, entity.name.package#5A8BA1—
support.class.component#5A8BA1bold
entity.name.tag#D18E7D—
entity.other.attribute-name#8A817Citalic
meta.decorator, storage.type.annotation, storage.type.attribute.cs#E18D48italic
support.type.property-name.json, support.type.property-name.css#5A8BA1—
entity.name.tag.css, entity.other.attribute-name.id.css#E18D48—
keyword.control.directive.cpp#8A817Citalic
Code Glasses by Aadityaa - VS Code Theme