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#040407
  • activityBar.border#FF52A240
  • activityBar.dropBackground#FF52A280
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#504B6D
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#09080F
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#504B6D
  • breadcrumbPicker.background#040407
  • button.background#FF52A250
  • button.foreground#ffffff
  • button.hoverBackground#FF52A270
  • button.secondaryBackground#141221
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#171425
  • debugConsole.errorForeground#FF52A2
  • debugConsole.infoForeground#00F0FF
  • debugConsole.warningForeground#FFD700
  • debugToolBar.background#09080F
  • diffEditor.insertedTextBackground#00F0FF20
  • diffEditor.removedTextBackground#FF52A220
  • dropdown.background#09080F
  • dropdown.border#FFFFFF10
  • editor.background#09080F
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlight#FFFFFF
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff50
  • editor.findRangeHighlightBackground#FFD70030
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#FF52A250
  • editor.selectionHighlightBackground#FFC30020
  • editor.wordHighlightBackground#FF52A230
  • editor.wordHighlightStrongBackground#7DF9FF30
  • editorBracketMatch.background#09080F
  • editorBracketMatch.border#FFC30050
  • editorCursor.foreground#FFC300
  • editorError.foreground#FF52A270
  • editorGroup.border#00000030
  • editorGroup.dropBackground#FF52A280
  • editorGroup.focusedEmptyBorder#FF52A2
  • editorGroupHeader.tabsBackground#09080F
  • editorGutter.addedBackground#7DF9FF60
  • editorGutter.deletedBackground#FF52A260
  • editorGutter.modifiedBackground#B983FF60
  • editorHoverWidget.background#09080F
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#423E63
  • editorIndentGuide.background#423E6370
  • editorInfo.foreground#B983FF70
  • editorLineNumber.activeForeground#504B6D
  • editorLineNumber.foreground#423E6380
  • editorLink.activeForeground#FFFFFF
  • editorMarkerNavigation.background#FFFFFF05
  • editorOverviewRuler.border#09080F
  • editorOverviewRuler.errorForeground#FF52A240
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#B983FF40
  • editorOverviewRuler.warningForeground#FFD70040
  • editorRuler.foreground#423E63
  • editorSuggestWidget.background#09080F
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#FFD70070
  • editorWhitespace.foreground#FFFFFF40
  • editorWidget.background#040407
  • editorWidget.border#80CBC4
  • editorWidget.resizeBorder#80CBC4
  • extensionBadge.remoteForeground#FFFFFF
  • extensionButton.prominentBackground#7DF9FF90
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#7DF9FF
  • focusBorder#FFFFFF00
  • foreground#FFFFFF
  • gitDecoration.conflictingResourceForeground#FFD70090
  • gitDecoration.deletedResourceForeground#FF52A290
  • gitDecoration.ignoredResourceForeground#504B6D90
  • gitDecoration.modifiedResourceForeground#B983FF90
  • gitDecoration.untrackedResourceForeground#7DF9FF90
  • input.background#141221
  • input.border#FFFFFF10
  • input.foreground#FFFFFF
  • input.placeholderForeground#FFFFFF60
  • inputOption.activeBackground#FFFFFF30
  • inputOption.activeBorder#FFFFFF30
  • inputValidation.errorBorder#FF52A2
  • inputValidation.infoBorder#B983FF
  • inputValidation.warningBorder#FFD700
  • list.activeSelectionBackground#040407
  • list.activeSelectionForeground#80CBC4
  • list.dropBackground#FF52A280
  • list.focusBackground#FFFFFF20
  • list.focusForeground#FFFFFF
  • list.highlightForeground#80CBC4
  • list.hoverBackground#040407
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#09080F
  • menu.foreground#FFFFFF
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#FFFFFF
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notebook.focusedCellBorder#80CBC4
  • notebook.inactiveFocusedCellBorder#80CBC450
  • notificationLink.foreground#80CBC4
  • notifications.background#09080F
  • notifications.foreground#FFFFFF
  • panel.background#040407
  • panel.border#FF52A240
  • panel.dropBackground#FFFFFF
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#FFFFFF
  • peekView.border#00000030
  • peekViewEditor.background#141221
  • peekViewEditor.matchHighlightBackground#FF52A250
  • peekViewEditorGutter.background#141221
  • peekViewResult.background#141221
  • peekViewResult.matchHighlightBackground#FF52A250
  • peekViewResult.selectionBackground#504B6D70
  • peekViewTitle.background#141221
  • peekViewTitleDescription.foreground#FFFFFF60
  • pickerGroup.border#FFFFFF1a
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • quickInput.background#09080F
  • quickInput.foreground#504B6D
  • quickInput.list.focusBackground#FFFFFF20
  • sash.hoverBorder#80CBC450
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#8F93A220
  • scrollbarSlider.hoverBackground#8F93A210
  • selection.background#00000080
  • settings.checkboxBackground#040407
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownBackground#040407
  • settings.dropdownForeground#FFFFFF
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#040407
  • settings.numberInputForeground#FFFFFF
  • settings.textInputBackground#040407
  • settings.textInputForeground#FFFFFF
  • sideBar.background#040407
  • sideBar.border#FF52A240
  • sideBar.foreground#504B6D
  • sideBarSectionHeader.background#040407
  • sideBarSectionHeader.border#FF52A240
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#040407
  • statusBar.border#FF52A240
  • statusBar.debuggingBackground#FF80B5
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#504B6D
  • statusBar.noFolderBackground#09080F
  • statusBarItem.activeBackground#FF52A280
  • statusBarItem.hoverBackground#504B6D20
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#09080F
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#504B6D
  • tab.border#09080F
  • tab.inactiveBackground#09080F
  • tab.inactiveForeground#504B6D
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#504B6D
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#B983FF
  • terminal.ansiBrightBlack#504B6D
  • terminal.ansiBrightBlue#B983FF
  • terminal.ansiBrightCyan#00F0FF
  • terminal.ansiBrightGreen#7DF9FF
  • terminal.ansiBrightMagenta#FF80B5
  • terminal.ansiBrightRed#FF52A2
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#00F0FF
  • terminal.ansiGreen#7DF9FF
  • terminal.ansiMagenta#FF80B5
  • terminal.ansiRed#FF52A2
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFD700
  • terminalCommandGuide.foreground#423E6380
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFD700
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#040407
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#FF52A240
  • titleBar.inactiveBackground#040407
  • titleBar.inactiveForeground#504B6D
  • tree.indentGuidesStroke#423E63
  • welcomePage.background#09080F
  • welcomePage.tileBackground#141221
  • welcomePage.tileBorder#FFFFFF10
  • welcomePage.tileHoverBackground#171425
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#FFFFFF
string#7DF9FF
punctuation, constant.other.symbol#00F0FF
constant.character.escape, text.html constant.character.entity.named#FFFFFF
constant.language.boolean#FF52A2
constant.numeric#FF9F29
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#FFFFFF
keyword.other#FF9F29
keyword, modifier, variable.language.this, support.type.object, constant.language#00F0FF
entity.name.function, support.function#B983FF
storage.type, storage.modifier, storage.control#FF80B5
support.module, support.node#FF52A2italic
support.type, constant.other.key#FFD700
entity.name.type, entity.other.inherited-class, entity.other#FFD700
comment#504B6Ditalic
comment punctuation.definition.comment, string.quoted.docstring#504B6Ditalic
punctuation#00F0FF
entity.name, entity.name.type.class, support.type, support.class, meta.use#FFD700
variable.object.property, meta.field.declaration entity.name.function#FF52A2
meta.definition.method entity.name.function#FF52A2
meta.function entity.name.function#B983FF
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#FFFFFF
entity.name.tag.yaml#FF52A2
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#FF52A2
constant.language.json#00F0FF
entity.other.attribute-name.class#FFD700
entity.other.attribute-name.id#FF9F29
source.css entity.name.tag#FFD700
support.type.property-name.css#B2CCD6
meta.tag, punctuation.definition.tag#00F0FF
entity.name.tag#FF52A2
entity.other.attribute-name#FF80B5
punctuation.definition.entity.html#FFFFFF
markup.heading#00F0FF
text.html.markdown meta.link.inline, meta.link.reference#FF52A2
text.html.markdown beginning.punctuation.definition.list#00F0FF
markup.italic#FF52A2italic
markup.bold#FF52A2bold
markup.bold markup.italic, markup.italic markup.bold#FF52A2italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#7DF9FF
markup.inline.raw.string.markdown#7DF9FF
keyword.other.definition.ini#FF52A2
entity.name.section.group-title.ini#00F0FF
source.cs meta.class.identifier storage.type#FFD700
source.cs meta.method.identifier entity.name.function#FF52A2
source.cs meta.method-call meta.method, source.cs entity.name.function#B983FF
source.cs storage.type#FFD700
source.cs meta.method.return-type#FFD700
source.cs meta.preprocessor#504B6D
source.cs entity.name.type.namespace#FFFFFF
meta.jsx.children, SXNested#FFFFFF
support.class.component#FFD700
source.cpp meta.block variable.other#FFFFFF
source.python meta.member.access.python#FF52A2
source.python meta.function-call.python, meta.function-call.arguments#B983FF
meta.block#FF52A2
entity.name.function.call#B983FF
source.php support.other.namespace, source.php meta.use support.class#FFFFFF
constant.keyword#00F0FFitalic
entity.name.function#B983FF
Global settings#FFFFFF
constant.other.placeholder#FF52A2
markup.deleted#FF52A2
markup.inserted#7DF9FF
markup.underlineunderline
keyword.control#00F0FFitalic
variable.parameteritalic
variable.parameter.function.language.special.self.python#FF52A2italic
constant.character.format.placeholder.other.python#FF9F29
markup.quote#00F0FFitalic
markup.fenced_code.block#FFFFFF90
punctuation.definition.quote#FF52A2
meta.structure.dictionary.json support.type.property-name.json#FF80B5
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFD700
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#FF9F29
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#FF52A2
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#B983FF
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#FF52A2
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#FF80B5
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#7DF9FF
Material Nova — Premium VS Code Theme by Dhaval Kurkutiya - VS Code Theme