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#250000f4
  • activityBarBadge.background#BD2A1B
  • badge.background#bd2b1be2
  • breadcrumbPicker.background#432001
  • button.background#8F6700
  • debugToolBar.background#250000
  • diffEditor.insertedTextBackground#64be8165
  • dropdown.background#7856005c
  • editor.background#250000f4
  • editor.findMatchBackground#B0A9CB7a
  • editor.foreground#e2ebf0
  • editor.lineHighlightBackground#B0A9CB23
  • editor.selectionBackground#B0A9CB48
  • editor.selectionHighlightBackground#cacaca65
  • editor.wordHighlightStrongBackground#B0A9CB48
  • editorCursor.foreground#BD2A1B
  • editorGroupHeader.tabsBackground#250000f4
  • editorPane.background#250000f4
  • editorSuggestWidget.highlightForeground#D5A8A5
  • editorSuggestWidget.selectedBackground#af5b0275
  • editorWidget.background#2f2927d8
  • extensionButton.prominentBackground#5bbe7ad3
  • extensionButton.prominentHoverBackground#89CA6F
  • focusBorder#af753a93
  • gitDecoration.modifiedResourceForeground#47bc9b
  • input.background#432001
  • input.placeholderForeground#e2ebf0a0
  • list.activeSelectionBackground#745d42d5
  • list.focusBackground#6363638b
  • list.hoverBackground#5a4f4be1
  • list.inactiveSelectionBackground#6363638b
  • list.warningForeground#e3984c
  • menu.background#432001
  • menu.selectionBackground#6363638b
  • notificationCenterHeader.background#250000f4
  • notifications.background#250000f4
  • panel.background#250000f4
  • pickerGroup.foreground#efc404d1
  • selection.background#efc40457
  • sideBar.background#250000f4
  • sideBarTitle.foreground#B0A9CB
  • statusBar.background#250000f4
  • tab.activeBorder#BD2A1B
  • tab.border#381B1Bbd
  • tab.inactiveBackground#381B1Bbd
  • terminal.background#250000
  • titleBar.activeBackground#280000f4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cec9df
keyword, keyword.control, entity.name.tag.xml, 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#a9b1b9b0
constant, source.cs entity.name, storage.modifier.import.java#b783fbe7
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#4fbccd
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#f12a2af3
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#4fbccd
text, source.python#d9d3ca

Shiki preview

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

Loading...