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#212121
  • activityBar.border#21212160
  • activityBar.foreground#EEFFFF
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#545454
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#212121
  • breadcrumb.focusForeground#EEFFFF
  • breadcrumb.foreground#616161
  • breadcrumbPicker.background#212121
  • button.background#61616150
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#C3E88D15
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#212121
  • dropdown.border#FFFFFF10
  • editor.background#212121
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff30
  • editor.foreground#EEFFFF
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#61616150
  • editor.selectionHighlightBackground#FFCC0020
  • editorBracketMatch.background#212121
  • editorBracketMatch.border#ffffff50
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#FF537070
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#212121
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#FF537060
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#42424270
  • editorInfo.foreground#82AAFF70
  • editorLineNumber.activeForeground#616161
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#EEFFFF
  • editorMarkerNavigation.background#EEFFFF05
  • editorOverviewRuler.border#212121
  • editorOverviewRuler.errorForeground#FF537040
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#EEFFFF
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#EEFFFF40
  • editorWidget.background#212121
  • editorWidget.resizeBorder#80CBC4
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#FFCB6B90
  • gitDecoration.deletedResourceForeground#FF537090
  • gitDecoration.ignoredResourceForeground#61616190
  • gitDecoration.modifiedResourceForeground#82AAFF90
  • gitDecoration.untrackedResourceForeground#C3E88D90
  • input.background#2B2B2B
  • input.border#FFFFFF10
  • input.foreground#EEFFFF
  • input.placeholderForeground#EEFFFF60
  • inputOption.activeBackground#EEFFFF30
  • inputOption.activeBorder#EEFFFF30
  • inputValidation.errorBorder#FF537050
  • inputValidation.infoBorder#82AAFF50
  • inputValidation.warningBorder#FFCB6B50
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#80CBC4
  • list.focusBackground#EEFFFF20
  • list.focusForeground#EEFFFF
  • list.highlightForeground#80CBC4
  • list.hoverBackground#212121
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#212121
  • menu.foreground#EEFFFF
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#EEFFFF
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notificationLink.foreground#80CBC4
  • notifications.background#212121
  • notifications.foreground#EEFFFF
  • panel.background#212121
  • panel.border#21212160
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#EEFFFF
  • peekView.border#00000030
  • peekViewEditor.background#EEFFFF05
  • peekViewEditor.matchHighlightBackground#61616150
  • peekViewEditorGutter.background#EEFFFF05
  • peekViewResult.background#EEFFFF05
  • peekViewResult.matchHighlightBackground#61616150
  • peekViewResult.selectionBackground#61616170
  • peekViewTitle.background#EEFFFF05
  • peekViewTitleDescription.foreground#EEFFFF60
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • scrollbar.shadow#21212100
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#EEFFFF20
  • scrollbarSlider.hoverBackground#EEFFFF10
  • selection.background#80CBC4
  • settings.checkboxBackground#212121
  • settings.checkboxForeground#EEFFFF
  • settings.dropdownBackground#212121
  • settings.dropdownForeground#EEFFFF
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#212121
  • settings.numberInputForeground#EEFFFF
  • settings.textInputBackground#212121
  • settings.textInputForeground#EEFFFF
  • sideBar.background#212121
  • sideBar.border#21212160
  • sideBar.foreground#616161
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.border#21212160
  • sideBarTitle.foreground#EEFFFF
  • statusBar.background#212121
  • statusBar.border#21212160
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#616161
  • statusBar.noFolderBackground#212121
  • statusBarItem.hoverBackground#54545420
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#616161
  • tab.border#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#616161
  • tab.unfocusedActiveBorder#545454
  • tab.unfocusedActiveForeground#EEFFFF
  • terminal.ansiBlack#454444
  • terminal.ansiBlue#52aed8
  • terminal.ansiBrightBlack#666565
  • terminal.ansiBrightBlue#80c7e7
  • terminal.ansiBrightCyan#a5e1e1
  • terminal.ansiBrightGreen#b1d3b0
  • terminal.ansiBrightMagenta#eb9deb
  • terminal.ansiBrightRed#ea99aa
  • terminal.ansiBrightWhite#e5e4e4
  • terminal.ansiBrightYellow#e7e698
  • terminal.ansiCyan#76b7bc
  • terminal.ansiGreen#99d798
  • terminal.ansiMagenta#e27de2
  • terminal.ansiRed#ed5e7b
  • terminal.ansiWhite#c1c0c0
  • terminal.ansiYellow#e2c264
  • terminalCursor.background#000000
  • terminalCursor.foreground#f8f8f0
  • textLink.activeForeground#EEFFFF
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#EEFFFF
  • titleBar.border#21212160
  • titleBar.inactiveBackground#212121
  • titleBar.inactiveForeground#616161
  • tree.indentGuidesStroke#424242
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
meta.function-call.js entity.name.function, meta.function-call.js support.function.dom.js, support.variable.dom.js, support.variable.property.js#80c7e7
support.variable.property.process#80c7e7
support.variable.object.process#80c7e7italic
comment#75715E
string#e7e698
punctuation.definition.template-expression, punctuation.section.embedded.coffee#ed5e7b
meta.template.expression#F8F8F2
constant.numeric#eb9deb
constant.language#eb9deb
constant.character, constant.other#eb9deb
variable#F8F8F2
keyword#ed5e7b
storage#ed5e7b
storage.type#80c7e7italic
entity.name.type, entity.name.class
entity.other.inherited-class#99d798italic underline
entity.name.function#99d798
variable.parameter#f3a760italic
entity.name.tag, meta.tag.sgml.doctype.html#ed5e7b
entity.other.attribute-name#99d798
support.function#80c7e7
support.constant#80c7e7
support.type, support.class#80c7e7italic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#ed5e7b
markup.inserted#99d798
markup.changed#e7e698
constant.numeric.line-number.find-in-files - match#eb9debA0
entity.name.filename.find-in-files#e7e698
markup.quote#ed5e7b
markup.list#e7e698
markup.bold, markup.italic#80c7e7
markup.inline.raw#f3a760
markup.heading#99d798
markup.heading.setext#99d798
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#f3a760italic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#F8F8F2
keyword.var.go#80c7e7italic
meta.method-call.php entity.name.function#80c7e7
storage.type.class.jsdoc, variable.other.jsdoc#75715E
string.quoted.docstring.multi.python#75715E
entity.name.type.class.python#99d798ff
meta.class.python support.type.python#99d798ff
meta.function-call.generic.python#80c7e7ff
punctuation.definition.decorator.python#ed5e7b
entity.name.function.decorator.python#80c7e7
Everything Monokai by xckomorebi - VS Code Theme