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#282828
  • activityBar.border#28282860
  • activityBar.dropBackground#FB493480
  • activityBar.foreground#FBF1C7
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#928374
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#282828
  • breadcrumb.focusForeground#FBF1C7
  • breadcrumb.foreground#BDAE93
  • breadcrumbPicker.background#282828
  • button.background#FE801920
  • button.foreground#ffffff
  • button.hoverBackground#FE801940
  • button.secondaryBackground#32302F
  • button.secondaryForeground#FBF1C7
  • button.secondaryHoverBackground#393736
  • debugConsole.errorForeground#FB4934
  • debugConsole.infoForeground#8EC07C
  • debugConsole.warningForeground#FABD2F
  • debugToolBar.background#282828
  • diffEditor.insertedTextBackground#8EC07C20
  • diffEditor.removedTextBackground#FE801920
  • dropdown.background#282828
  • dropdown.border#FFFFFF10
  • editor.background#282828
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlight#FBF1C7
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#FBF1C730
  • editor.findRangeHighlightBackground#FABD2F30
  • editor.foreground#FBF1C7
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#FE801920
  • editor.selectionHighlightBackground#FE801920
  • editor.wordHighlightBackground#FE801930
  • editor.wordHighlightStrongBackground#B8BB2630
  • editorBracketMatch.background#282828
  • editorBracketMatch.border#FE801950
  • editorCursor.foreground#FE8019
  • editorError.foreground#FB493470
  • editorGroup.border#00000030
  • editorGroup.dropBackground#FB493480
  • editorGroup.focusedEmptyBorder#FB4934
  • editorGroupHeader.tabsBackground#282828
  • editorGutter.addedBackground#B8BB2660
  • editorGutter.deletedBackground#FB493460
  • editorGutter.modifiedBackground#83A59860
  • editorHoverWidget.background#282828
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#3C3836
  • editorIndentGuide.background#3C383670
  • editorInfo.foreground#83A59870
  • editorLineNumber.activeForeground#BDAE93
  • editorLineNumber.foreground#504945
  • editorLink.activeForeground#FBF1C7
  • editorMarkerNavigation.background#FBF1C705
  • editorOverviewRuler.border#282828
  • editorOverviewRuler.errorForeground#FB493440
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#83A59840
  • editorOverviewRuler.warningForeground#FABD2F40
  • editorRuler.foreground#3C3836
  • editorSuggestWidget.background#282828
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#FBF1C7
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#FABD2F70
  • editorWhitespace.foreground#FBF1C740
  • editorWidget.background#282828
  • editorWidget.border#80CBC4
  • editorWidget.resizeBorder#80CBC4
  • extensionBadge.remoteForeground#FBF1C7
  • extensionButton.prominentBackground#B8BB2690
  • extensionButton.prominentForeground#FBF1C7
  • extensionButton.prominentHoverBackground#B8BB26
  • focusBorder#FFFFFF00
  • foreground#FBF1C7
  • gitDecoration.conflictingResourceForeground#FABD2F90
  • gitDecoration.deletedResourceForeground#FB493490
  • gitDecoration.ignoredResourceForeground#BDAE9390
  • gitDecoration.modifiedResourceForeground#83A59890
  • gitDecoration.untrackedResourceForeground#B8BB2690
  • input.background#32302F
  • input.border#FFFFFF10
  • input.foreground#FBF1C7
  • input.placeholderForeground#FBF1C760
  • inputOption.activeBackground#FBF1C730
  • inputOption.activeBorder#FBF1C730
  • inputValidation.errorBorder#FB4934
  • inputValidation.infoBorder#83A598
  • inputValidation.warningBorder#FABD2F
  • list.activeSelectionBackground#282828
  • list.activeSelectionForeground#80CBC4
  • list.dropBackground#FB493480
  • list.focusBackground#FBF1C720
  • list.focusForeground#FBF1C7
  • list.highlightForeground#80CBC4
  • list.hoverBackground#282828
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#282828
  • menu.foreground#FBF1C7
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#FBF1C7
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notebook.focusedCellBorder#80CBC4
  • notebook.inactiveFocusedCellBorder#80CBC450
  • notificationLink.foreground#80CBC4
  • notifications.background#282828
  • notifications.foreground#FBF1C7
  • panel.background#282828
  • panel.border#28282860
  • panel.dropBackground#FBF1C7
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#FBF1C7
  • peekView.border#00000030
  • peekViewEditor.background#32302F
  • peekViewEditor.matchHighlightBackground#FE801920
  • peekViewEditorGutter.background#32302F
  • peekViewResult.background#32302F
  • peekViewResult.matchHighlightBackground#FE801920
  • peekViewResult.selectionBackground#BDAE9370
  • peekViewTitle.background#32302F
  • peekViewTitleDescription.foreground#FBF1C760
  • pickerGroup.border#FFFFFF1a
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • quickInput.background#282828
  • quickInput.foreground#BDAE93
  • quickInput.list.focusBackground#FBF1C720
  • sash.hoverBorder#80CBC450
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#FBF1C720
  • scrollbarSlider.hoverBackground#FBF1C710
  • selection.background#00000080
  • settings.checkboxBackground#282828
  • settings.checkboxForeground#FBF1C7
  • settings.dropdownBackground#282828
  • settings.dropdownForeground#FBF1C7
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#282828
  • settings.numberInputForeground#FBF1C7
  • settings.textInputBackground#282828
  • settings.textInputForeground#FBF1C7
  • sideBar.background#282828
  • sideBar.border#28282860
  • sideBar.foreground#BDAE93
  • sideBarSectionHeader.background#282828
  • sideBarSectionHeader.border#28282860
  • sideBarTitle.foreground#FBF1C7
  • statusBar.background#282828
  • statusBar.border#28282860
  • statusBar.debuggingBackground#D3869B
  • statusBar.debuggingForeground#FBF1C7
  • statusBar.foreground#928374
  • statusBar.noFolderBackground#282828
  • statusBarItem.activeBackground#FB493480
  • statusBarItem.hoverBackground#92837420
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#282828
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#BDAE93
  • tab.border#282828
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#BDAE93
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#928374
  • tab.unfocusedActiveForeground#FBF1C7
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#83A598
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83A598
  • terminal.ansiBrightCyan#8EC07C
  • terminal.ansiBrightGreen#B8BB26
  • terminal.ansiBrightMagenta#D3869B
  • terminal.ansiBrightRed#FB4934
  • terminal.ansiBrightWhite#FBF1C7
  • terminal.ansiBrightYellow#FABD2F
  • terminal.ansiCyan#8EC07C
  • terminal.ansiGreen#B8BB26
  • terminal.ansiMagenta#D3869B
  • terminal.ansiRed#FB4934
  • terminal.ansiWhite#FBF1C7
  • terminal.ansiYellow#FABD2F
  • terminalCommandGuide.foreground#504945
  • terminalCursor.background#000000
  • terminalCursor.foreground#FABD2F
  • textLink.activeForeground#FBF1C7
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#282828
  • titleBar.activeForeground#FBF1C7
  • titleBar.border#28282860
  • titleBar.inactiveBackground#282828
  • titleBar.inactiveForeground#BDAE93
  • tree.indentGuidesStroke#3C3836
  • welcomePage.background#282828
  • welcomePage.tileBackground#32302F
  • welcomePage.tileBorder#FFFFFF10
  • welcomePage.tileHoverBackground#393736
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#FBF1C7—
string#B8BB26—
punctuation, constant.other.symbol#8EC07C—
constant.character.escape, text.html constant.character.entity.named#FBF1C7—
constant.language.boolean#FE8019—
constant.numeric#D65D0E—
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#FBF1C7—
keyword.other#D65D0E—
keyword, modifier, variable.language.this, support.type.object, constant.language#8EC07C—
entity.name.function, support.function#83A598—
storage.type, storage.modifier, storage.control#D3869B—
support.module, support.node#FB4934italic
support.type, constant.other.key#FABD2F—
entity.name.type, entity.other.inherited-class, entity.other#FABD2F—
comment#928374italic
comment punctuation.definition.comment, string.quoted.docstring#928374italic
punctuation#8EC07C—
entity.name, entity.name.type.class, support.type, support.class, meta.use#FABD2F—
variable.object.property, meta.field.declaration entity.name.function#FB4934—
meta.definition.method entity.name.function#FB4934—
meta.function entity.name.function#83A598—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#8EC07C—
meta.embedded, source.groovy.embedded, meta.template.expression#FBF1C7—
entity.name.tag.yaml#FB4934—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#FB4934—
constant.language.json#8EC07C—
entity.other.attribute-name.class#FABD2F—
entity.other.attribute-name.id#D65D0E—
source.css entity.name.tag#FABD2F—
support.type.property-name.css#A89984—
meta.tag, punctuation.definition.tag#8EC07C—
entity.name.tag#FB4934—
entity.other.attribute-name#D3869B—
punctuation.definition.entity.html#FBF1C7—
markup.heading#8EC07C—
text.html.markdown meta.link.inline, meta.link.reference#FB4934—
text.html.markdown beginning.punctuation.definition.list#8EC07C—
markup.italic#FB4934italic
markup.bold#FB4934bold
markup.bold markup.italic, markup.italic markup.bold#FB4934italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#B8BB26—
markup.inline.raw.string.markdown#B8BB26—
keyword.other.definition.ini#FB4934—
entity.name.section.group-title.ini#8EC07C—
source.cs meta.class.identifier storage.type#FABD2F—
source.cs meta.method.identifier entity.name.function#FB4934—
source.cs meta.method-call meta.method, source.cs entity.name.function#83A598—
source.cs storage.type#FABD2F—
source.cs meta.method.return-type#FABD2F—
source.cs meta.preprocessor#928374—
source.cs entity.name.type.namespace#FBF1C7—
meta.jsx.children, SXNested#FBF1C7—
support.class.component#FABD2F—
source.cpp meta.block variable.other#FBF1C7—
source.python meta.member.access.python#FB4934—
source.python meta.function-call.python, meta.function-call.arguments#83A598—
meta.block#FB4934—
entity.name.function.call#83A598—
source.php support.other.namespace, source.php meta.use support.class#FBF1C7—
constant.keyword#8EC07Citalic
entity.name.function#83A598—
Global settings#FBF1C7—
constant.other.placeholder#FB4934—
markup.deleted#FB4934—
markup.inserted#B8BB26—
markup.underline—underline
keyword.control#8EC07Citalic
variable.parameter—italic
variable.parameter.function.language.special.self.python#FB4934italic
constant.character.format.placeholder.other.python#D65D0E—
markup.quote#8EC07Citalic
markup.fenced_code.block#FBF1C790—
punctuation.definition.quote#FE8019—
meta.structure.dictionary.json support.type.property-name.json#D3869B—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FABD2F—
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#D65D0E—
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#FB4934—
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#83A598—
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#FE8019—
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#D3869B—
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#B8BB26—
Material Nova — Premium VS Code Theme by Dhaval Kurkutiya - VS Code Theme