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#F5F4ED
  • activityBar.border#1F1E1D26
  • activityBar.foreground#1F1E1D
  • activityBar.inactiveForeground#1F1E1D80
  • activityBarBadge.background#C96442
  • activityBarBadge.foreground#FFFFFF
  • button.background#C96442
  • button.foreground#FFFFFF
  • button.hoverBackground#D67A5A
  • editor.background#FAF9F5
  • editor.foreground#1F1E1D
  • editor.lineHighlightBackground#F5F4ED
  • editor.selectionBackground#1C6BBB33
  • editorCursor.foreground#C96442
  • editorWhitespace.foreground#1F1E1D40
  • errorForeground#D13438
  • focusBorder#1C6BBB
  • foreground#1F1E1D
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.placeholderForeground#1F1E1D80
  • inputOption.activeBackground#1C6BBB
  • inputOption.activeBorder#1C6BBB
  • list.activeSelectionBackground#1C6BBB25
  • list.activeSelectionForeground#1F1E1D
  • list.focusBackground#1C6BBB20
  • list.hoverBackground#F5F4ED
  • list.inactiveSelectionBackground#E8E6DC
  • selection.background#1C6BBB40
  • sideBar.background#F5F4ED
  • sideBar.border#1F1E1D26
  • sideBar.foreground#1F1E1D99
  • sideBarSectionHeader.background#F5F4ED
  • statusBar.background#F5F4ED
  • statusBar.border#1F1E1D26
  • statusBar.foreground#1F1E1D99
  • statusBar.noFolderBackground#F5F4ED
  • statusBarItem.remoteBackground#C96442
  • statusBarItem.remoteForeground#FFFFFF
  • titleBar.activeBackground#F5F4ED
  • titleBar.activeForeground#1F1E1D
  • titleBar.border#1F1E1D26
  • titleBar.inactiveBackground#F5F4ED
  • titleBar.inactiveForeground#1F1E1D99
  • widget.shadow#1F1E1D20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6F6F78italic
keyword, storage.modifier, keyword.operator.new, keyword.operator.delete, keyword.operator.logical#D73A83
storage.type, entity.name.type, entity.name.class, support.type, support.class#8A46CE
entity.name.function, support.function#1F6FE4
constant.numeric#2D8F8F
string#26831A
variable.parameter#B56613
variable, meta.definition.variable#1F1E1D
keyword.control.directive.include, punctuation.definition.directive#D73A83
string.include, punctuation.definition.string.begin.include, punctuation.definition.string.end.include#2D8F8F
punctuation#1F1E1D
entity.name.tag, meta.tag.sgml.html, markup.deleted.git_gutter#D73A83
entity.other.attribute-name, entity.other.attribute-name.html#1F6FE4
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#26831A
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#6F6F78
support.type.property-name.css, meta.property-name.css#B56613
support.constant.property-value.css, meta.property-value.css, constant.numeric.css, keyword.other.unit.css#2D8F8F
punctuation.separator.key-value.css, punctuation.terminator.rule.css#1F1E1D
punctuation.section.property-list.begin.css, punctuation.section.property-list.end.css#6F6F78
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8A46CE

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Claude Light Theme - Coding Theme