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.underlineunderline
keyword.control#8EC07Citalic
variable.parameteritalic
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