Skip to main content
CodingTheme

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#453d17
  • activityBarBadge.background#9e4009da
  • badge.background#8f3a09da
  • breadcrumbPicker.background#453d17
  • button.background#8F6700
  • debugToolBar.background#453D17
  • diffEditor.insertedTextBackground#64be8165
  • dropdown.background#6b5900
  • editor.background#453d17
  • editor.findMatchBackground#B0A9CB7a
  • editor.foreground#e2ebf0
  • editor.lineHighlightBackground#B0A9CB23
  • editor.selectionBackground#B0A9CB48
  • editor.selectionHighlightBackground#cacaca65
  • editor.wordHighlightStrongBackground#B0A9CB48
  • editorCursor.foreground#66b7cf
  • editorGroupHeader.tabsBackground#453d17
  • editorLineNumber.activeForeground#f1f1f1
  • editorLineNumber.foreground#d4d4d4
  • editorPane.background#453d17
  • editorSuggestWidget.highlightForeground#9eaf59
  • editorSuggestWidget.selectedBackground#636363a5
  • editorWidget.background#453d17
  • extensionButton.prominentBackground#5bbe7ad3
  • extensionButton.prominentHoverBackground#89CA6F
  • focusBorder#777731c4
  • gitDecoration.modifiedResourceForeground#47bc9b
  • input.background#6b5900
  • input.placeholderForeground#e2ebf0a0
  • list.activeSelectionBackground#716d1789
  • list.focusBackground#636363a5
  • list.hoverBackground#5a584be1
  • list.inactiveSelectionBackground#636363a5
  • list.warningForeground#e3984c
  • menu.background#6b5900
  • menu.selectionBackground#636363a5
  • notificationCenterHeader.background#453d17
  • notifications.background#453d17
  • panel.background#453d17
  • pickerGroup.foreground#efc404d1
  • selection.background#efc40457
  • sideBar.background#453d17
  • sideBarTitle.foreground#B0A9CB
  • statusBar.background#453d17
  • tab.activeBorder#B37F04
  • tab.border#514B2Cbd
  • tab.inactiveBackground#514B2Cbd
  • terminal.background#453d17
  • titleBar.activeBackground#453d17

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cec9df
keyword, keyword.control, entity.other.attribute-name.xml, entity.name.tag.namespace.xml, source.php storage.type, punctuation.definition.directive.c#d7571cf5
comment, comment.block, source.powershell punctuation.definition, punctuation.definition.comment#c3c6c2
constant, source.cs entity.name, storage.modifier.import.java#ce7474e8
string#9c83c4
variable, keyword.other.variable.definition.powershell, support.constant.automatic.powershell, support.type.property-name.json, entity.other.attribute-name, meta.function-call.c, punctuation.definition.variable.ruby, punctuation.definition.variable.perl, constant.language.powershell, punctuation.definition.variable.powershell#F0B600
storage, entity.name.function.coffee#70a3be
punctuation#a0bcec
entity, variable.other.object.property.coffee#FFD5B4
support, storage.type.cs, source.php storage.type.class, source.php storage.type.function, storage.modifier.java, entity.name.function.c, variable.other.object.coffee, keyword.control.conditional.batchfile, entity.name.type.class.module.erlang#e29c79
keyword.operator.assignment.powershell#b394f8
meta, string.quoted.double.json, string.quoted.double.xml, entity.name.tag, storage.modifier.ts, source.cs keyword.control, source.css keyword.other.unit, source.php entity.name.type.class, source.php entity.other.inherited-class, entity.name.function.ruby, entity.name.function.go, entity.name.function.lua, variable.other.field.erlang, entity.name.tag.xml#b394f8
text, source.python#d9d3ca

Shiki preview

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

Loading...