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#1A2320
  • activityBar.border#1A232060
  • activityBar.foreground#D1D7DB
  • activityBarBadge.background#D8E5E8
  • activityBarBadge.foreground#1A2320
  • badge.background#1A232030
  • badge.foreground#5F8586
  • breadcrumb.activeSelectionForeground#5F8586
  • breadcrumb.background#1A2320
  • breadcrumb.focusForeground#D1D7DB
  • breadcrumb.foreground#53A0E5
  • breadcrumbPicker.background#1A2320
  • button.background#5F858650
  • contrastBorder#5F858640
  • debugToolBar.background#1A2320
  • diffEditor.insertedTextBackground#26900715
  • diffEditor.removedTextBackground#E6A20020
  • dropdown.background#1A2320
  • dropdown.border#D8E5E810
  • editor.background#18201e
  • editor.findMatchBackground#1A2320
  • editor.findMatchBorder#5F8586
  • editor.findMatchHighlightBackground#5F858693
  • editor.findMatchHighlightBorder#D8E5E830
  • editor.foreground#D1D7DB
  • editor.lineHighlightBackground#1A232050
  • editor.selectionBackground#D8E5E830
  • editor.selectionHighlightBackground#5F85866b
  • editor.selectionHighlightBorder#D8E5E8f0
  • editorBracketMatch.background#1A2320
  • editorBracketMatch.border#2D56FF7f
  • editorCursor.foreground#2D56FF
  • editorError.foreground#E6A20070
  • editorGroup.border#1A232030
  • editorGroupHeader.tabsBackground#1A2320
  • editorGutter.addedBackground#26900760
  • editorGutter.deletedBackground#E6A20060
  • editorGutter.modifiedBackground#D8E5E860
  • editorHoverWidget.background#1A2320
  • editorHoverWidget.border#D8E5E810
  • editorIndentGuide.activeBackground#006031
  • editorIndentGuide.background#00603170
  • editorInfo.foreground#D8E5E870
  • editorLineNumber.activeForeground#D8E5E8
  • editorLineNumber.foreground#5F8586c0
  • editorLink.activeForeground#D1D7DB
  • editorMarkerNavigation.background#D1D7DB05
  • editorOverviewRuler.border#1A2320
  • editorOverviewRuler.errorForeground#E6A20040
  • editorOverviewRuler.findMatchForeground#5f858600
  • editorOverviewRuler.infoForeground#D8E5E840
  • editorOverviewRuler.warningForeground#2D56FF70
  • editorRuler.foreground#006031
  • editorSuggestWidget.background#1A2320
  • editorSuggestWidget.border#D8E5E810
  • editorSuggestWidget.foreground#D1D7DB
  • editorSuggestWidget.highlightForeground#2D56FF
  • editorSuggestWidget.selectedBackground#5F858620
  • editorWarning.foreground#269007
  • editorWhitespace.foreground#D1D7DB40
  • editorWidget.background#1A2320
  • editorWidget.border#2D56FF
  • editorWidget.resizeBorder#5F8586
  • extensionButton.prominentBackground#26900790
  • extensionButton.prominentHoverBackground#E6A200
  • focusBorder#D8E5E800
  • gitDecoration.conflictingResourceForeground#2D56FF
  • gitDecoration.deletedResourceForeground#E6A200
  • gitDecoration.ignoredResourceForeground#5F8586
  • gitDecoration.modifiedResourceForeground#53A0E5
  • gitDecoration.untrackedResourceForeground#D8E5E8
  • input.background#004212
  • input.border#D8E5E810
  • input.foreground#D1D7DB
  • input.placeholderForeground#D1D7DB60
  • inputOption.activeBackground#D1D7DB30
  • inputOption.activeBorder#D1D7DB30
  • inputValidation.errorBorder#E6A20050
  • inputValidation.infoBorder#D8E5E850
  • inputValidation.warningBorder#2D56FF50
  • list.activeSelectionBackground#1A2320
  • list.activeSelectionForeground#5F8586
  • list.focusBackground#004212
  • list.focusForeground#D8E5E8
  • list.highlightForeground#5F8586
  • list.hoverBackground#006031
  • list.hoverForeground#D8E5E8
  • list.inactiveSelectionBackground#1A232030
  • list.inactiveSelectionForeground#5F8586
  • list.warningForeground#2D56FF
  • listFilterWidget.background#1A232030
  • listFilterWidget.noMatchesOutline#1A232030
  • listFilterWidget.outline#1A232030
  • menu.background#1A2320f8
  • menu.border#5F858650
  • menu.foreground#D1D7DB
  • menu.selectionBackground#004212
  • menu.selectionBorder#1A232030
  • menu.selectionForeground#D1D7DB
  • menu.separatorBackground#D1D7DB
  • menubar.selectionBackground#004212
  • menubar.selectionBorder#5F858650
  • menubar.selectionForeground#D1D7DB
  • minimap.background#1A2320
  • minimapGutter.addedBackground#E6A200
  • minimapGutter.deletedBackground#2D56FF
  • minimapGutter.modifiedBackground#269007
  • minimapSlider.activeBackground#269007b0
  • minimapSlider.background#26900780
  • minimapSlider.hoverBackground#269007a0
  • notificationLink.foreground#5F8586
  • notifications.background#1A2320
  • notifications.foreground#D1D7DB
  • panel.background#1A2320
  • panel.border#1A232060
  • panelTitle.activeBorder#5F8586
  • panelTitle.activeForeground#D8E5E8
  • panelTitle.inactiveForeground#D1D7DB
  • peekView.border#1A232030
  • peekViewEditor.background#D1D7DB05
  • peekViewEditor.matchHighlightBackground#5F858650
  • peekViewEditorGutter.background#D1D7DB05
  • peekViewResult.background#D1D7DB05
  • peekViewResult.matchHighlightBackground#5F858650
  • peekViewResult.selectionBackground#5F858670
  • peekViewTitle.background#D1D7DB05
  • peekViewTitleDescription.foreground#D1D7DB60
  • pickerGroup.foreground#5F8586
  • progressBar.background#5F8586
  • scrollbar.shadow#1A232000
  • scrollbarSlider.activeBackground#5F8586cc
  • scrollbarSlider.background#5F8586bb
  • scrollbarSlider.hoverBackground#5F8586ee
  • selection.background#5F8586
  • settings.checkboxBackground#1A2320
  • settings.checkboxForeground#D1D7DB
  • settings.dropdownBackground#1A2320
  • settings.dropdownForeground#D1D7DB
  • settings.headerForeground#5F8586
  • settings.modifiedItemIndicator#5F8586
  • settings.numberInputBackground#1A2320
  • settings.numberInputForeground#D1D7DB
  • settings.textInputBackground#1A2320
  • settings.textInputForeground#D1D7DB
  • sideBar.background#1A2320
  • sideBar.border#5F858650
  • sideBar.foreground#D8E5E8
  • sideBarSectionHeader.background#1A2320
  • sideBarSectionHeader.border#1A232060
  • sideBarSectionHeader.foreground#D8E5E8
  • sideBarTitle.foreground#D1D7DB
  • statusBar.background#9CBBB3ef
  • statusBar.border#1A232060
  • statusBar.debuggingBackground#2D56FF
  • statusBar.debuggingForeground#D8E5E8
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#1A2320
  • statusBarItem.hoverBackground#5F858620
  • statusBarItem.remoteBackground#5F8586
  • statusBarItem.remoteForeground#1A2320
  • tab.activeBackground#416f7071
  • tab.activeBorder#5F8586
  • tab.activeForeground#D8E5E8
  • tab.activeModifiedBorder#5F8586
  • tab.border#1A2320
  • tab.inactiveBackground#3c545520
  • tab.inactiveForeground#D1D7DBaf
  • tab.unfocusedActiveBackground#5F858640
  • tab.unfocusedActiveBorder#5F8586
  • tab.unfocusedActiveForeground#D1D7DB
  • tab.unfocusedInactiveBackground#5F858610
  • tab.unfocusedInactiveForeground#D1D7DB7f
  • terminal.ansiBlack#1A2320
  • terminal.ansiBlue#D8E5E8
  • terminal.ansiBrightBlack#5F8586
  • terminal.ansiBrightBlue#D8E5E8
  • terminal.ansiBrightCyan#69FFFB
  • terminal.ansiBrightGreen#269007
  • terminal.ansiBrightMagenta#2D56FF
  • terminal.ansiBrightRed#E6A200
  • terminal.ansiBrightWhite#D8E5E8
  • terminal.ansiBrightYellow#2D56FF
  • terminal.ansiCyan#69FFFB
  • terminal.ansiGreen#269007
  • terminal.ansiMagenta#2D56FF
  • terminal.ansiRed#E6A200
  • terminal.ansiWhite#D8E5E8
  • terminal.ansiYellow#2D56FF
  • terminalCursor.background#1A2320
  • terminalCursor.foreground#2D56FF
  • textLink.activeForeground#D1D7DB
  • textLink.foreground#5F8586
  • titleBar.activeBackground#1A2320
  • titleBar.activeForeground#D1D7DB
  • titleBar.border#1A232060
  • titleBar.inactiveBackground#1A2320
  • titleBar.inactiveForeground#5F8586
  • tree.indentGuidesStroke#006031
  • widget.shadow#1A232030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#ceec9c
variable, string constant.other.placeholder, entity.name.function, 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#269007
constant.other.php#2D56FF
constant.other.color#D8E5E8
invalid, invalid.illegal#E6A200
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#A7A8AF
punctuation#f4bcff
keyword.control#30e2c5
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#53A0E5
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#D1D7DB
punctuation.definition, string.quoted.single.scss#A7A8AF
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
meta.tag.sgml, markup.deleted.git_gutter#D1D7DB
entity.name.tag#34e1ff
entity.name.tag.html#34e1ff
variable.parameter.js, variable.parameter.keyframe-list.css#8fa5ff
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.property.js#53A0E5
variable.other.readwrite.js#81e0b9
string, 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 entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#D8E5E8
variable.other.constant.js#75ff70
variable.other.object.property.js#bea6ff
entity.name.function#f88603
string.quoted.double.html#81ec9cec
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#69FFFB
support.other.variable, string.other.link, markup.table#D1D7DB
constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#ffffff
constant.language#ffc117
constant.numeric#f8e802
variable.parameter.function.language.special, variable.parameter#E6A200
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#269007
keyword.other.unit#fda048
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#2D56FF
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#53A0E5
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E6A200
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#D8E5E8italic
entity.other.attribute-name, support.function#3ccfc3
entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.name.tag.css, string.quoted.single.js, meta.object-literal.key#D1D7DB
keyword.control.conditional.js#00c421
support.constant#c2e7bf
entity.other.attribute-name.class#4bcf7e
storage.type.function.js#00cac0
entity.other.attribute-name.html#94d1b5
source.scss keyword.control#2D56FF
markup.inserted#269007
markup.deleted#E6A200
markup.changed#2D56FF
string.regexp#69FFFB
constant.character.escape#69FFFB
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#D1D7DBitalic
support.type.property-name.json#D1D7DB
text.html.markdown, punctuation.definition.list_item.markdown#D1D7DB
text.html.markdown markup.inline.raw.markdown#2D56FF
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#5F858650
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#53A0E5bold
markup.underline#D8E5E8underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#5F858650
markup.quoteitalic
string.other.link.description.title.markdown#2D56FF
constant.other.reference.link.markdown#2D56FF
markup.raw.block#2D56FF
punctuation.definition.raw.markdown, punctuation.definition.markdown#69FFFB
variable.language.fenced.markdown#5F8586
meta.separator#A7A8AFbold
token.info-token#5F8586
token.warn-token#2D56FF
token.error-token#FF293B
token.debug-token#69FFFB
Lumiere Flip by Martin Mengo - VS Code Theme