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#0e0c2ce5
  • activityBar.border#79fac8cd
  • activityBar.foreground#00BEFF
  • activityBarBadge.background#EB00FF
  • activityBarBadge.foreground#1D1158
  • badge.background#1D115830
  • badge.foreground#00C446
  • breadcrumb.activeSelectionForeground#00C446
  • breadcrumb.background#1D1158
  • breadcrumb.focusForeground#00BEFF
  • breadcrumb.foreground#01FF5B
  • breadcrumbPicker.background#1D1158
  • button.background#00C44650
  • contrastBorder#00C44640
  • debugToolBar.background#1D1158
  • diffEditor.insertedTextBackground#FF255315
  • diffEditor.removedTextBackground#C102FF20
  • dropdown.background#1D1158
  • dropdown.border#00F0FF10
  • editor.background#31254b
  • editor.findMatchBackground#1D1158
  • editor.findMatchBorder#00C446
  • editor.findMatchHighlightBackground#00C44693
  • editor.findMatchHighlightBorder#00F0FF30
  • editor.foreground#00BEFF
  • editor.lineHighlightBackground#1D115850
  • editor.selectionBackground#EB00FF30
  • editor.selectionHighlightBackground#00C4466b
  • editor.selectionHighlightBorder#EB00FFf0
  • editorBracketMatch.background#1D1158
  • editorBracketMatch.border#729EFF7f
  • editorCursor.foreground#729EFF
  • editorError.foreground#ff0202ca
  • editorGroup.border#1D115830
  • editorGroupHeader.tabsBackground#1D1158
  • editorGutter.addedBackground#FF255360
  • editorGutter.deletedBackground#C102FF60
  • editorGutter.modifiedBackground#EB00FF60
  • editorHoverWidget.background#1D1158
  • editorHoverWidget.border#00F0FF10
  • editorIndentGuide.activeBackground#1200C3
  • editorIndentGuide.background#1200C370
  • editorInfo.foreground#EB00FF70
  • editorLineNumber.activeForeground#EB00FF
  • editorLineNumber.foreground#00C446c0
  • editorLink.activeForeground#00BEFF
  • editorMarkerNavigation.background#00BEFF05
  • editorOverviewRuler.border#1D1158
  • editorOverviewRuler.errorForeground#ff020259
  • editorOverviewRuler.findMatchForeground#00C446
  • editorOverviewRuler.infoForeground#EB00FF40
  • editorOverviewRuler.warningForeground#729fffc7
  • editorRuler.foreground#1200C3
  • editorSuggestWidget.background#1D1158
  • editorSuggestWidget.border#00F0FF10
  • editorSuggestWidget.foreground#00BEFF
  • editorSuggestWidget.highlightForeground#729EFF
  • editorSuggestWidget.selectedBackground#00C44620
  • editorWarning.foreground#ff0037
  • editorWhitespace.foreground#00BEFF40
  • editorWidget.background#1D1158
  • editorWidget.border#729EFF
  • editorWidget.resizeBorder#00C446
  • extensionButton.prominentBackground#FF255390
  • extensionButton.prominentHoverBackground#C102FF
  • focusBorder#00F0FF00
  • gitDecoration.conflictingResourceForeground#729EFF
  • gitDecoration.deletedResourceForeground#C102FF
  • gitDecoration.ignoredResourceForeground#00C446
  • gitDecoration.modifiedResourceForeground#01FF5B
  • gitDecoration.untrackedResourceForeground#EB00FF
  • input.background#1000AF
  • input.border#00F0FF10
  • input.foreground#00BEFF
  • input.placeholderForeground#00BEFF60
  • inputOption.activeBackground#00BEFF30
  • inputOption.activeBorder#00BEFF30
  • inputValidation.errorBorder#ff0202b7
  • inputValidation.infoBorder#EB00FF50
  • inputValidation.warningBorder#729EFF50
  • list.activeSelectionBackground#1D1158
  • list.activeSelectionForeground#00C446
  • list.focusBackground#1000AF
  • list.focusForeground#EB00FF
  • list.highlightForeground#00C446
  • list.hoverBackground#1200C3
  • list.hoverForeground#00F0FF
  • list.inactiveSelectionBackground#1D115830
  • list.inactiveSelectionForeground#00C446
  • list.warningForeground#729EFF
  • listFilterWidget.background#1D115830
  • listFilterWidget.noMatchesOutline#1D115830
  • listFilterWidget.outline#1D115830
  • menu.background#291a71f8
  • menu.border#00C44650
  • menu.foreground#00BEFF
  • menu.selectionBackground#1000AF
  • menu.selectionBorder#1D115830
  • menu.selectionForeground#00BEFF
  • menu.separatorBackground#00BEFF
  • menubar.selectionBackground#1000AF
  • menubar.selectionBorder#00C44650
  • menubar.selectionForeground#00BEFF
  • minimap.background#1D1158
  • minimapGutter.addedBackground#C102FF
  • minimapGutter.deletedBackground#729EFF
  • minimapGutter.modifiedBackground#FF2553
  • minimapSlider.activeBackground#FF2553b0
  • minimapSlider.background#FF255380
  • minimapSlider.hoverBackground#FF2553a0
  • notificationLink.foreground#00C446
  • notifications.background#1D1158
  • notifications.foreground#00BEFF
  • panel.background#1D1158
  • panel.border#1D115860
  • panelTitle.activeBorder#00C446
  • panelTitle.activeForeground#00F0FF
  • panelTitle.inactiveForeground#00BEFF
  • peekView.border#1D115830
  • peekViewEditor.background#00BEFF05
  • peekViewEditor.matchHighlightBackground#00C44650
  • peekViewEditorGutter.background#00BEFF05
  • peekViewResult.background#00BEFF05
  • peekViewResult.matchHighlightBackground#00C44650
  • peekViewResult.selectionBackground#00C44670
  • peekViewTitle.background#00BEFF05
  • peekViewTitleDescription.foreground#00BEFF60
  • pickerGroup.foreground#00C446
  • progressBar.background#00C446
  • scrollbar.shadow#1D115800
  • scrollbarSlider.activeBackground#00C446cc
  • scrollbarSlider.background#00C446bb
  • scrollbarSlider.hoverBackground#00C446ee
  • selection.background#00C446
  • settings.checkboxBackground#1D1158
  • settings.checkboxForeground#00BEFF
  • settings.dropdownBackground#1D1158
  • settings.dropdownForeground#00BEFF
  • settings.headerForeground#00C446
  • settings.modifiedItemIndicator#00C446
  • settings.numberInputBackground#3c3163
  • settings.numberInputForeground#00BEFF
  • settings.textInputBackground#190d54
  • settings.textInputForeground#00BEFF
  • sideBar.background#201949
  • sideBar.border#00C44650
  • sideBar.foreground#e27bec
  • sideBarSectionHeader.background#1D1158
  • sideBarSectionHeader.border#1D115860
  • sideBarSectionHeader.foreground#f485fe
  • sideBarTitle.foreground#00BEFF
  • statusBar.background#021239
  • statusBar.border#1D115860
  • statusBar.debuggingBackground#729EFF
  • statusBar.debuggingForeground#00F0FF
  • statusBar.foreground#008EB0
  • statusBar.noFolderBackground#1D1158
  • statusBarItem.hoverBackground#00C44620
  • statusBarItem.remoteBackground#00C446
  • statusBarItem.remoteForeground#1D1158
  • tab.activeBackground#00C44650
  • tab.activeBorder#00C446
  • tab.activeForeground#00F0FF
  • tab.activeModifiedBorder#00C446
  • tab.border#1D1158
  • tab.inactiveBackground#00C44620
  • tab.inactiveForeground#00BEFFaf
  • tab.unfocusedActiveBackground#00C44640
  • tab.unfocusedActiveBorder#00C446
  • tab.unfocusedActiveForeground#00BEFF
  • tab.unfocusedInactiveBackground#00C44610
  • tab.unfocusedInactiveForeground#00BEFF7f
  • terminal.ansiBlack#1D1158
  • terminal.ansiBlue#EB00FF
  • terminal.ansiBrightBlack#00C446
  • terminal.ansiBrightBlue#EB00FF
  • terminal.ansiBrightCyan#FFFD18
  • terminal.ansiBrightGreen#3eff7e
  • terminal.ansiBrightMagenta#729EFF
  • terminal.ansiBrightRed#C102FF
  • terminal.ansiBrightWhite#00F0FF
  • terminal.ansiBrightYellow#729EFF
  • terminal.ansiCyan#FFFD18
  • terminal.ansiGreen#3eff7e
  • terminal.ansiMagenta#729EFF
  • terminal.ansiRed#C102FF
  • terminal.ansiWhite#00F0FF
  • terminal.ansiYellow#729EFF
  • terminalCursor.background#1D1158
  • terminalCursor.foreground#729EFF
  • textLink.activeForeground#00BEFF
  • textLink.foreground#00C446
  • titleBar.activeBackground#1D1158
  • titleBar.activeForeground#00BEFF
  • titleBar.border#1D115860
  • titleBar.inactiveBackground#1D1158
  • titleBar.inactiveForeground#00C446
  • tree.indentGuidesStroke#1200C3
  • widget.shadow#1D115830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.modifier#729EFF
variable.scss#c5d1ff
storage.type.function.arrow#ff2ddc
variable, string constant.other.placeholder, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#FF2553
constant.other.php#729EFF
constant.other.color#00F0FF
invalid, invalid.illegal#C102FF
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#b4e114
entity.name.tag.reference.scss#2aeaff
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#01FF5B
entity.name.class.js#13c5a2
variable.language.prototype#98d4f5
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#00BEFF
punctuation.definition, string.quoted.single.scss#ffa0f2
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#00BEFF
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#729EFF
variable.other.object.js, string.other.link.title.markdown#fa5889
variable.other.readwrite.js#1ABC9C
variable.other.property.js#08a9ff
storage.type.js#ff6f9b
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#EB00FF
meta.method-call.with-arguments.js#0f53ff
entity.name.function#00F7FF
string, string.quoted.double.html, string.quoted.double.json, string.quoted.double#ffd587
string.unquoted#ab45ff
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#ff00dd
support.other.variable, string.other.link, markup.table#00BEFF
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#729EFF
variable.parameter.function.language.special, variable.parameter#C102FF
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#FF2553
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, entity.other.attribute-name.html#729EFF
support.type#B2CCD6
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#01FF5B
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#C102FF
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#b843f8italic
entity.other.attribute-name, support.function#ff6b1b
support.function.misc.scss, support.function.misc.css#ffc446bold
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, support.constant, entity.other.attribute-name.html, storage.type.function.js, meta.object-literal.key#aa00ff
string.quoted.single.js#FFD587
comment.block.js#546868
keyword.control.conditional.js#EB00FF
source.scss keyword.control#729EFF
markup.inserted#FF2553
markup.deleted#C102FF
markup.changed#729EFF
string.regexp#FFFD18
constant.character.escape#e2e2e2
*url*, *link*, *uri*underline
source.js, constant.other.object.key, string.unquoted.label.js#00BEFFitalic
support.type.property-name.json#00BEFF
text.html.markdown, punctuation.definition.list_item.markdown#00BEFF
text.html.markdown markup.inline.raw.markdown#729EFF
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#00C44650
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#01FF5Bbold
markup.underline#EB00FFunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#00C44650
markup.quoteitalic
string.other.link.description.title.markdown#729EFF
constant.other.reference.link.markdown#729EFF
markup.raw.block#729EFF
punctuation.definition.raw.markdown, punctuation.definition.markdown#FFFD18
variable.language.fenced.markdown#00C446
meta.separator#A7A8AFbold
token.info-token#00C446
token.warn-token#437fff
token.error-token#ff0000
token.debug-token#FFFD18
LifeInSpace by Turquoise - VS Code Theme