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.background#2B2D30
  • activityBar.border#1E1F22
  • activityBar.foreground#BDBDBD
  • breadcrumb.background#1E1F22
  • breadcrumb.foreground#BDBDBD
  • button.background#3474F0
  • editor.background#262626
  • editor.foreground#BDBDBD
  • editor.selectionBackground#09335E
  • editorGroup.border#393B41
  • editorGroup.emptyBackground#2B2D30
  • editorGroupHeader.tabsBackground#1E1F22
  • editorGroupHeader.tabsBorder#393B41
  • editorWidget.background#2B2D30
  • editorWidget.border#2B2D30
  • editorWidget.foreground#BDBDBD
  • list.activeSelectionBackground#2E436E
  • list.hoverBackground#2E436B
  • list.inactiveSelectionBackground#43454A
  • panel.background#262626
  • panel.border#1E1F22
  • panelTitle.activeBorder#3474F0
  • panelTitle.activeForeground#DFE1E5
  • panelTitle.inactiveForeground#9FA1A5
  • scrollbar.shadow#262626
  • sideBar.background#2B2D30
  • sideBar.border#1E1F22
  • sideBar.foreground#BDBDBD
  • sideBarSectionHeader.background#2B2D30
  • sideBarSectionHeader.border#1E1F22
  • sideBarSectionHeader.foreground#BDBDBD
  • sideBarTitle.foreground#BDBDBD
  • statusBar.background#2B2D30
  • statusBar.debuggingBackground#3474F0
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#BDBDBD
  • statusBar.noFolderBackground#2B2D30
  • statusBar.noFolderForeground#BDBDBD
  • tab.activeBackground#1E1F22
  • tab.activeBorder#3474F0
  • tab.activeForeground#82ACFC
  • tab.border#1E1F22
  • tab.inactiveBackground#1E1F22
  • tab.inactiveForeground#9FA1A5
  • titleBar.activeBackground#2B2D30
  • titleBar.activeForeground#BDBDBD
  • titleBar.inactiveBackground#2B2D30
  • titleBar.inactiveForeground#BDBDBD
  • toolbar.activeBackground#1E1F22
  • widget.shadow#00000075

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, constant.language.boolean, variable.language.this, constant.language, support.type.property-name.css, support.type.property-name.media.css, storage.modifier, keyword.operator.expression.await, keyword.operator.expression.new, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.in, keyword.operator.expression.delete, support.function.construct.output.php, string.other.link.title.markdown, markup.link.url.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown#6C95EB
entity.name.type.namespace, entity.name.type.interface, entity.name.type.class, support.type.primitive, support.class, support.type.exception, entity.name.tag.css, keyword.control.at-rule.media.css, support.constant.font-name.css, entity.name.tag.html, entity.name.tag.tsx, entity.name.tag.js.jsx, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx, entity.name.type, entity.name.tag.localname.xml, punctuation.definition.tag.xml, constant.character.escape, entity.name.tag.yaml#C191FF
entity.name.type.enum, entity.name.type.struct#E2BFFF
entity.name.variable.enum-member, entity.name.variable.field, entity.name.variable.property, variable.other.object.property, variable.other.enummember, support.type.property-name.json, markup.link.url.markdown, markup.heading.markdown, markup.heading.setext.markdown, meta.expression.implicit.cshtml#65C3CC
comment, entity.other.attribute-name.html, meta.tag.xml, meta.tag.attributes.tsx, meta.tag.attributes.js.jsx, markup.quote.markdown#85C46C
entity.name.function, support.function.magic, support.function.builtin, support.function.misc.css, meta.function-call.php#3ACC9B
string.quoted.double, string.interpolated.double, string.quoted.single, meta.preprocessor.include, string.interpolated.single, string.template, punctuation.definition.entity.html#C8A16D
variable.parameter, meta.interpolation, entity.name.variable.local, punctuation.parenthesis.open, punctuation.parenthesis.close, punctuation.terminator.statement, keyword.operator, keyword.other.unit, markup.separator.markdown#BDBDBD
constant.numeric, markup.inline.raw.string.markdown#EC94C0
constant.other.color.rgb-value.hex.css#ADEB96

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

JetBrains Rider Dark Theme - Coding Theme