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#483D5D
  • activityBar.background#2E2A3A
  • activityBar.foreground#BD93F9
  • activityBar.inactiveForeground#655E7F
  • activityBarBadge.background#BD93F9
  • activityBarBadge.foreground#2B2836
  • badge.background#BD93F9
  • badge.foreground#2B2836
  • breadcrumb.activeSelectionForeground#DCE7FD
  • breadcrumb.background#3D3B4A
  • breadcrumb.focusForeground#DCE7FD
  • breadcrumb.foreground#655E7F
  • button.background#BD93F9
  • button.foreground#2B2836
  • button.secondaryBackground#2E2A3A
  • button.secondaryForeground#DCE7FD
  • dropdown.background#3D3B4A
  • dropdown.foreground#DCE7FD
  • editor.background#2B2836
  • editor.foreground#DCE7FD
  • editor.lineHighlightBackground#35323F
  • editor.lineHighlightBorder#35323F
  • editor.selectionBackground#35323F
  • editor.snippetFinalTabstopHighlightBackground#2B2836
  • editor.snippetTabstopHighlightBackground#2B2836
  • editor.snippetTabstopHighlightBorder#655E7F
  • editorBracketHighlight.foreground1#DCE7FD
  • editorCodeLens.foreground#655E7F
  • editorCursor.foreground#BD93F9
  • editorGroupHeader.tabsBackground#2E2A3A
  • editorHoverWidget.background#2E2A3A
  • editorHoverWidget.border#655E7F
  • editorIndentGuide.background1#bd93f91a
  • editorLineNumber.foreground#655E7F
  • editorLink.activeForeground#BD93F9
  • editorRuler.foreground#464258
  • editorSuggestWidget.background#2E2A3A
  • editorSuggestWidget.focusHighlightForeground#BD93F9
  • editorSuggestWidget.foreground#DCE7FD
  • editorSuggestWidget.highlightForeground#BD93F9
  • editorSuggestWidget.selectedBackground#2E2A3A
  • editorSuggestWidget.selectedIconForeground#BD93F9
  • editorWhitespace.foreground#464258
  • editorWidget.background#2E2A3A
  • focusBorder#BD93F9
  • foreground#DCE7FD
  • gitDecoration.ignoredResourceForeground#655E7F
  • icon.foreground#BD93F9
  • input.background#3D3B4A
  • input.foreground#DCE7FD
  • input.placeholderForeground#655E7F
  • keybindingLabel.background#2B2836
  • keybindingLabel.foreground#DCE7FD
  • list.activeSelectionBackground#35323F
  • list.activeSelectionForeground#DCE7FD
  • list.dropBackground#35323F
  • list.focusBackground#35323F
  • list.highlightForeground#BD93F9
  • list.hoverBackground#35323F
  • list.inactiveSelectionBackground#606172
  • menu.background#2E2A3A
  • menu.foreground#DCE7FD
  • menu.selectionBackground#35323F
  • menu.separatorBackground#483D5D
  • menubar.selectionBackground#35323F
  • notificationLink.foreground#BD93F9
  • notifications.background#2E2A3A
  • panel.background#3D3B4A
  • panelTitle.activeForeground#DCE7FD
  • panelTitle.inactiveForeground#655E7F
  • peekView.border#35323F
  • peekViewEditor.background#2B2836
  • peekViewResult.fileForeground#DCE7FD
  • peekViewResult.lineForeground#DCE7FD
  • peekViewResult.selectionBackground#35323F
  • peekViewResult.selectionForeground#DCE7FD
  • peekViewTitleDescription.foreground#655E7F
  • peekViewTitleLabel.foreground#DCE7FD
  • pickerGroup.border#2E2A3A
  • pickerGroup.foreground#BD93F9
  • progressBar.background#BD93F9
  • scrollbarSlider.activeBackground#606172
  • scrollbarSlider.background#483D5D
  • settings.checkboxForeground#DCE7FD
  • settings.dropdownForeground#DCE7FD
  • settings.headerForeground#DCE7FD
  • settings.numberInputForeground#DCE7FD
  • settings.textInputForeground#DCE7FD
  • sideBar.background#3D3B4A
  • sideBar.foreground#DCE7FD
  • sideBarSectionHeader.background#2B2836
  • sideBarTitle.background#2E2A3A
  • sideBarTitle.foreground#DCE7FD
  • statusBar.background#483D5D
  • statusBar.foreground#DCE7FD
  • statusBar.noFolderBackground#35323F
  • statusBar.noFolderForeground#DCE7FD
  • statusBarItem.remoteForeground#2B2836
  • tab.activeBackground#483D5D
  • tab.activeForeground#BD93F9
  • tab.inactiveBackground#3D3B4A
  • tab.inactiveForeground#DCE7FD
  • terminal.background#2B2836
  • terminal.border#483D5D
  • terminal.foreground#DCE7FD
  • terminalCursor.background#2B2836
  • terminalCursor.foreground#BD93F9
  • textLink.foreground#BD93F9
  • titleBar.activeBackground#2E2A3A
  • titleBar.activeForeground#DCE7FD
  • titleBar.inactiveForeground#655E7F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#DCE7FD
comment#655E7F
meta.tag.metadata.doctype, meta.tag.sgml.doctype.html, meta.tag.sgml.html#655E7F
punctuation.definition.tag, punctuation.separator#DCE7FD
entity.name.type.namespace, storage.modifier.import#6A6872
string#93B4FF
string.quoted.double.html, string.quoted.single.html#93B4FF
meta.property-list, support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, variable.other.property#93B4FF
constant.language, variable.other.constant.php#93B4FF
constant.language.symbol#93B4FF
entity.other.attribute-name.html#BD93F9
constant.language.boolean#FF8ADB
constant.numeric#FF8ADB
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.class, keyword.operator.comparison, keyword.operator.logical, keyword.operator.relational, keyword.other, punctuation.separator.dictionary.key-value#F3E4A2
meta.document.yaml, meta.tag, storage.type.tag#F3E4A2
entity.name.tag.yaml, keyword.control.at-rule, meta.at-rule, support.constant.media.css#F3E4A2
variable.other.object#DCE7FD
meta.selector, source.css entity.name.tag, source.css entity.other.attribute-name#BD93F9
entity.name.function, support.function#BD93F9
constant.language.null, constant.language.undefined, keyword, markup.inline.raw, markup.raw, storage#BD93F9
string.regexp#84FBA2
constant.numeric.yaml-version, entity.other.document, keyword.other.directive, keyword.other.important, markup.heading, meta.directives, punctuation.definition.alias, punctuation.definition.anchor, punctuation.section.embedded, variable.other.alias, variable.other.anchor#FF8ADBbold
markup.boldbold
markup.italicitalic
keyword.other.unit#DCE7FD
constant.other.color#DCE7FD
source.js constant.language, source.js constant.language.null, source.js constant.language.undefined, source.js keyword, source.js storage#F3E4A2
source.js entity.name.type.class, source.js support.class#93B4FF
source.css support#DCE7FD
source.css.scss string#DCE7FD
source.css.scss constant.language, source.css.scss constant.language.null, source.css.scss constant.language.undefined, source.css.scss keyword, source.css.scss storage#F3E4A2
source.css.scss variable, source.css.scss variable.other.object#84FBA2
source.php constant.language.null, source.php constant.language.undefined, source.php keyword, source.php storage, source.php variable.language#84FBA2
source.php constant.language, source.php variable.other.constant.php#FF8ADB
source.php punctuation.section.embedded, text.html.php punctuation.section.embedded#7B94A5
source.yaml string, text.yaml string#DCE7FD
source.yaml string.unquoted.block, text.yaml string.unquoted.block#93B4FF
text.yaml entity.name.tag.yaml#BD93F9
text.yaml constant.numeric.yaml-version, text.yaml entity.other.document, text.yaml keyword.other.directive, text.yaml keyword.other.important, text.yaml markup.heading, text.yaml meta.directives, text.yaml punctuation.definition.alias, text.yaml punctuation.definition.anchor, text.yaml punctuation.section.embedded, text.yaml variable.other.alias, text.yaml variable.other.anchor#84FBA2
text.html.markdown markup.heading, text.html.markdown punctuation.definition.heading#DCE7FD
markup.heading.markdown#BD93F9
text.html.markdown markup.inline.raw, text.html.markdown markup.raw#84FBA2
text.html.markdown punctuation.definition.list#93B4FF
markup.underline.link#93B4FF
text.html.markdown constant.other.reference.link#F3E4A2
invalid#F36A66
Skeletor Syntax by dieghernan - VS Code Theme