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.

  • actionBar.toggledBackground#3b3e5280
  • activityBar.background#16161e
  • activityBar.foreground#686bc2
  • activityBar.inactiveForeground#3b3e52
  • activityBarBadge.background#3d59a1
  • activityBarBadge.foreground#ffffff
  • badge.background#2e3f5d
  • badge.foreground#b4bbdc
  • breadcrumb.activeSelectionForeground#a9b1d6
  • breadcrumb.background#16161e
  • breadcrumb.focusForeground#a9b1d6
  • breadcrumb.foreground#515670
  • breadcrumbPicker.background#16161e
  • button.background#385090
  • button.hoverBackground#3d59a1
  • button.secondaryBackground#3b3e52
  • button.secondaryForeground#a9b1d6
  • button.secondaryHoverBackground#474a5f
  • debugIcon.breakpointDisabledForeground#414761
  • debugIcon.breakpointForeground#c93a3ace
  • debugIcon.breakpointUnverifiedForeground#a83d3d
  • descriptionForeground#515670
  • disabledForeground#3b3e52
  • editor.background#171822
  • editor.foreground#b4bbdc
  • editor.inactiveSelectionBackground#2d3f5f80
  • editor.lineHighlightBackground#1f2335
  • editor.selectionBackground#515c7e4d
  • editor.selectionHighlightBackground#2d3f5f40
  • editorCursor.foreground#c0caf5
  • editorGroup.border#101014
  • editorGroup.dropBackground#2d3f5fa3
  • editorGroupHeader.tabsBackground#16161e
  • editorGroupHeader.tabsBorder#101014
  • editorIndentGuide.activeBackground1#363b54
  • editorIndentGuide.background1#232433
  • editorLineNumber.activeForeground#787c99
  • editorLineNumber.foreground#363b54
  • editorRuler.foreground#101014
  • editorWidget.background#16161e
  • editorWidget.border#101014
  • editorWidget.foreground#8891b3
  • focusBorder#1a1b26
  • foreground#8891b3
  • gitDecoration.conflictingResourceForeground#bb9af7
  • gitDecoration.deletedResourceForeground#f7768e
  • gitDecoration.ignoredResourceForeground#565f89
  • gitDecoration.modifiedResourceForeground#6183bb
  • gitDecoration.submoduleResourceForeground#4e7ad8
  • gitDecoration.untrackedResourceForeground#40a192
  • icon.foreground#787c99
  • input.background#12121a
  • input.border#181717
  • input.foreground#a9b1d6
  • input.placeholderForeground#474f72
  • inputOption.activeBackground#3b3e5280
  • inputOption.activeBorder#47548a
  • inputOption.activeForeground#c0caf5
  • inputOption.hoverBackground#1f233580
  • list.activeSelectionBackground#1c1d29
  • list.activeSelectionForeground#a9b1d6
  • list.dropBackground#2d3f5f40
  • list.focusBackground#1c1d29
  • list.focusForeground#a9b1d6
  • list.hoverBackground#191c2b
  • list.hoverForeground#a9b1d6
  • list.inactiveSelectionBackground#00000000
  • list.inactiveSelectionForeground#a9b1d6
  • menu.background#16161e
  • menu.foreground#898caa
  • menubar.selectionBackground#1e202e
  • menubar.selectionBorder#1b1e2e
  • menubar.selectionForeground#686bc2
  • panel.background#16161e
  • panel.border#101014
  • panelTitle.activeBorder#00000000
  • panelTitle.activeForeground#787c99
  • panelTitle.inactiveForeground#484d66
  • quickInput.background#16161e
  • quickInput.foreground#8891b3
  • quickInputList.focusBackground#1c1d29
  • scmGraph.foreground1#6890d8
  • scmGraph.foreground2#b85d39
  • scmGraph.foreground3#3eb8b8
  • scmGraph.foreground4#d4b575
  • scmGraph.foreground5#e89664
  • scmGraph.historyItemBaseRefColor#ab64ccec
  • scmGraph.historyItemHoverAdditionsForeground#5eb3b3
  • scmGraph.historyItemHoverDefaultLabelForeground#8891b3
  • scmGraph.historyItemHoverDeletionsForeground#e06c75
  • scmGraph.historyItemHoverLabelForeground#16161e
  • scmGraph.historyItemRefColor#36b0c5
  • scmGraph.historyItemRemoteRefColor#5eb3b3
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#3b426155
  • scrollbarSlider.background#3b426130
  • scrollbarSlider.hoverBackground#3b426140
  • sideBar.background#16161e
  • sideBar.border#101014
  • sideBar.foreground#8f92bff0
  • sideBarSectionHeader.background#16161e
  • sideBarSectionHeader.border#101014
  • sideBarSectionHeader.foreground#99a1c2
  • sideBarTitle.foreground#787c99
  • statusBar.background#16161e
  • statusBar.debuggingBackground#bb9af7
  • statusBar.debuggingForeground#787c99
  • statusBar.foreground#787c99
  • tab.activeBackground#1a1b26
  • tab.activeBorder#565f89
  • tab.activeBorderTop#00000000
  • tab.activeForeground#98a2c7
  • tab.border#101014
  • tab.hoverBackground#1a1b26
  • tab.inactiveBackground#16161e
  • tab.inactiveForeground#787c99
  • tab.unfocusedInactiveForeground#565f89
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightRed#ca3d49
  • terminal.ansiRed#ff5353
  • terminal.background#16161E
  • terminalCursor.foreground#787c99
  • textLink.activeForeground#7ba5d8
  • textLink.foreground#6183bb
  • titleBar.activeBackground#16161e
  • titleBar.activeForeground#787c99
  • titleBar.border#101014
  • titleBar.inactiveBackground#16161e
  • titleBar.inactiveForeground#787c99
  • toolbar.activeBackground#3b3e5280
  • toolbar.hoverBackground#1f233580
  • tree.indentGuidesStroke#2b2b3b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.other.using.cs, keyword.other.namespace.cs, keyword.preprocessor.pragma.cs, meta.preprocessor.cs#bb9af7
entity.name.type.namespace.cs, entity.name.function.python#f7768e
keyword.type.cs, keyword.other.class.cs, keyword.other.new.cs, keyword.other.var.cs, keyword.other.await.cs#f7768e
storage.modifier.cs, storage.modifier.ts#73daca
entity.name.type.class.cs, storage.type, variable.other.object.cs, keyword.control.flow.return.cs, support.type.exception.python, support.type.primitive.ts#2ac3de
entity.name.function.cs, entity.name.variable.local.cs, variable.other.object.property.cs, variable.other.readwrite.cs#7aa2f7
entity.name.variable.field.cs, entity.name.variable.parameter.cs, entity.name.variable.property.cs#bb9af7
constant.language.boolean.true.cs, constant.language.boolean.false.cs#9d7cd8
comment.line.double-slash.cs, comment.block.cs, punctuation.definition.comment.cs, comment.block.documentation.cs#5d627aitalic
storage.type.cs#2FF76B
variable.other.constant.js, meta.definition.variable.js, meta.var-single-variable.expr.js, meta.var.expr.js, support.variable.magic.python, meta.attribute.python#bb9af7
variable.other.readwrite.js#4979FC
meta.object-literal.key.js, meta.object.member.js, meta.objectliteral.js#00FAA7
constant.language.boolean.true.js, constant.language.boolean.false.js#9d7cd8
variable.parameter.js, variable.parameter.ts, meta.parameters.js, meta.parameters.ts, meta.arrow.js#e0af68
constant.other.caps.python, variable.other.readwrite.ts, variable.other.constant.ts#4979FC
comment.line.double-slash.js, comment.block.js, comment.block.documentation.js, punctuation.definition.comment.js, punctuation.definition.comment.ts, comment.line.double-slash.ts, comment.block.ts, comment.block.documentation.ts, comment.line.double-slash.tsx, comment.block.tsx#5d627aitalic
entity.name.method.js#7aa2f7italic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7aa2f7italic
source.js constant.other.object.key.js string.unquoted.label.js#f7768eitalic
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, meta.selector.css, entity.other.attribute-name.class.css#9ece6a
entity.name.tag.css, meta.selector.css#e0af68
support.type.property-name.css, meta.property-name.css, meta.property-list.css, support.type.vendored.property-name.css#7aa2f7
constant.numeric.css, support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#2ac3de
variable.argument.css, meta.function.variable.css#c0caf5
keyword.other.unit.px.css, keyword.other.unit.percentage.css, keyword.other.unit.vh.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.ms.css#bb9af7
comment.block.css, comment.line.scss, comment.block.scss#5d627aitalic
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#7aa2f7
source.sass keyword.control#7aa2f7
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e76b82
support.class.component, support.class.component.jsx, support.class.component.tsx, entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.without-attributes.js entity.name.tag.js, meta.tag.without-attributes.tsx entity.name.tag.tsx#de5971
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute.class, text.html.basic entity.other.attribute-name, text.html.basic entity.other.attribute-name.html#cfa226e8italic
text.html.basic, meta.jsx.children.tsx, meta.jsx.children.js, meta.embedded.block.html#9AA5CE
comment.block.html#5d627aitalic
source.json meta.structure.dictionary.json support.type.property-name.json#7AA2F7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9d7cd8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9e64
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f7768e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0caf5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7aa2f7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f7768e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bb9af7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9ece6a
punctuation.definition.comment.json.comments, meta.structure.array.json.comments, meta.structure.dictionary.value.json.comments, meta.structure.dictionary.json.comments, source.json.comments#5d627aitalic
text.html.markdown, punctuation.definition.list_item.markdown, meta.paragraph.markdown#7aa2f7
text.html.markdown markup.inline.raw.markdown#bb9af7
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#565f89
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ff9e64
markup.italic#f7768eitalic
markup.bold, markup.bold string#f7768ebold
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 string#f7768ebold
markup.underline#ff9e64underline
markup.quote punctuation.definition.blockquote.markdown#565f89
markup.quoteitalic
string.other.link.title.markdown#e0af68
string.other.link.description.title.markdown#bb9af7
constant.other.reference.link.markdown#e0af68
markup.raw.block#bb9af7
markup.raw.block.fenced.markdown#1a1b2650
punctuation.definition.fenced.markdown#1a1b2650
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#c0caf5
variable.language.fenced.markdown#565f89
meta.separator#565f89bold
markup.table#c0caf5
comment.line.number-sign.python#5d627aitalic
comment#5d627aitalic
invalid, invalid.illegal#f7768e
keyword.control, keyword.control.flow, keyword.control.return, keyword.control.conditional, keyword.control.loop#5dd8d2
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.control.module#7dcfff
storage.type, storage.type.function, storage.type.class, storage.modifier#F8AA35
constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.operator, keyword.operator.assignment, keyword.operator.assignment.js, keyword.operator.assignment.ts, keyword.operator.assignment.jsx, keyword.operator.assignment.tsx, keyword.operator.assignment.html, keyword.operator.new.ts, meta.object-literal.key.ts#89DDFF
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object, meta.fstring, meta.function-call meta.function-call.arguments, meta.embedded.inline.phpx constant.other.php#4979FC
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#0db9d7
variable.function, support.function#2ff76bd5
entity.name.function, entity.name.function.js, entity.name.function.jsx, entity.name.function.ts, entity.name.function.tsx#2FF76B
meta.property.object entity.name.function, meta.property.object.js entity.name.function.js, meta.property.object.jsx entity.name.function.jsx, meta.property.object.ts entity.name.function.ts, meta.property.object.tsx entity.name.function.tsx, meta.function-call.method entity.name.function, meta.function-call.method entity.name.function.js, meta.function-call.method entity.name.function.ts, meta.function-call.method entity.name.function.jsx, meta.function-call.method entity.name.function.tsx, meta.method-call entity.name.function, meta.method-call entity.name.function.js, meta.method-call entity.name.function.ts, meta.method-call entity.name.function.jsx, meta.method-call entity.name.function.tsx, keyword.other.special-method#2FF76B
meta.class-method.js entity.name.function.js, meta.class-method.ts entity.name.function.ts, meta.property.object.js entity.name.function.js, meta.property.object.jsx entity.name.function.jsx, meta.property.object.ts entity.name.function.ts, meta.property.object.tsx entity.name.function.tsx, meta.method-call entity.name.function, meta.method-call entity.name.function.js, meta.method-call entity.name.function.ts, meta.method-call entity.name.function.jsx, meta.method-call entity.name.function.tsx, meta.function-call.method entity.name.function, meta.function-call.method entity.name.function.js, meta.function-call.method entity.name.function.ts, meta.function-call.method entity.name.function.jsx, meta.function-call.method entity.name.function.tsx, entity.name.method, entity.name.method.js, entity.name.method.ts, variable.function.constructor, keyword.other.special-method#2FF76B
meta.function-call.method entity.name.function.ts#2FF76B
entity.name.function.ts#2ff76bd5
source.cpp meta.block variable.other#f7768e
constant.numeric, constant.numeric.dec, constant.numeric.integer#4979FC
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7aa2f7
variable.parameter, meta.function.parameters#e9a744
variable.other.property, variable.other.object.property#00FAA7
support.other.variable, string.other.link#7dcfff
keyword.other.unit, keyword.other, constant.character, constant.escape#bb9af7
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#47dd9ce0
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.function-call.generic.python, variable.object.property.ts#2ac3de
support.type#0db9d7
variable.language#f7768eitalic
variable.function.constructor#2ff76bd5
markup.inserted#9ece6a
markup.deleted#f7768e
markup.changed#bb9af7
string.regexp#b4f9f8
constant.character.escape#b4f9f8
*url*, *link*, *uri*underline
entity.other.njk.delimiter.tag, variable.other.njk#4979FC
token.info-token#0db9d7
token.warn-token#e0af68
token.error-token#f7768e
token.debug-token#bb9af7