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#244994
  • activityBar.background#17181C
  • activityBar.border#26272C
  • activityBarBadge.background#244994
  • badge.background#244994
  • button.background#244994
  • button.hoverBackground#345EB1
  • dropdown.background#17181C
  • editor.background#1B1D22
  • editor.selectionBackground#2449943e
  • editorGroupHeader.tabsBackground#17181C
  • editorHoverWidget.background#191a1ff2
  • editorHoverWidget.border#26272C
  • editorHoverWidget.statusBarBackground#191A1Fde
  • editorStickyScroll.shadow#00000000
  • editorUnnecessaryCode.opacity#ffffff65
  • extensionButton.background#244994
  • focusBorder#1e45925b
  • input.background#202228
  • list.activeSelectionBackground#2449945b
  • list.hoverBackground#24272D
  • menu.background#1e2026de
  • menu.selectionBackground#244994
  • menubar.selectionBackground#244994
  • panel.background#191A1F
  • panel.border#26272C
  • panelTitle.activeBorder#345EB1
  • quickInput.background#1e2026de
  • scrollbar.shadow#00000060
  • scrollbarSlider.background#3d414d75
  • selection.background#244994
  • settings.checkboxBackground#17181C
  • settings.dropdownBackground#17181C
  • settings.focusedRowBackground#1B1D22
  • settings.modifiedItemIndicator#545E7A
  • settings.numberInputBackground#17181C
  • settings.rowHoverBackground#1B1D22
  • settings.textInputBackground#17181C
  • sideBar.background#17181C
  • sideBar.border#26272C
  • sideBarSectionHeader.background#202228
  • statusBar.background#17181C
  • statusBar.border#26272C
  • statusBar.focusBorder#00000000
  • statusBarItem.hoverBackground#26272C
  • statusBarItem.prominentBackground#00000000
  • statusBarItem.prominentHoverBackground#26272C
  • statusBarItem.remoteBackground#17181C
  • tab.activeBorderTop#345EB1
  • tab.inactiveBackground#00000000
  • terminal.tab.activeBorder#345EB1
  • titleBar.activeBackground#17181C
  • titleBar.inactiveBackground#17181C
  • toolbar.hoverBackground#26272C
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
*url*, *link*, *uri*underline
constant.language.undefined, constant.language.nullitalic
constant.language.import-export-all, punctuation.definition.heading.markdown, markup.heading.markdownbold
keyword.other#6796E6
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, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, variable.language, keyword.control.new, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.wordlike, keyword.other.definition.ini, constant.language, entity.name.tag.html, entity.name.tag.tsx, meta.selector.css, entity.name.section.markdown, punctuation.definition.heading.markdown, variable.other.assignment.shell, entity.name.tag.localname.xml#569CD6
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.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, constant.character.escape, keyword.operator.quantifier.regexp#D7BA7D
entity.name.function, support.function, keyword.control.anchor.regexp, keyword.operator.or.regexp#DCDCAA
string, string.tag, string.value, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#CE9178
string.regexp, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp, meta.group.regexp#D16969
invalid, invalid.illegal#FF5370
keyword.control, keyword.other.import, keyword.other.package, support.variable.property.importmeta, keyword.operator.ternary, keyword.operator.logical#C586C0
#819b75
#4b7354
constant.numeric#B5CEA8
source.ini, keyword.operator.assignment#D4D4D4
meta.jsx.children.tsx, meta.paragraph.markdown#bdbdbd
comment, comment.line, comment.block, comment.block.documentation#545E7A
meta, meta.block, meta.class, punctuation.terminator.statement, punctuation.separator.key-value, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx#7f8592
source.ignore#5f626aitalic underline
punctuation.definition.typeparameters#5f626a
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF