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.background#212733
  • activityBar.border#1B2231
  • activityBar.foreground#5ccfe6
  • activityBarBadge.background#5ccfe6
  • activityBarBadge.foreground#212733
  • dropdown.background#232C3B
  • dropdown.border#1B2231
  • dropdown.foreground#C6E6FA
  • editor.background#212733
  • editor.foreground#C6E6FA
  • editorGroup.border#1B2231
  • editorGroupHeader.tabsBackground#232C3B
  • editorGroupHeader.tabsBorder#1B2231
  • editorLineNumber.activeForeground#5ccfe6
  • editorLineNumber.foreground#6D88A6
  • editorRuler.foreground#223045
  • editorWidget.background#232C3B
  • editorWidget.border#1B2231
  • focusBorder#5ccfe6
  • input.background#232C3B
  • input.border#1B2231
  • input.foreground#C6E6FA
  • input.placeholderForeground#6D88A6
  • list.activeSelectionBackground#253144
  • list.activeSelectionForeground#5ccfe6
  • list.hoverBackground#223045
  • list.hoverForeground#5ccfe6
  • list.inactiveSelectionBackground#212733
  • list.inactiveSelectionForeground#C6E6FA
  • menu.background#212733
  • menu.border#1B2231
  • menu.foreground#C6E6FA
  • menu.selectionBackground#223045
  • menu.selectionForeground#5ccfe6
  • menu.separatorBackground#232C3B
  • minimap.background#232C3B
  • minimapSlider.activeBackground#5ccfe622
  • minimapSlider.background#22304544
  • minimapSlider.hoverBackground#5ccfe622
  • panel.background#232C3B
  • panel.border#1B2231
  • panelTitle.activeForeground#5ccfe6
  • peekViewEditor.background#232C3B
  • peekViewEditor.matchHighlightBackground#5ccfe622
  • quickInput.background#232C3B
  • quickInput.foreground#C6E6FA
  • scrollbar.shadow#00000000
  • selection.background#23344A
  • sideBar.background#212733
  • sideBar.border#1B2231
  • sideBar.foreground#C6E6FA
  • sideBarSectionHeader.background#212733
  • sideBarSectionHeader.border#1B2231
  • sideBarSectionHeader.foreground#5ccfe6
  • statusBar.background#212733
  • statusBar.border#1B2231
  • statusBar.foreground#C6E6FA
  • tab.activeBackground#232C3B
  • tab.activeForeground#5ccfe6
  • tab.border#1B2231
  • tab.inactiveBackground#212733
  • tab.inactiveForeground#6D88A6
  • terminal.background#232C3B
  • terminal.foreground#C6E6FA
  • titleBar.activeBackground#212733
  • titleBar.activeForeground#C6E6FA
  • titleBar.border#1B2231
  • titleBar.inactiveBackground#212733
  • titleBar.inactiveForeground#6D88A6
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#C6E6FA—
emphasis—italic
strong—bold
header#00aaff—
comment#5D7B99italic
constant.language#7CC6FF—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#4AE7FF—
constant.regexp#2FC7F7—
entity.name.tag#49B0FF—
entity.name.tag.css, entity.name.tag.less#4AE7FF—
entity.other.attribute-name#7CC6FF—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#4AE7FF—
invalid#ED6E6E—
markup.underline—underline
markup.bold#7CC6FFbold
markup.heading#7CC6FFbold
markup.italic#4AE7FFitalic
markup.strikethrough#5ccfe6strikethrough
markup.inserted#7DEDFF—
markup.deleted#99AABB—
markup.changed#4AE7FF—
punctuation.definition.quote.begin.markdown#5ccfe6—
punctuation.definition.list.begin.markdown#4AE7FF—
markup.inline.raw#4AE7FF—
punctuation.definition.tag#5ccfe6—
meta.preprocessor, entity.name.function.preprocessor#5ccfe6—
meta.preprocessor.string#7CC6FF—
meta.preprocessor.numeric#49B0FF—
meta.structure.dictionary.key.python#7CC6FF—
meta.diff.header#5ccfe6—
storage#7CC6FF—
storage.type#7CC6FF—
storage.modifier, keyword.operator.noexcept#7CC6FF—
string, meta.embedded.assembly#7DEDFF—
string.tag#7DEDFF—
string.value#7DEDFF—
string.regexp#2FC7F7—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#4AE7FF—
meta.template.expression#C6E6FA—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#7CC6FF—
keyword#7CC6FF—
keyword.control#7CC6FF—
keyword.operator#4AE7FF—
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.wordlike#4AE7FF—
keyword.other.unit#4AE7FF—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5ccfe6—
support.function.git-rebase#5ccfe6—
constant.sha.git-rebase#49B0FF—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#C6E6FA—
variable.language#5ccfe6—