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#002800
  • activityBarBadge.background#8f5bffef
  • badge.background#8f5bffb9
  • breadcrumbPicker.background#0c441b
  • button.background#8F6700
  • debugToolBar.background#002800
  • diffEditor.insertedTextBackground#64be8165
  • dropdown.background#7856005c
  • editor.background#002800
  • editor.findMatchBackground#B0A9CB7a
  • editor.foreground#e2ebf0
  • editor.lineHighlightBackground#B0A9CB23
  • editor.selectionBackground#B0A9CB48
  • editor.selectionHighlightBackground#cacaca65
  • editor.wordHighlightStrongBackground#B0A9CB48
  • editorCursor.foreground#d2861a
  • editorGroupHeader.tabsBackground#002800
  • editorPane.background#002800
  • editorSuggestWidget.highlightForeground#9eaf59
  • editorSuggestWidget.selectedBackground#636363a5
  • editorWidget.background#002800
  • extensionButton.prominentBackground#5bbe7ad3
  • extensionButton.prominentHoverBackground#89CA6F
  • focusBorder#708270d3
  • gitDecoration.modifiedResourceForeground#47bc9b
  • input.background#0c441b6a
  • input.placeholderForeground#e2ebf0a0
  • list.activeSelectionBackground#a26b2763
  • list.focusBackground#636363a5
  • list.hoverBackground#4b5a4fe1
  • list.inactiveSelectionBackground#636363a5
  • list.warningForeground#e3984c
  • menu.background#0c441b
  • menu.selectionBackground#636363a5
  • notificationCenterHeader.background#002800
  • notifications.background#002800
  • panel.background#002800
  • pickerGroup.foreground#efc404d1
  • selection.background#efc40457
  • sideBar.background#002800
  • sideBarTitle.foreground#B0A9CB
  • statusBar.background#002800
  • tab.activeBorder#8f5bffed
  • tab.activeModifiedBorder#8EA142
  • tab.border#1A3A1Abd
  • tab.inactiveBackground#1A3A1Abd
  • terminal.background#002800
  • titleBar.activeBackground#002800

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#48c4b6
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
keyword.operator.assignment.powershell#b394f8
storage, entity.name.function.coffee#68BCEA
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
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...