Skip to main content
Coding Theme

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.activeBorder#7FA6FF
  • activityBar.background#151925
  • activityBarBadge.background#7FA6FF
  • badge.background#7FA6FF
  • button.background#7FA6FF
  • button.hoverBackground#9AB9FF
  • dropdown.background#151925
  • editor.background#1A1E29
  • editor.selectionBackground#7FA6FF38
  • editorGroupHeader.tabsBackground#151925
  • editorUnnecessaryCode.opacity#FFFFFF70
  • extensionButton.background#7FA6FF
  • focusBorder#7FA6FF
  • gitDecoration.addedResourceForeground#4EC9B0
  • gitDecoration.conflictingResourceForeground#FFCB6B
  • gitDecoration.deletedResourceForeground#FF5C75
  • gitDecoration.ignoredResourceForeground#5F626A
  • gitDecoration.modifiedResourceForeground#E0C285
  • gitDecoration.renamedResourceForeground#82AAFF
  • gitDecoration.stageDeletedResourceForeground#FF5C75
  • gitDecoration.stageModifiedResourceForeground#E0C285
  • gitDecoration.submoduleResourceForeground#C586C0
  • gitDecoration.untrackedResourceForeground#9CDCFE
  • input.background#1A1E29
  • list.activeSelectionBackground#7FA6FF33
  • list.hoverBackground#20263A
  • menu.background#1B1F2AF0
  • menu.selectionBackground#7FA6FF55
  • menubar.selectionBackground#7FA6FF55
  • notificationLink.foreground#7FA6FF
  • notifications.background#1B1F2A
  • notifications.border#7FA6FF55
  • notifications.foreground#C9D1F0
  • notificationsErrorIcon.foreground#FF5C75
  • notificationsInfoIcon.foreground#7FA6FF
  • notificationsWarningIcon.foreground#FFCB6B
  • notificationToast.border#7FA6FF55
  • quickInput.background#1B1F2AD0
  • selection.background#7FA6FF4A
  • settings.checkboxBackground#151925
  • settings.dropdownBackground#151925
  • settings.focusedRowBackground#1A2030
  • settings.modifiedItemIndicator#8A97C2
  • settings.numberInputBackground#151925
  • settings.rowHoverBackground#1A2030
  • settings.textInputBackground#151925
  • sideBar.background#181C27
  • sideBarSectionHeader.background#1A1E29
  • statusBar.background#151925
  • statusBarItem.remoteBackground#151925
  • tab.inactiveBackground#00000000
  • titleBar.activeBackground#141720
  • titleBar.inactiveBackground#141720

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
*url*, *link*, *uri*—underline
constant.language.undefined, constant.language.null—italic
constant.language.import-export-all, punctuation.definition.heading.markdown, markup.heading.markdown—bold
keyword.other#6FA3E8—
variable.other.constant, variable.other.enummember#4FC1FF—
variable, constant.other.placeholder, meta.embedded, support.type.property-name, meta.object-literal.key, entity.other.attribute-name.tsx, entity.other.attribute-name.localname.xml#9CDCFE—
storage, storage.type, storage.modifier, variable.language, constant.language, entity.name.tag.html, entity.name.tag.tsx, meta.selector.css, entity.name.section.markdown, variable.other.assignment.shell, entity.name.tag.localname.xml#5E92D6—
support.class, support.type, entity.name.type, entity.name.function.java, storage.type.annotation#4EC9B0—
meta.at-rule.header.css, entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, constant.character.escape#E0C285—
entity.name.function, support.function#DCDCAA—
string, string.tag, string.value#CE9178—
string.regexp#D16969—
invalid, invalid.illegal#FF5C75—
keyword.control, keyword.other.import, keyword.operator.ternary, keyword.operator.logical#C586C0—
constant.numeric#B5CEA8—
comment, comment.line, comment.block#5C6785italic
comment.block.documentation#6F82B5—
meta, meta.block, meta.class, punctuation.terminator.statement#7F8592—