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.activeBackground#0a0a0a
  • activityBar.activeBorder#E0234E
  • activityBar.activeFocusBorder#000
  • activityBar.background#0a0a0a
  • activityBar.border#00000000
  • activityBar.foreground#565656
  • activityBarBadge.background#000
  • activityBarBadge.foreground#E0234E
  • button.background#E0234E
  • button.foreground#7fa0b1
  • disabledForegrounddefault
  • editor.background#0a0a0a
  • editor.foreground#ebebeb
  • editor.selectionBackground#424d53
  • editorCursor.background#E0234E
  • editorCursor.foreground#ccc
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorLineNumber.activeForeground#E0234E
  • editorLineNumber.foreground#2f2f2f
  • editorRuler.foreground#2f2f2f
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.focusHighlightForeground#E0234E
  • editorSuggestWidget.foreground#7fa0b1
  • editorSuggestWidget.highlightForeground#E0234E
  • editorWhitespace.foreground#2f2f2f
  • focusBorder#00000000
  • foreground#7fa0b1
  • gitDecoration.ignoredResourceForeground#424d53
  • gitDecoration.modifiedResourceForeground#d6af78
  • gitDecoration.untrackedResourceForeground#37c2b6
  • icon.foreground#E0234E
  • input.background#0a0a0a
  • list.activeSelectionBackground#000
  • list.activeSelectionForeground#E0234E
  • list.focusForeground#7fa0b1
  • list.focusHighlightForeground#E0234E
  • list.highlightForeground#E0234E
  • list.hoverBackground#000
  • list.inactiveSelectionBackground#000
  • list.inactiveSelectionForeground#E0234E
  • menu.background#0a0a0a
  • menu.foreground#7fa0b1
  • notifications.background#000
  • notifications.foreground#7fa0b1
  • panel.background#0a0a0a
  • panel.border#000
  • panelTitle.activeForeground#E0234E
  • panelTitle.inactiveForeground#7fa0b1
  • panelTitleBadge.background#ff7171
  • pickerGroup.border#7fa0b1
  • quickInput.background#0a0a0a
  • quickInput.foreground#7fa0b1
  • sash.hoverBorder#E0234E
  • selection.background#424d53
  • sideBar.background#0a0a0a
  • sideBar.border#00000000
  • sideBar.foreground#7fa0b1
  • sideBarActivityBarTop.border#00000000
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#7fa0b1
  • sideBarStickyScroll.border#00000000
  • sideBarTitle.background#0a0a0a
  • sideBarTitle.border#00000000
  • sideBarTitle.foreground#7fa0b1
  • statusBar.background#0a0a0a
  • statusBar.border#00000000
  • statusBar.debuggingBackground#ff7171
  • statusBar.debuggingForeground#0a0a0a
  • statusBar.foreground#424d53
  • statusBar.noFolderBackground#161515
  • tab.activeBackground#0a0a0a
  • tab.activeBorderTop#E0234E
  • tab.activeForeground#7fa0b1
  • tab.border#00000000
  • tab.hoverBackground#1a1919
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#424d53
  • tab.lastPinnedBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedInactiveBackground#0a0a0a
  • terminal.ansiBlack#2d2d2d
  • terminal.ansiBlue#6699cc
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#4fc1ff
  • terminal.ansiBrightCyan#4cd1d1
  • terminal.ansiBrightGreen#b5cea8
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#d16969
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#66cccc
  • terminal.ansiGreen#99cc99
  • terminal.ansiMagenta#c586c0
  • terminal.ansiRed#cc6666
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#d7ba7d
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#424d53
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForegrounddefault
  • widget.border#00000000
  • widget.shadow#00000000
  • window.activeBorder#0a0a0a
  • window.inactiveBorderdefault

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant#9d79d8
comment, string.quoted.docstring.multi.python#73648b
entity.name.type.class, support.class#37c2b6
meta.function-call.generic, support.type.python, entity.name.function#509ddb
invalid#dd518c
keyword#dd518c
storage.type.class.js#509DDB
entity.name.type, support.type#37c2b6
meta#b9d3e9
meta.brace#b9d3e9
punctuation.definition.parameters#b9d3e9
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.function.parameter variable.other, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#d6af78italic
punctuation.definition.template-expression#509ddb
storage#c693da
storage.type.function.arrow#509DDB
string, source.json string, punctuation.definition.string#c9c994
string.template, punctuation.definition.string.template#509ddb
support.function#509ddb
support.class.component.js#509DDB
support.class.component.html#c693da
support.variable.property.dom#b9d3e9
variable#b9d3e9
source.css, source.stylus, source.scss, entity.other.attribute-name.class.css#509ddb
constant.other.color.rgb-value.hex.css#dd518c
support.type.property-name.css#b9d3e9
keyword.other.important.scss#dd518c
support.function.misc.scss#b9d3e9
entity.other.attribute-name.id.css#9d79d8
entity.name.tag.css#509ddb
source.css support, source.stylus support#b9d3e9
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#dd518c
support.constant.property-value.css#c9c994
constant.other.color.rgb-value.hex.css#c9c994
source.css punctuation.definition.string, source.css string, source.stylus punctuation.definition.string, source.stylus string#c9c994
source.css variable, source.stylus variable#c693da
entity.other.attribute-name.css#d6af78
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#c693da
entity.other#37c2b6
text.html.basic#b9d3e9
toc-list.id.html#509ddb
entity.name.tag.block.any.html, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, entity.name.tag.html, meta.tag.js, meta.jsx.children.tsx, meta.tag.js, meta.jsx.children.tsx, meta.tag.js#b9d3e9
entity.name.tag.other.html#c693da
punctuation.definition.string.begin, punctuation.definition.string.end#509ddb
variable.language, entity.name.type.class.js#c693da
entity.other.inherited-class.js, variable.language.this.js, variable.other.readwrite.alias.js, meta.import.js#c693daitalic
variable.language.this.php#c693daitalic
storage.type.function.python#c693da
source.json string, source.json punctuation.definition.string#c9c994
punctuation.definition.string.end.json, punctuation.definition.string.begin.json#509ddb
token.info-token#509ddb
token.warn-token#d6af78
token.error-token#dd518c
token.debug-token#c693da
keyword.control, punctuation.section.embedded.begin , punctuation.section.embedded.end#dd518c
constant.character.format.placeholder.other.python#c693da
constant.character.escape.python#509ddb
entity.name.tag.css#37c2b6
entity.other.attribute-name.class.css#509ddb
keyword.other.unit.deg.css, keyword.other.unit.ms.css, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.s.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css#dd518c
markup.list.unnumbered.markdown, markup.list.numbered.markdown#dd518c
markup.bold.markdown, markup.italic.markdown, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, meta.separator.markdown#9d79d8
entity.name.section.markdown, punctuation.definition.heading.markdown, punctuation.definition.raw.markdown#37c2b6
markup.raw.block.markdown#d6af78
markup.underline.link.markdown, markup.underline.link.image.markdown#509ddb
support.type.property-name.json.comments, support.type.property-name.json#509ddb
entity.name.tag.block.any.html, entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, entity.name.tag.js, entity.name.tag.template, entity.name.tag.script, entity.name.tag.style#509ddb
markup.boldbold
markup.headingbold
markup.italicitalic
source.css constant#9d79d8
entity.name.tag.yaml, entity.name.tag.localname.xml#509ddb
Red Dwarf by Abel Franco - VS Code Theme