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
emphasisitalic
strongbold
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.underlineunderline
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
Nimbo Theme by Rohit Ramteke - VS Code Theme