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#0f1118
  • activityBar.foreground#92b4df
  • activityBar.inactiveForeground#3e4b64
  • activityBarBadge.background#a6c4e9
  • activityBarBadge.foreground#000000
  • banner.background#344a7a
  • banner.foreground#d7d7d7
  • banner.iconForeground#ffd483
  • button.background#1e2235
  • button.foreground#ffffff
  • button.hoverBackground#2a2f4b
  • diffEditor.diagonalFill#3a4364
  • diffEditor.insertedLineBackground#0b203aff
  • diffEditor.insertedTextBackground#142a46ff
  • diffEditor.removedLineBackground#411a27ff
  • diffEditor.removedTextBackground#532233ff
  • dropdown.background#1a1d27
  • dropdown.border#4169e1
  • dropdown.foreground#ffffff
  • dropdown.listBackground#1a1d27
  • editor.background#181a23
  • editor.findMatchBackground#3b4d66a8
  • editor.findMatchBorder#d6c73d
  • editor.findMatchHighlightBackground#234475a8
  • editor.foreground#ccd4dcff
  • editor.lineHighlightBackground#243041
  • editor.lineHighlightBorder#243041
  • editor.selectionBackground#243041
  • editor.selectionHighlightBackground#243041
  • editor.symbolHighlightBackground#d7d7d7
  • editorCursor.foreground#b0d2ff
  • editorGroupHeader.tabsBackground#181a23
  • editorGutter.addedBackground#5ebe86
  • editorGutter.deletedBackground#f3495d
  • editorGutter.foldingControlForeground#d7d7d7
  • editorGutter.modifiedBackground#e9b76c
  • editorIndentGuide.activeBackground#52546e
  • editorIndentGuide.background#2d2f49
  • editorLineNumber.activeForeground#cce6ffff
  • editorLineNumber.foreground#465563
  • editorOverviewRuler.border#181a23
  • editorSuggestWidget.background#2d3146
  • editorSuggestWidget.foreground#ccd9ff
  • editorSuggestWidget.highlightForeground#ccd9ff
  • editorWidget.background#26293b
  • extensionButton.prominentBackground#3c4870
  • extensionIcon.starForeground#f1c83e
  • focusBorder#14161f
  • gitDecoration.ignoredResourceForeground#3e4563
  • gitDecoration.modifiedResourceForeground#e9b76c
  • gitDecoration.untrackedResourceForeground#5ebe86
  • input.background#1a1d27
  • input.foreground#ffffff
  • input.placeholderForeground#7e8aa5
  • inputValidation.errorBackground#963340
  • inputValidation.errorBorder#3d1a1f
  • inputValidation.errorForeground#dadada
  • list.activeSelectionBackground#181a23
  • list.activeSelectionForeground#dee6fc
  • list.dropBackground#2e3247
  • list.errorForeground#d67272
  • list.filterMatchBackground#263d83
  • list.highlightForeground#459bd4
  • list.hoverBackground#181a23
  • list.hoverForeground#dee6fc
  • list.inactiveSelectionBackground#181a23
  • list.inactiveSelectionForeground#dee6fc
  • listFilterWidget.background#1a1d27
  • listFilterWidget.noMatchesOutline#d67272
  • listFilterWidget.outline#4169e1
  • menu.background#0f1118
  • menu.foreground#7e8aa5
  • menu.separatorBackground#2e3247
  • notificationCenter.border#1f2835
  • notificationCenterHeader.background#23263a
  • notificationToast.border#202835
  • panel.border#465563
  • panelTitle.activeForeground#d7d7d7
  • panelTitle.inactiveForeground#8c99a5
  • peekView.border#4d5c6e
  • peekViewEditor.background#202635
  • peekViewEditor.matchHighlightBackground#4f498b
  • peekViewEditorGutter.background#202635
  • peekViewResult.background#181a23
  • peekViewResult.lineForeground#d7d7d7
  • peekViewResult.matchHighlightBackground#4f498b
  • peekViewResult.selectionBackground#495b86
  • peekViewTitle.background#363c5e
  • peekViewTitleDescription.foreground#cccccc
  • quickInputList.focusForeground#d7d7d7
  • quickInputTitle.background#2e3247
  • scrollbar.shadow#14161f
  • scrollbarSlider.activeBackground#586386
  • scrollbarSlider.background#3a425c
  • scrollbarSlider.hoverBackground#4b5472
  • selection.background#5e7aa1a8
  • settings.checkboxBorder#6b707a
  • settings.dropdownBackground#1a1d27
  • settings.dropdownBorder#131822
  • settings.focusedRowBackground#1a1d27
  • settings.rowHoverBackground#2c3144
  • sideBar.background#14161f
  • sideBar.foreground#7e8aa5
  • sideBarSectionHeader.background#14161f
  • sideBarTitle.foreground#7e8aa5
  • statusBar.background#0f1118
  • statusBar.foreground#5e667a
  • statusBar.noFolderBackground#14161f
  • statusBar.noFolderForeground#5e667a
  • tab.activeBackground#181a23
  • tab.activeBorder#f9ee98
  • tab.border#181a23
  • tab.inactiveBackground#181a23
  • tab.inactiveForeground#95a2c0
  • textLink.activeForeground#f9ee98
  • textLink.foreground#f9ee98
  • titleBar.activeBackground#0f1118
  • titleBar.activeForeground#7e8aa5
  • titleBar.inactiveBackground#0f1118
  • titleBar.inactiveForeground#5c5c72
  • tree.indentGuidesStroke#353756
  • welcomePage.background#1c1f2c
  • welcomePage.progress.background#3a3e52
  • welcomePage.progress.foreground#f9ee98
  • welcomePage.tileBackground#23283d
  • welcomePage.tileHoverBackground#2b2f44
  • window.activeBorder#14161f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#515e6affitalic
constant.other.color#ffffff
storage, storage.type, storage.modifier#f9ee98italic
variable, string constant.other.placeholder, meta.delimiter.comma.js#b3cae8ff
meta.block variable.other#76c5a4
support.other.variable, string.other.link#b3cae8ff
support.type#b3cae8ff
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#fb7da7
keyword#fb7da7
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#76c5a4
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other#c5a0f0
variable.parameter#d7d7d7
keyword.control, constant.other.color, punctuation, meta.tag, 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#c8a15dff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#fb7da7
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#a6d885italic
string.regexp#89ddff
constant.character.escape#89ddff
*url*, *link*, *uri*underline
invalid, invalid.illegal#ff5370
entity.other.attribute-name#4ac2d4italic
variable.language#fb7da7italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.jsx#596369
JSXNested, text.html.derivative#d7d7d7
entity.other.attribute-name.html#f9ee98
source.sass keyword.control, entity.other.attribute-name.id.css#f29e74
entity.other.attribute-name.class#ffcb6b
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#5ccfe6
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, entity.name.tag.css#d7d7d7
meta.identifier.css, meta.property-values.css, source.css.scss, support.constant.property-value.css, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name.css#a6d885
constant.length.units.css, keyword.other.unit.px.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css#fb7da7
support.function.css, support.function.transform.css, support.function.gradient.css, support.function.url.css, meta.property-values.css, source.css.scss#4ac2d4
meta.preprocessor.at-rule, keyword.control.at-rule#fb7da7
entity.other.keyframe-offset.percentage.css#d7d7d7
keyword.control.flow.js, keyword.control.module.js, keyword.operator.typeof.js, keyword.operator.logical.js, keyword.control.conditional.js, keyword.operator.comparison.js, keyword.operator.relational.js, keyword.operator.assignment.js, storage.type.function.arrow.js#f29e74
string.unquoted.js#e6bc74
meta.property.object.js, meta.property.object.jsx, meta.property.member.js, meta.property.member.jsx, meta.property.member.ts, meta.property.member.tsx, variable.other.object.ts, variable.other.object.tsx, variable.other.constant.ts, variable.other.constant.tsx#b3cae8ff
variable.other.constant.js, meta.function.js, source.js#ac92e9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5370
entity.name.method.js#82aaffitalic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82aaffitalic
source.json meta.structure.dictionary.json support.type.property-name.json#d7d7d7
entity.name.section.markdown#f9ee98
string.other.link.title.markdown#82aaff
string.other.link.description.title.markdown#c792ea