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#22254A
  • activityBarBadge.background#ba2613b0
  • badge.background#ba2613b0
  • breadcrumbPicker.background#22254A
  • button.background#783F79
  • debugToolBar.background#22254A
  • diffEditor.insertedTextBackground#64be8165
  • dropdown.background#094063
  • editor.background#22254A
  • editor.findMatchBackground#B0A9CB7a
  • editor.foreground#e2ebf0
  • editor.lineHighlightBackground#B0A9CB23
  • editor.selectionBackground#B0A9CB48
  • editor.selectionHighlightBackground#cacaca65
  • editor.wordHighlightStrongBackground#B0A9CB48
  • editorCursor.foreground#3ECBFA
  • editorGroupHeader.tabsBackground#22254A
  • editorLineNumber.activeForeground#f1f1f1
  • editorLineNumber.foreground#d4d4d4
  • editorPane.background#22254A
  • editorSuggestWidget.highlightForeground#3ECBFA
  • editorSuggestWidget.selectedBackground#636363a5
  • editorWidget.background#22254A
  • extensionButton.prominentBackground#5bbe7ad3
  • extensionButton.prominentHoverBackground#89CA6F
  • focusBorder#575a75d7
  • gitDecoration.modifiedResourceForeground#47bc9b
  • input.background#094063
  • input.placeholderForeground#e2ebf0a0
  • list.activeSelectionBackground#094063
  • list.focusBackground#636363a5
  • list.hoverBackground#747474a1
  • list.inactiveSelectionBackground#636363a5
  • list.warningForeground#e3984c
  • menu.background#181a3d
  • menu.selectionBackground#636363a5
  • notificationCenterHeader.background#22254A
  • notifications.background#22254A
  • panel.background#22254A
  • pickerGroup.foreground#efc404d1
  • selection.background#efc40457
  • sideBar.background#22254A
  • sideBarTitle.foreground#B0A9CB
  • statusBar.background#22254A
  • tab.activeBorder#3ECBFA
  • tab.activeModifiedBorder#C0975A
  • tab.border#353855bd
  • tab.inactiveBackground#353855bd
  • terminal.background#22254A
  • titleBar.activeBackground#22254A

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#bf9dece7
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#A1E56Ae7
storage, entity.name.function.coffee#68BCEA
punctuation#a0bcec
entity, variable.other.object.property.coffee#FFD5B4
support, storage.type.cs, entity.name.tag, 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, 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#A1E56Ae7
text, source.python#d9d3ca

Shiki preview

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

Loading...