Skip to main content
Coding Theme

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#d52b1e
  • activityBar.background#001f5c
  • activityBar.foreground#ffffff
  • activityBarBadge.background#d52b1e
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d52b1e
  • breadcrumb.foreground#0039a6
  • breadcrumbPicker.background#ffffff
  • button.background#0039a6
  • button.border#0039a6
  • button.foreground#ffffff
  • button.hoverBackground#002b80
  • descriptionForeground#0039a6
  • dropdown.background#ffffff
  • dropdown.border#0039a6
  • dropdown.foreground#0039a6
  • editor.background#ffffff
  • editor.findMatchBackground#ffcc0040
  • editor.findMatchHighlightBackground#0039a620
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#d52b1e40
  • editor.lineHighlightBackground#f8faff
  • editor.lineHighlightBorder#0039a6
  • editor.selectionBackground#d52b1e
  • editor.selectionHighlightBackground#d52b1e30
  • editor.wordHighlightBackground#0039a615
  • editor.wordHighlightStrongBackground#0039a630
  • editorBracketMatch.background#d52b1e20
  • editorBracketMatch.border#d52b1e
  • editorCursor.foreground#d52b1e
  • editorGroup.border#0039a6
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#0039a6
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#0039a6
  • editorHoverWidget.foreground#000000
  • editorIndentGuide.background1#0039a620
  • editorLineNumber.activeForeground#d52b1e
  • editorLineNumber.foreground#0039a6
  • editorSuggestWidget.background#0039a6
  • editorSuggestWidget.border#001f5c
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#ffcc00
  • editorSuggestWidget.selectedBackground#d52b1e
  • editorSuggestWidget.selectedForeground#ffffff
  • focusBorder#0039a6
  • foreground#0039a6
  • icon.foreground#0039a6
  • input.background#ffffff
  • input.border#0039a6
  • input.foreground#0039a6
  • input.placeholderForeground#666666
  • inputOption.activeBorder#d52b1e
  • inputValidation.errorBackground#d52b1e20
  • inputValidation.infoBackground#0039a620
  • inputValidation.warningBackground#ffcc0020
  • list.activeSelectionBackground#0039a6
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#0039a6
  • list.focusForeground#ffffff
  • list.hoverBackground#0039a620
  • list.hoverForeground#0039a6
  • list.inactiveSelectionBackground#0039a640
  • list.inactiveSelectionForeground#0039a6
  • menu.background#ffffff
  • menu.foreground#d52b1e
  • menu.selectionBackground#0039a6
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#0039a6
  • panel.background#001f5c
  • panel.border#0039a6
  • panelSection.border#0039a6
  • panelSectionHeader.background#0039a6
  • panelSectionHeader.foreground#ffffff
  • panelTitle.activeBorder#d52b1e
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff
  • problemsErrorIcon.foreground#f14c4c
  • problemsInfoIcon.foreground#3794ff
  • problemsWarningIcon.foreground#cca700
  • scrollbarSlider.activeBackground#d52b1e
  • scrollbarSlider.background#d52b1e40
  • scrollbarSlider.hoverBackground#d52b1e60
  • searchEditor.textInputBorder#0039a6
  • settings.headerForeground#0039a6
  • settings.numberInputBorder#0039a6
  • settings.textInputBorder#0039a6
  • sideBar.background#001f5c
  • sideBar.border#0039a6
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#0039a6
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#d52b1e
  • statusBar.border#ffffff
  • statusBar.foreground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#d52b1e
  • tab.activeBorderTop#d52b1e
  • tab.activeForeground#d52b1e
  • tab.border#0039a6
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#0039a6
  • tab.unfocusedActiveBackground#ffffff
  • tab.unfocusedActiveForeground#0039a6
  • tab.unfocusedHoverBackground#ffffff
  • tab.unfocusedInactiveBackground#f5f5f5
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0451a5
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#0451a5
  • terminal.ansiBrightCyan#0598bc
  • terminal.ansiBrightGreen#14CE14
  • terminal.ansiBrightMagenta#bc05bc
  • terminal.ansiBrightRed#cd3131
  • terminal.ansiBrightWhite#a5a5a5
  • terminal.ansiBrightYellow#b5ba00
  • terminal.ansiCyan#0598bc
  • terminal.ansiGreen#00BC00
  • terminal.ansiMagenta#bc05bc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#555555
  • terminal.ansiYellow#949800
  • terminal.background#001f5c
  • terminal.foreground#ffffff
  • terminalCursor.foreground#d52b1e
  • textLink.activeForeground#d52b1e
  • textLink.foreground#0039a6
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#0039a6
  • titleBar.inactiveBackground#f5f5f5
  • titleBar.inactiveForeground#0039a6
  • toolbar.activeBackground#0039a640
  • toolbar.hoverBackground#0039a620
  • widget.shadow#0039a620

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#008000italic
string, punctuation.definition.string, string.quoted.double, string.quoted.single#a31515
keyword, storage.type, storage.modifier, keyword.control, keyword.operator#0000ffbold
entity.name.function, support.function, meta.function-call#795E26
variable, variable.parameter, variable.other.readwrite, variable.other.property#001080
entity.name.class, support.type, entity.name.type, storage.type#267f99bold
constant.numeric, constant.language.numeric#098658
keyword.operator, punctuation.accessor#000000
entity.name.tag.html, entity.name.tag.structure.any.html, entity.name.tag.block.any.html#800000bold
entity.name.tag.semantic.html, entity.name.tag.header.html, entity.name.tag.footer.html, entity.name.tag.section.html, entity.name.tag.article.html, entity.name.tag.nav.html, entity.name.tag.aside.html#267f99bold
entity.name.tag.form.html, entity.name.tag.input.html, entity.name.tag.button.html, entity.name.tag.select.html, entity.name.tag.textarea.html, entity.name.tag.label.html#d52b1ebold
entity.name.tag.img.html, entity.name.tag.video.html, entity.name.tag.audio.html, entity.name.tag.canvas.html, entity.name.tag.svg.html#9457a0bold
entity.name.tag.ul.html, entity.name.tag.ol.html, entity.name.tag.li.html#098658bold
entity.name.tag.table.html, entity.name.tag.tr.html, entity.name.tag.td.html, entity.name.tag.th.html, entity.name.tag.thead.html, entity.name.tag.tbody.html#795E26bold
entity.name.tag.script.html, entity.name.tag.style.html, meta.tag.structure.script.html, meta.tag.structure.style.html#0000ffbold
entity.name.tag.link.html, entity.name.tag.meta.html, entity.name.tag.title.html#0451a5bold
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#666666
entity.other.attribute-name.id.html#ff0000bold
entity.other.attribute-name.class.html#d52b1e
entity.other.attribute-name, meta.attribute.with-value.html, entity.other.attribute-name.html#ff6b00
string.attribute-value.html, meta.attribute-with-value.html string#a31515
text.html.basic, meta.tag.other.html, meta.tag.block.any.html#000000
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag#808080
constant.character.entity#0000ff
support.type.property-name.css, meta.property-name.css#ff0000
support.type.property-name.color.css#d52b1e
support.type.property-name.font.css, support.type.property-name.text.css#9457a0
constant.other.color.css#098658
constant.numeric.css#795E26
string.quoted.css#a31515
entity.other.attribute-name.id.css#ff0000bold
entity.other.attribute-name.class.css#d52b1e
entity.name.tag.css#0000ffbold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#9457a0
punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.section.property-list.css#000000
variable.other.object, variable.other.property#001080
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json#0451a5
constant.language, variable.other.constant#0000ff
invalid, invalid.illegal#ff0000underline
punctuation, punctuation.separator#000000
markup.heading, markup.heading.setext#0000ffbold
markup.underline.link, string.other.link#0451a5
markup.bold#000000bold
markup.italic#000000italic
storage.type.js, storage.modifier.js#0000ffbold
support.class.builtin.js, support.function.builtin.js#267f99
Light Rus Theme by HaLLIaTbIPb - VS Code Theme