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#0D161F
  • activityBar.border#0D161F
  • activityBar.foreground#5d8cc0
  • activityBarBadge.background#0D161F
  • activityBarBadge.foreground#5d8cc077
  • badge.background#242C35
  • badge.foreground#5d8cc0
  • banner.background#0D161F
  • breadcrumb.background#0D161F
  • button.background#242C35
  • button.foreground#5d8cc0
  • checkbox.background#242C35
  • checkbox.foreground#5d8cc0
  • disabledForeground#5d8cc077
  • dropdown.background#0D161F
  • dropdown.border#242C35
  • dropdown.foreground#5d8cc0
  • dropdown.listBackground#0D161F
  • editor.background#0D161F
  • editor.foreground#5d8cc0
  • editor.lineHighlightBackground#5d8cc011
  • editor.selectionBackground#5d8cc022
  • editor.selectionHighlightBackground#5d8cc044
  • editorGroup.border#242C35
  • editorGroupHeader.border#0D161F
  • editorGroupHeader.tabsBackground#0D161F
  • editorHoverWidget.background#0D161F
  • editorLineNumber.activeForeground#5d8cc0
  • editorLineNumber.foreground#5d8cc077
  • editorOverviewRuler.border#0D161F
  • editorWidget.background#0D161F
  • editorWidget.border#5d8cc077
  • focusBorder#242C35
  • foreground#5d8cc0
  • icon.foreground#5d8cc077
  • input.background#242C35
  • input.border#242C35
  • input.foreground#5d8cc0
  • list.activeSelectionBackground#5d8cc022
  • list.activeSelectionForeground#5d8cc0
  • list.hoverBackground#5d8cc044
  • menu.background#0D161F
  • minimap.background#0D161F
  • panel.background#0D161F
  • panel.border#242C35
  • panelSectionHeader.foreground#5d8cc0
  • progressBar.background#5d8cc0
  • scrollbar.shadow#242C35
  • scrollbarSlider.activeBackground#242C35
  • scrollbarSlider.background#242C3577
  • scrollbarSlider.hoverBackground#242C35
  • sideBar.background#0D161F
  • sideBar.foreground#5d8cc0
  • sideBySideEditor.horizontalBorder#242C35
  • sideBySideEditor.verticalBorder#242C35
  • statusBar.background#0D161F
  • statusBar.border#242C35
  • statusBar.foreground#5d8cc077
  • statusBar.noFolderBackground#0D161F
  • tab.activeBackground#0D161F
  • tab.activeBorderTop#5d8cc0
  • tab.activeForeground#5d8cc0
  • tab.border#0D161F
  • tab.inactiveBackground#0D161F
  • tab.inactiveForeground#5d8cc077
  • terminal.background#0D161F
  • terminal.border#0D161F
  • terminal.foreground#5d8cc0
  • titleBar.activeBackground#0D161F
  • titleBar.border#0D161F
  • titleBar.inactiveBackground#0D161F
  • widget.border#242C35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.definition.function, meta.definition.variable entity.name.function, meta.function.python entity.name.function.python, meta.function.python support.function#34febb
meta.function-call#32ae85
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#444c55italic
variable, variable.other, variable.parameter, comment variable, support.variable, string constant.other.placeholder, constant.other.color, meta.object-literal.key#88b4e7
entity.name.function.operator, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.other.template, keyword.other.substitution, keyword.operator.logical, keyword.operator.comparison, keyword.operator.assignment, storage.modifier, storage.type, variable.language, constant.language, support.class, support.type, meta.brackets entity.name.function.operator, meta.tag, meta.brace, constant.other.color, storage.type.function.arrow#586f89
punctuation, punctuation.definition, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.separator, punctuation.terminator#444c55
constant, constant.numeric, constant.language, constant.character.escape, entity.name.operator.custom-literal, string.quoted, string.template, string.quoted.docstring, string.quoted.docstring punctuation.definition#5d8cc0
constant.other, constant.other.caps, constant.other.property, constant.other.color, constant.character.escape, constant.other.character-class.escape, entity.name.constant, support.type.property-name, string.quoted.double.json#5d8cc0
invalid, invalid.illegal#e06c75
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#586f89
comment entity.name.type, comment storage.type, entity.name.class, entity.name.namespace, entity.name.type, entity.name.type.class, entity.name.type.namespace, entity.other.inherited-class, entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, meta.class, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#d6e9ff
entity.name.tag, string.regexp, meta.tag.sgml, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#444c55
*url*, *link*, *uri*underline
markup.headingbold
markup.italic, markup.quoteitalic
markup.bold, markup.bold stringbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold stringbold italic
markup.underlineunderline
dark-rotor theme by rotorsoft - VS Code Theme