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.activeBorder#80CBC4
  • activityBar.background#261435
  • activityBar.border#26143560
  • activityBar.dropBackground#FF2A7480
  • activityBar.foreground#E1DFEE
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#685E79
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#261435
  • breadcrumb.focusForeground#E1DFEE
  • breadcrumb.foreground#A599B5
  • breadcrumbPicker.background#261435
  • button.background#00F0FF20
  • button.foreground#ffffff
  • button.hoverBackground#00F0FF40
  • button.secondaryBackground#371E52
  • button.secondaryForeground#E1DFEE
  • button.secondaryHoverBackground#3f225e
  • debugConsole.errorForeground#FF2A74
  • debugConsole.infoForeground#00F0FF
  • debugConsole.warningForeground#FECB6B
  • debugToolBar.background#261435
  • diffEditor.insertedTextBackground#00F0FF20
  • diffEditor.removedTextBackground#FF2A7420
  • dropdown.background#261435
  • dropdown.border#FFFFFF10
  • editor.background#261435
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlight#E1DFEE
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#E1DFEE30
  • editor.findRangeHighlightBackground#FECB6B30
  • editor.foreground#E1DFEE
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#00F0FF20
  • editor.selectionHighlightBackground#00F0FF20
  • editor.wordHighlightBackground#FF2A7430
  • editor.wordHighlightStrongBackground#72F1B830
  • editorBracketMatch.background#261435
  • editorBracketMatch.border#00F0FF50
  • editorCursor.foreground#00F0FF
  • editorError.foreground#FF2A7470
  • editorGroup.border#00000030
  • editorGroup.dropBackground#FF2A7480
  • editorGroup.focusedEmptyBorder#FF2A74
  • editorGroupHeader.tabsBackground#261435
  • editorGutter.addedBackground#72F1B860
  • editorGutter.deletedBackground#FF2A7460
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#261435
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#442663
  • editorIndentGuide.background#44266370
  • editorInfo.foreground#82AAFF70
  • editorLineNumber.activeForeground#A599B5
  • editorLineNumber.foreground#58357A
  • editorLink.activeForeground#E1DFEE
  • editorMarkerNavigation.background#E1DFEE05
  • editorOverviewRuler.border#261435
  • editorOverviewRuler.errorForeground#FF2A7440
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FECB6B40
  • editorRuler.foreground#442663
  • editorSuggestWidget.background#261435
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#E1DFEE
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#FECB6B70
  • editorWhitespace.foreground#E1DFEE40
  • editorWidget.background#261435
  • editorWidget.border#80CBC4
  • editorWidget.resizeBorder#80CBC4
  • extensionBadge.remoteForeground#E1DFEE
  • extensionButton.prominentBackground#72F1B890
  • extensionButton.prominentForeground#E1DFEE
  • extensionButton.prominentHoverBackground#72F1B8
  • focusBorder#FFFFFF00
  • foreground#E1DFEE
  • gitDecoration.conflictingResourceForeground#FECB6B90
  • gitDecoration.deletedResourceForeground#FF2A7490
  • gitDecoration.ignoredResourceForeground#A599B590
  • gitDecoration.modifiedResourceForeground#82AAFF90
  • gitDecoration.untrackedResourceForeground#72F1B890
  • input.background#371E52
  • input.border#FFFFFF10
  • input.foreground#E1DFEE
  • input.placeholderForeground#E1DFEE60
  • inputOption.activeBackground#E1DFEE30
  • inputOption.activeBorder#E1DFEE30
  • inputValidation.errorBorder#FF2A74
  • inputValidation.infoBorder#82AAFF
  • inputValidation.warningBorder#FECB6B
  • list.activeSelectionBackground#261435
  • list.activeSelectionForeground#80CBC4
  • list.dropBackground#FF2A7480
  • list.focusBackground#E1DFEE20
  • list.focusForeground#E1DFEE
  • list.highlightForeground#80CBC4
  • list.hoverBackground#261435
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#261435
  • menu.foreground#E1DFEE
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#E1DFEE
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notebook.focusedCellBorder#80CBC4
  • notebook.inactiveFocusedCellBorder#80CBC450
  • notificationLink.foreground#80CBC4
  • notifications.background#261435
  • notifications.foreground#E1DFEE
  • panel.background#261435
  • panel.border#26143560
  • panel.dropBackground#E1DFEE
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#E1DFEE
  • peekView.border#00000030
  • peekViewEditor.background#371E52
  • peekViewEditor.matchHighlightBackground#00F0FF20
  • peekViewEditorGutter.background#371E52
  • peekViewResult.background#371E52
  • peekViewResult.matchHighlightBackground#00F0FF20
  • peekViewResult.selectionBackground#A599B570
  • peekViewTitle.background#371E52
  • peekViewTitleDescription.foreground#E1DFEE60
  • pickerGroup.border#FFFFFF1a
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • quickInput.background#261435
  • quickInput.foreground#A599B5
  • quickInput.list.focusBackground#E1DFEE20
  • sash.hoverBorder#80CBC450
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#E1DFEE20
  • scrollbarSlider.hoverBackground#E1DFEE10
  • selection.background#00000080
  • settings.checkboxBackground#261435
  • settings.checkboxForeground#E1DFEE
  • settings.dropdownBackground#261435
  • settings.dropdownForeground#E1DFEE
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#261435
  • settings.numberInputForeground#E1DFEE
  • settings.textInputBackground#261435
  • settings.textInputForeground#E1DFEE
  • sideBar.background#261435
  • sideBar.border#26143560
  • sideBar.foreground#A599B5
  • sideBarSectionHeader.background#261435
  • sideBarSectionHeader.border#26143560
  • sideBarTitle.foreground#E1DFEE
  • statusBar.background#261435
  • statusBar.border#26143560
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#E1DFEE
  • statusBar.foreground#685E79
  • statusBar.noFolderBackground#261435
  • statusBarItem.activeBackground#FF2A7480
  • statusBarItem.hoverBackground#685E7920
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#261435
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#A599B5
  • tab.border#261435
  • tab.inactiveBackground#261435
  • tab.inactiveForeground#A599B5
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#685E79
  • tab.unfocusedActiveForeground#E1DFEE
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#685E79
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#00F0FF
  • terminal.ansiBrightGreen#72F1B8
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF2A74
  • terminal.ansiBrightWhite#E1DFEE
  • terminal.ansiBrightYellow#FECB6B
  • terminal.ansiCyan#00F0FF
  • terminal.ansiGreen#72F1B8
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF2A74
  • terminal.ansiWhite#E1DFEE
  • terminal.ansiYellow#FECB6B
  • terminalCommandGuide.foreground#58357A
  • terminalCursor.background#000000
  • terminalCursor.foreground#FECB6B
  • textLink.activeForeground#E1DFEE
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#261435
  • titleBar.activeForeground#E1DFEE
  • titleBar.border#26143560
  • titleBar.inactiveBackground#261435
  • titleBar.inactiveForeground#A599B5
  • tree.indentGuidesStroke#442663
  • welcomePage.background#261435
  • welcomePage.tileBackground#371E52
  • welcomePage.tileBorder#FFFFFF10
  • welcomePage.tileHoverBackground#3f225e
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#E1DFEE
string#72F1B8
punctuation, constant.other.symbol#00F0FF
constant.character.escape, text.html constant.character.entity.named#E1DFEE
constant.language.boolean#FF2A74
constant.numeric#FE9055
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#E1DFEE
keyword.other#FE9055
keyword, modifier, variable.language.this, support.type.object, constant.language#00F0FF
entity.name.function, support.function#82AAFF
storage.type, storage.modifier, storage.control#C792EA
support.module, support.node#FF2A74italic
support.type, constant.other.key#FECB6B
entity.name.type, entity.other.inherited-class, entity.other#FECB6B
comment#685E79italic
comment punctuation.definition.comment, string.quoted.docstring#685E79italic
punctuation#00F0FF
entity.name, entity.name.type.class, support.type, support.class, meta.use#FECB6B
variable.object.property, meta.field.declaration entity.name.function#FF2A74
meta.definition.method entity.name.function#FF2A74
meta.function entity.name.function#82AAFF
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#00F0FF
meta.embedded, source.groovy.embedded, meta.template.expression#E1DFEE
entity.name.tag.yaml#FF2A74
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#FF2A74
constant.language.json#00F0FF
entity.other.attribute-name.class#FECB6B
entity.other.attribute-name.id#FE9055
source.css entity.name.tag#FECB6B
support.type.property-name.css#B7ACCE
meta.tag, punctuation.definition.tag#00F0FF
entity.name.tag#FF2A74
entity.other.attribute-name#C792EA
punctuation.definition.entity.html#E1DFEE
markup.heading#00F0FF
text.html.markdown meta.link.inline, meta.link.reference#FF2A74
text.html.markdown beginning.punctuation.definition.list#00F0FF
markup.italic#FF2A74italic
markup.bold#FF2A74bold
markup.bold markup.italic, markup.italic markup.bold#FF2A74italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#72F1B8
markup.inline.raw.string.markdown#72F1B8
keyword.other.definition.ini#FF2A74
entity.name.section.group-title.ini#00F0FF
source.cs meta.class.identifier storage.type#FECB6B
source.cs meta.method.identifier entity.name.function#FF2A74
source.cs meta.method-call meta.method, source.cs entity.name.function#82AAFF
source.cs storage.type#FECB6B
source.cs meta.method.return-type#FECB6B
source.cs meta.preprocessor#685E79
source.cs entity.name.type.namespace#E1DFEE
meta.jsx.children, SXNested#E1DFEE
support.class.component#FECB6B
source.cpp meta.block variable.other#E1DFEE
source.python meta.member.access.python#FF2A74
source.python meta.function-call.python, meta.function-call.arguments#82AAFF
meta.block#FF2A74
entity.name.function.call#82AAFF
source.php support.other.namespace, source.php meta.use support.class#E1DFEE
constant.keyword#00F0FFitalic
entity.name.function#82AAFF
Global settings#E1DFEE
constant.other.placeholder#FF2A74
markup.deleted#FF2A74
markup.inserted#72F1B8
markup.underlineunderline
keyword.control#00F0FFitalic
variable.parameteritalic
variable.parameter.function.language.special.self.python#FF2A74italic
constant.character.format.placeholder.other.python#FE9055
markup.quote#00F0FFitalic
markup.fenced_code.block#E1DFEE90
punctuation.definition.quote#FF2A74
meta.structure.dictionary.json support.type.property-name.json#C792EA
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FECB6B
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#FE9055
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#FF2A74
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#916b53
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#82AAFF
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#FF2A74
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#C792EA
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#72F1B8
Material Nova — Premium VS Code Theme by Dhaval Kurkutiya - VS Code Theme