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#1d1921
  • activityBar.border#1d192160
  • activityBar.dropBackground#ff758f80
  • activityBar.foreground#e3d6df
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#7a667e
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#1d1921
  • breadcrumb.focusForeground#e3d6df
  • breadcrumb.foreground#7a667e
  • breadcrumbPicker.background#1d1921
  • button.background#ff9bb050
  • button.foreground#ffffff
  • button.hoverBackground#ff9bb070
  • button.secondaryBackground#27222e
  • button.secondaryForeground#e3d6df
  • button.secondaryHoverBackground#2c2734
  • debugConsole.errorForeground#ff758f
  • debugConsole.infoForeground#a0d3ff
  • debugConsole.warningForeground#ffcc8a
  • debugToolBar.background#1d1921
  • diffEditor.insertedTextBackground#a0d3ff20
  • diffEditor.removedTextBackground#ff9bb020
  • dropdown.background#1d1921
  • dropdown.border#FFFFFF10
  • editor.background#1d1921
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlight#e3d6df
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff30
  • editor.findRangeHighlightBackground#ffcc8a30
  • editor.foreground#e3d6df
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#ff9bb050
  • editor.selectionHighlightBackground#FFCC0020
  • editor.wordHighlightBackground#ff9bb030
  • editor.wordHighlightStrongBackground#a8dca030
  • editorBracketMatch.background#1d1921
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#FFCC00
  • editorError.foreground#ff758f70
  • editorGroup.border#00000030
  • editorGroup.dropBackground#ff758f80
  • editorGroup.focusedEmptyBorder#ff758f
  • editorGroupHeader.tabsBackground#1d1921
  • editorGutter.addedBackground#a8dca060
  • editorGutter.deletedBackground#ff758f60
  • editorGutter.modifiedBackground#bfa2ff60
  • editorHoverWidget.background#1d1921
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#4f4054
  • editorIndentGuide.background#4f405470
  • editorInfo.foreground#bfa2ff70
  • editorLineNumber.activeForeground#7a667e
  • editorLineNumber.foreground#3d3242
  • editorLink.activeForeground#e3d6df
  • editorMarkerNavigation.background#e3d6df05
  • editorOverviewRuler.border#1d1921
  • editorOverviewRuler.errorForeground#ff758f40
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#bfa2ff40
  • editorOverviewRuler.warningForeground#ffcc8a40
  • editorRuler.foreground#4f4054
  • editorSuggestWidget.background#1d1921
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#e3d6df
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#ffcc8a70
  • editorWhitespace.foreground#e3d6df40
  • editorWidget.background#1d1921
  • editorWidget.border#80CBC4
  • editorWidget.resizeBorder#80CBC4
  • extensionBadge.remoteForeground#e3d6df
  • extensionButton.prominentBackground#a8dca090
  • extensionButton.prominentForeground#e3d6df
  • extensionButton.prominentHoverBackground#a8dca0
  • focusBorder#FFFFFF00
  • foreground#e3d6df
  • gitDecoration.conflictingResourceForeground#ffcc8a90
  • gitDecoration.deletedResourceForeground#ff758f90
  • gitDecoration.ignoredResourceForeground#7a667e90
  • gitDecoration.modifiedResourceForeground#bfa2ff90
  • gitDecoration.untrackedResourceForeground#a8dca090
  • input.background#27222e
  • input.border#FFFFFF10
  • input.foreground#e3d6df
  • input.placeholderForeground#e3d6df60
  • inputOption.activeBackground#e3d6df30
  • inputOption.activeBorder#e3d6df30
  • inputValidation.errorBorder#ff758f
  • inputValidation.infoBorder#bfa2ff
  • inputValidation.warningBorder#ffcc8a
  • list.activeSelectionBackground#1d1921
  • list.activeSelectionForeground#80CBC4
  • list.dropBackground#ff758f80
  • list.focusBackground#e3d6df20
  • list.focusForeground#e3d6df
  • list.highlightForeground#80CBC4
  • list.hoverBackground#1d1921
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#1d1921
  • menu.foreground#e3d6df
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#e3d6df
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notebook.focusedCellBorder#80CBC4
  • notebook.inactiveFocusedCellBorder#80CBC450
  • notificationLink.foreground#80CBC4
  • notifications.background#1d1921
  • notifications.foreground#e3d6df
  • panel.background#1d1921
  • panel.border#1d192160
  • panel.dropBackground#e3d6df
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#e3d6df
  • peekView.border#00000030
  • peekViewEditor.background#27222e
  • peekViewEditor.matchHighlightBackground#ff9bb050
  • peekViewEditorGutter.background#27222e
  • peekViewResult.background#27222e
  • peekViewResult.matchHighlightBackground#ff9bb050
  • peekViewResult.selectionBackground#7a667e70
  • peekViewTitle.background#27222e
  • peekViewTitleDescription.foreground#e3d6df60
  • pickerGroup.border#FFFFFF1a
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • quickInput.background#1d1921
  • quickInput.foreground#7a667e
  • quickInput.list.focusBackground#e3d6df20
  • sash.hoverBorder#80CBC450
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#A6ACCD20
  • scrollbarSlider.hoverBackground#A6ACCD10
  • selection.background#00000080
  • settings.checkboxBackground#1d1921
  • settings.checkboxForeground#e3d6df
  • settings.dropdownBackground#1d1921
  • settings.dropdownForeground#e3d6df
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#1d1921
  • settings.numberInputForeground#e3d6df
  • settings.textInputBackground#1d1921
  • settings.textInputForeground#e3d6df
  • sideBar.background#1d1921
  • sideBar.border#1d192160
  • sideBar.foreground#7a667e
  • sideBarSectionHeader.background#1d1921
  • sideBarSectionHeader.border#1d192160
  • sideBarTitle.foreground#e3d6df
  • statusBar.background#1d1921
  • statusBar.border#1d192160
  • statusBar.debuggingBackground#e8a2ff
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#7a667e
  • statusBar.noFolderBackground#1d1921
  • statusBarItem.activeBackground#ff758f80
  • statusBarItem.hoverBackground#7a667e20
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#1d1921
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#7a667e
  • tab.border#1d1921
  • tab.inactiveBackground#1d1921
  • tab.inactiveForeground#7a667e
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#7a667e
  • tab.unfocusedActiveForeground#e3d6df
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#bfa2ff
  • terminal.ansiBrightBlack#7a667e
  • terminal.ansiBrightBlue#bfa2ff
  • terminal.ansiBrightCyan#a0d3ff
  • terminal.ansiBrightGreen#a8dca0
  • terminal.ansiBrightMagenta#e8a2ff
  • terminal.ansiBrightRed#ff758f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcc8a
  • terminal.ansiCyan#a0d3ff
  • terminal.ansiGreen#a8dca0
  • terminal.ansiMagenta#e8a2ff
  • terminal.ansiRed#ff758f
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcc8a
  • terminalCommandGuide.foreground#3d3242
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffcc8a
  • textLink.activeForeground#e3d6df
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#1d1921
  • titleBar.activeForeground#e3d6df
  • titleBar.border#1d192160
  • titleBar.inactiveBackground#1d1921
  • titleBar.inactiveForeground#7a667e
  • tree.indentGuidesStroke#4f4054
  • welcomePage.background#1d1921
  • welcomePage.tileBackground#27222e
  • welcomePage.tileBorder#FFFFFF10
  • welcomePage.tileHoverBackground#2c2734
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#e3d6df
string#a8dca0
punctuation, constant.other.symbol#a0d3ff
constant.character.escape, text.html constant.character.entity.named#e3d6df
constant.language.boolean#ff9bb0
constant.numeric#ffa07a
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#e3d6df
keyword.other#ffa07a
keyword, modifier, variable.language.this, support.type.object, constant.language#a0d3ff
entity.name.function, support.function#bfa2ff
storage.type, storage.modifier, storage.control#e8a2ff
support.module, support.node#ff758fitalic
support.type, constant.other.key#ffcc8a
entity.name.type, entity.other.inherited-class, entity.other#ffcc8a
comment#7a667eitalic
comment punctuation.definition.comment, string.quoted.docstring#7a667eitalic
punctuation#a0d3ff
entity.name, entity.name.type.class, support.type, support.class, meta.use#ffcc8a
variable.object.property, meta.field.declaration entity.name.function#ff758f
meta.definition.method entity.name.function#ff758f
meta.function entity.name.function#bfa2ff
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#a0d3ff
meta.embedded, source.groovy.embedded, meta.template.expression#e3d6df
entity.name.tag.yaml#ff758f
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ff758f
constant.language.json#a0d3ff
entity.other.attribute-name.class#ffcc8a
entity.other.attribute-name.id#ffa07a
source.css entity.name.tag#ffcc8a
support.type.property-name.css#B2CCD6
meta.tag, punctuation.definition.tag#a0d3ff
entity.name.tag#ff758f
entity.other.attribute-name#e8a2ff
punctuation.definition.entity.html#e3d6df
markup.heading#a0d3ff
text.html.markdown meta.link.inline, meta.link.reference#ff758f
text.html.markdown beginning.punctuation.definition.list#a0d3ff
markup.italic#ff758fitalic
markup.bold#ff758fbold
markup.bold markup.italic, markup.italic markup.bold#ff758fitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#a8dca0
markup.inline.raw.string.markdown#a8dca0
keyword.other.definition.ini#ff758f
entity.name.section.group-title.ini#a0d3ff
source.cs meta.class.identifier storage.type#ffcc8a
source.cs meta.method.identifier entity.name.function#ff758f
source.cs meta.method-call meta.method, source.cs entity.name.function#bfa2ff
source.cs storage.type#ffcc8a
source.cs meta.method.return-type#ffcc8a
source.cs meta.preprocessor#7a667e
source.cs entity.name.type.namespace#e3d6df
meta.jsx.children, SXNested#e3d6df
support.class.component#ffcc8a
source.cpp meta.block variable.other#e3d6df
source.python meta.member.access.python#ff758f
source.python meta.function-call.python, meta.function-call.arguments#bfa2ff
meta.block#ff758f
entity.name.function.call#bfa2ff
source.php support.other.namespace, source.php meta.use support.class#e3d6df
constant.keyword#a0d3ffitalic
entity.name.function#bfa2ff
Global settings#e3d6df
constant.other.placeholder#ff758f
markup.deleted#ff758f
markup.inserted#a8dca0
markup.underlineunderline
keyword.control#a0d3ffitalic
variable.parameteritalic
variable.parameter.function.language.special.self.python#ff758fitalic
constant.character.format.placeholder.other.python#ffa07a
markup.quote#a0d3ffitalic
markup.fenced_code.block#e3d6df90
punctuation.definition.quote#ff9bb0
meta.structure.dictionary.json support.type.property-name.json#e8a2ff
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffcc8a
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#ffa07a
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#ff758f
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#bfa2ff
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#ff9bb0
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#e8a2ff
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#a8dca0
Material Nova — Premium VS Code Theme by Dhaval Kurkutiya - VS Code Theme