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#272821
  • activityBar.border#2F3028
  • activityBar.dropBackground#272821cc
  • activityBar.foreground#fdfff1
  • activityBarBadge.background#D6C92B
  • activityBarBadge.foreground#000000e6
  • badge.background#D9CC39
  • badge.foreground#000000e6
  • button.background#D6C92B
  • button.foreground#000000e6
  • button.hoverBackground#D9CC39
  • debugExceptionWidget.background#DD0753
  • debugExceptionWidget.border#DD0753
  • diffEditor.insertedTextBackground#88BD1B1a
  • diffEditor.removedTextBackground#DD07531a
  • dropdown.background#23241E
  • dropdown.border#2B2C24
  • dropdown.foreground#fdfff1
  • dropdown.listBackground#2B2C24
  • editor.background#262720
  • editor.findMatchBackground#ead5953c
  • editor.findMatchHighlightBackground#dc741677
  • editor.foreground#979eab
  • editor.inactiveSelectionBackground#ffffff10
  • editor.lineHighlightBackground#ffffff0d
  • editor.rangeHighlightBackground#ffffff16
  • editor.selectionBackground#ffffff1a
  • editor.selectionHighlightBackground#ffffff16
  • editor.wordHighlightBackground#ffffff16
  • editor.wordHighlightStrongBackground#ffffff1a
  • editorBracketMatch.background#ffffff16
  • editorBracketMatch.border#ffffff16
  • editorCodeLens.foreground#ffffff16
  • editorCursor.foreground#e4db72
  • editorError.foreground#F83379
  • editorGroup.background#2F3028
  • editorGroup.border#ffffff12
  • editorGroup.dropBackground#272821cc
  • editorGroupHeader.noTabsBackground#23241E
  • editorGroupHeader.tabsBackground#23241E
  • editorGroupHeader.tabsBorder#2F3028
  • editorGutter.addedBackground#a6e12db3
  • editorGutter.background#2A2B23
  • editorGutter.deletedBackground#f82570b3
  • editorGutter.modifiedBackground#e4db73b3
  • editorHoverWidget.background#2B2C24
  • editorIndentGuide.activeBackground#ffffff33
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.activeForeground#ffffff5a
  • editorLineNumber.foreground#ffffff33
  • editorLink.activeForeground#68daee
  • editorMarkerNavigation.background#272821
  • editorMarkerNavigationError.background#f82570b3
  • editorMarkerNavigationWarning.background#e4db73b3
  • editorOverviewRuler.addedForeground#88BD1B
  • editorOverviewRuler.border#ffffff12
  • editorOverviewRuler.currentContentForeground#29CAE71a
  • editorOverviewRuler.deletedForeground#DD0753
  • editorOverviewRuler.errorForeground#DD0753
  • editorOverviewRuler.findMatchForeground#00003c
  • editorOverviewRuler.incomingContentForeground#D9CC391a
  • editorOverviewRuler.infoForeground#D9CC39
  • editorOverviewRuler.modifiedForeground#D9CC39
  • editorOverviewRuler.rangeHighlightForeground#ffffff16
  • editorOverviewRuler.selectionHighlightForeground#ffffff16
  • editorOverviewRuler.warningForeground#D9CC39
  • editorOverviewRuler.wordHighlightForeground#ffffff1a
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff1a
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#272821
  • editorSuggestWidget.border#272821
  • editorSuggestWidget.foreground#fdfff1
  • editorSuggestWidget.selectedBackground#ffffff26
  • editorWarning.foreground#E7DF81
  • editorWhitespace.foreground#ffffff16
  • editorWidget.background#272821
  • editorWidget.border#1F201A
  • errorForeground#F83379
  • extensionButton.prominentBackground#D6C92B
  • extensionButton.prominentForeground#000000e6
  • extensionButton.prominentHoverBackground#BBAF24
  • focusBorder#ffffff33
  • foreground#aab1bb
  • gitDecoration.conflictingResourceForeground#E7DF81
  • gitDecoration.deletedResourceForeground#F83379
  • gitDecoration.ignoredResourceForeground#fdfff1a6
  • gitDecoration.modifiedResourceForeground#75DDF0
  • gitDecoration.untrackedResourceForeground#ABE339
  • input.background#23241E
  • input.border#2B2C24
  • input.foreground#aab1bb
  • input.placeholderForeground#fdfff1a6
  • inputOption.activeBorder#272821
  • inputValidation.errorBackground#23241E
  • inputValidation.errorBorder#DD0753
  • inputValidation.infoBackground#23241E
  • inputValidation.infoBorder#29CAE7
  • inputValidation.warningBackground#23241E
  • inputValidation.warningBorder#D9CC39
  • list.activeSelectionBackground#ffffff26
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#ffffff1a
  • list.focusBackground#ffffff33
  • list.focusForeground#FFFFFF
  • list.highlightForeground#E4DB73
  • list.hoverBackground#ffffff1a
  • list.hoverForeground#E8EAEE
  • list.inactiveFocusBackground#ffffff1f
  • list.inactiveSelectionBackground#ffffff21
  • list.inactiveSelectionForeground#FFFFFF
  • list.invalidItemForeground#F83379
  • merge.border#DD0753
  • merge.currentContentBackground#29CAE71a
  • merge.currentHeaderBackground#29CAE7
  • merge.incomingContentBackground#D9CC391a
  • merge.incomingHeaderBackground#D9CC39
  • notificationCenter.border#BBAF24
  • notificationCenterHeader.background#BBAF24
  • notificationCenterHeader.foreground#000000e6
  • notificationLink.foreground#68daee
  • notifications.background#1F201A
  • notifications.border#1F201A
  • notifications.foreground#FFFFFF
  • notificationToast.border#272821
  • panel.background#1F201A
  • panel.border#2F3028
  • panelTitle.activeBorder#BBAF24
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#EFFF8E
  • peekView.border#272821
  • peekViewEditor.background#2B2C24
  • peekViewEditor.matchHighlightBackground#ffffff16
  • peekViewEditorGutter.background#2B2C24
  • peekViewResult.background#2B2C24
  • peekViewResult.fileForeground#fdfff0
  • peekViewResult.lineForeground#fdfff0
  • peekViewResult.matchHighlightBackground#ffffff16
  • peekViewResult.selectionBackground#ffffff1a
  • peekViewResult.selectionForeground#fdfff0
  • peekViewTitle.background#23241E
  • peekViewTitleDescription.foreground#EFFF8E
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#2B2C24
  • pickerGroup.foreground#F6FFBF
  • progressBar.background#E4DB73
  • scrollbar.shadow#131411
  • scrollbarSlider.activeBackground#fdfff14d
  • scrollbarSlider.background#fdfff11a
  • scrollbarSlider.hoverBackground#fdfff133
  • selection.background#66d9eeb3
  • sideBar.background#272821
  • sideBar.border#272821
  • sideBar.foreground#fdfff1
  • sideBarSectionHeader.background#2F3028
  • sideBarSectionHeader.foreground#EFFF8E
  • sideBarTitle.foreground#F6FFBF
  • statusBar.background#1F201A
  • statusBar.border#2F3028
  • statusBar.debuggingBackground#D6C92B
  • statusBar.debuggingForeground#000000e6
  • statusBar.foreground#ffffffcc
  • statusBar.noFolderBackground#2F3028
  • statusBar.noFolderForeground#EFFF8E
  • statusBarItem.activeBackground#ffffff26
  • statusBarItem.hoverBackground#ffffff1a
  • statusBarItem.prominentBackground#BBAF24
  • statusBarItem.prominentHoverBackground#D9CC39
  • tab.activeBackground#2F3028
  • tab.activeBorder#BBAF24
  • tab.activeForeground#FFFFFF
  • tab.border#2F3028
  • tab.hoverBackground#2F3028
  • tab.inactiveBackground#1F201A
  • tab.inactiveForeground#F6FFBF
  • tab.unfocusedActiveForeground#F6FFBF
  • tab.unfocusedHoverBackground#2F3028
  • tab.unfocusedInactiveForeground#EFFF8E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#427ab3
  • terminal.ansiBrightBlack#686a66
  • terminal.ansiBrightBlue#84b0d8
  • terminal.ansiBrightCyan#37e6e8
  • terminal.ansiBrightGreen#99e343
  • terminal.ansiBrightMagenta#bc94b7
  • terminal.ansiBrightRed#f54235
  • terminal.ansiBrightWhite#f1f1f0
  • terminal.ansiBrightYellow#fdeb61
  • terminal.ansiCyan#00a7aa
  • terminal.ansiGreen#5ea702
  • terminal.ansiMagenta#89658e
  • terminal.ansiRed#d81e00
  • terminal.ansiWhite#dbded8
  • terminal.ansiYellow#cfae00
  • terminal.background#1F201A
  • terminal.foreground#fdfff1
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#1F201A
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#1F201A
  • titleBar.inactiveBackground#2B2C24
  • titleBar.inactiveForeground#F6FFBF
  • walkThrough.embeddedEditorBackground#272821
  • welcomePage.buttonBackground#2B2C24
  • welcomePage.buttonHoverBackground#2F3028
  • widget.shadow#131411

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#aaac9ed7
comment, punctuation.definition.comment#5c6370italic
variable, variable.other, variable.name#abb2bf
variable.parameter#bbbbbbunderline
variable.language, variable.scss, variable.less, variable.styl#f8256fitalic
punctuation.definition.variable#fdfff0italic
variable.other.constant#68daeebold
constant, constant.other, constant.character#ac80ff
support.type.property-name, constant.numeric, support.constant#fc941d
meta.object-literal.key#e4db72
constant.language#f8256fitalic
constant.character.escape, constant.other.placeholder#e4db72italic
invalid, invalid.illegal#f8256f
keyword, storage.type#ac80ff
storage.modifier#f8256f
storage.modifier, storage.type, keyword.controlitalic
keyword.operator, punctuation.accessor.#eebe4f
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#fdfff0
entity.name#e4db72
entity.name.tag, meta.tag.sgml#f8256f
entity.name.function, meta.function-call, variable.function, keyword.other.special-method, support.function, support.type, support.class#a5e12d
string, entity.name.label#d68852
entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#ffd706
meta.tag.attribute, entity.other.attribute-name#fc941ditalic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance#888b7e
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class, source.styl entity.other.attribute-name.class, source.less entity.other.attribute-name.class#eebe4f
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id, source.styl entity.other.attribute-name.id, source.less entity.other.attribute-name.id#68daee
support.type.property-name.css#fdfff0
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#adafa7italic
*url*, *link*, *uri*#68daeeitalic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#68daeeitalic
source.json meta.structure.dictionary.json support.type.property-name.json#e4db72
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fc941d
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#ac80ff
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#fdfff0
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#68daee
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#eebe4f
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#888b7e
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#adafa7
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f8256f
text.html.markdown, punctuation.definition.list_item.markdown#888b7e
text.html.markdown markup.inline.raw.markdown#ac80ff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#adafa7
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading.markdown entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#f8256f
beginning.punctuation.definition.list.markdown#fc941d
markup.italic#eebe4fitalic
markup.bold, markup.bold string#eebe4fbold
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#eebe4fbold italic
markup.underline#68daeeunderline
markup.strike#6e7066strike
beginning.punctuation.definition.quote#ffffff13
markup.quote#95978citalic
string.other.link.title.markdown#fc941d
string.other.link.description.title.markdown#a5e12d
constant.other.reference.link.markdown#eebe4f
markup.raw.block#fdfff0
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#fdfff0
meta.separator#fdfff1bold
markup.table#fdfff0
token.info-token#75DDF0
token.warn-token#E7DF81
token.error-token#F83379
token.debug-token#68daee
markup.deleted, punctuation.definition.deleted#F83379
markup.inserted, punctuation.definition.inserted#ABE339
markup.changed, punctuation.definition.changed#75DDF0
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.phpitalic
keyword.other.namespace.php, keyword.other.use.phpitalic
meta.tag.sgml.doctype.htmlitalic
My Monokai Theme by vicobill - VS Code Theme