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.background#20242D
  • activityBar.foreground#52606B
  • activityBarBadge.background#C7C8FF
  • activityBarBadge.foreground#20242D
  • background#272B34
  • badge.background#C7C8FF
  • badge.foreground#20242D
  • button.background#6CA9FF
  • descriptionForeground#C7C8FF
  • diffEditor.insertedTextBackground#A1EF9D33
  • diffEditor.removedTextBackground#F86F6533
  • dropdown.background#20242D
  • editor.background#272B34
  • editor.findMatchBackground#6CA9FF33
  • editor.findMatchHighlightBackground#6CA9FF55
  • editor.findRangeHighlightBackground#67DCF933
  • editor.foreground#C7C8FF
  • editor.hoverHighlightBackground#20242D
  • editor.lineHighlightBackground#2B2E3B
  • editorBracketMatch.border#757694
  • editorCodeLens.foreground#52606B
  • editorCursor.foreground#6CA9FF
  • editorError.foreground#F86F65
  • editorGroupHeader.tabsBackground#20242D
  • editorGutter.addedBackground#A1EF9D
  • editorGutter.background#272B34
  • editorGutter.deletedBackground#F86F65
  • editorGutter.modifiedBackground#6CA9FF
  • editorHoverWidget.background#20242D
  • editorHoverWidget.border#404859
  • editorLineNumber.activeForeground#757694
  • editorLineNumber.foreground#52606B
  • editorLink.activeForeground#67DCF9
  • editorSuggestWidget.background#272B34
  • editorSuggestWidget.border#404859
  • editorSuggestWidget.foreground#C7C8FF
  • editorSuggestWidget.highlightForeground#6CA9FF
  • editorSuggestWidget.selectedBackground#20242D
  • editorWarning.foreground#FDC64D
  • editorWidget.background#20242D
  • focusBorder#272B34
  • foreground#C7C8FF
  • gitDecoration.conflictingResourceForeground#FDC64D
  • gitDecoration.deletedResourceForeground#F86F65
  • gitDecoration.ignoredResourceForeground#757694
  • gitDecoration.modifiedResourceForeground#67DCF9
  • gitDecoration.untrackedResourceForeground#A1EF9D
  • input.background#272B34
  • input.foreground#C7C8FF
  • input.placeholderForeground#757694
  • inputOption.activeBorder#6CA9FF
  • inputValidation.errorBackground#F86F6588
  • inputValidation.errorBorder#F86F65
  • inputValidation.infoBackground#6CA9FF88
  • inputValidation.infoBorder#6CA9FF
  • inputValidation.warningBackground#FDC64D88
  • inputValidation.warningBorder#FDC64D
  • list.activeSelectionBackground#272B34
  • list.activeSelectionForeground#C7C8FF
  • list.focusBackground#272B34
  • list.focusForeground#C7C8FF
  • list.highlightForeground#6CA9FF
  • list.hoverBackground#272B34
  • list.inactiveSelectionBackground#272B34
  • list.inactiveSelectionForeground#C7C8FF
  • merge.currentContentBackground#A1EF9D33
  • merge.currentHeaderBackground#A1EF9D88
  • merge.incomingContentBackground#6CA9FF33
  • merge.incomingHeaderBackground#6CA9FF88
  • notification.background#272B34
  • notification.buttonBackground#6CA9FF
  • notification.buttonForeground#272B34
  • notification.buttonHoverBackground#6CA9FF
  • notification.errorBackground#272B34
  • notification.errorForeground#F86F65
  • notification.foreground#C7C8FF
  • notification.infoBackground#272B34
  • notification.infoForeground#67DCF9
  • notification.warningBackground#272B34
  • notification.warningForeground#FDC64D
  • panel.background#20242D
  • panel.border#20242D
  • panelTitle.activeForeground#C7C8FF
  • panelTitle.inactiveForeground#757694
  • peekView.order#20242D
  • peekViewEditor.background#20242D
  • peekViewEditor.matchHighlightBackground#D983F533
  • peekViewResult.background#20242D
  • peekViewResult.fileForeground#757694
  • peekViewResult.lineForeground#757694
  • peekViewResult.matchHighlightBackground#D983F533
  • peekViewResult.selectionBackground#272B34
  • peekViewResult.selectionForeground#C7C8FF
  • peekViewTitle.background#20242D
  • peekViewTitleDescription.foreground#C7C8FF
  • peekViewTitleLabel.foreground#C7C8FF
  • progressBar.background#6CA9FF
  • scrollbar.shadow#272B34
  • selection.background#6CA9FF88
  • sideBar.background#20242D
  • sideBar.foreground#C7C8FFCC
  • sideBarSectionHeader.background#20242D
  • sideBarSectionHeader.foreground#6CA9FF
  • sideBarTitle.foreground#6CA9FF
  • statusBar.background#20242D
  • statusBar.debuggingBackground#F86F65
  • statusBar.debuggingForeground#272B34
  • statusBar.foreground#757694
  • statusBar.noFolderBackground#20242D
  • statusBar.noFolderForeground#757694
  • statusBarItem.hoverBackground#272B34
  • statusBarItem.prominentBackground#C7C8FF
  • tab.activeBackground#272B34
  • tab.activeForeground#C7C8FF
  • tab.inactiveBackground#20242D
  • tab.inactiveForeground#757694
  • textLink.activeForeground#37CCFF
  • textLink.foreground#6CA9FF
  • textSeparator.foreground#757694
  • titleBar.activeBackground#20242D
  • titleBar.activeForeground#C7C8FF
  • titleBar.inactiveForeground#757694
  • widget.shadow#20242D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#52606Bitalic
support.function#6CA9FF—
storage.type#D983F5italic
support.class—bold
punctuation.definition.template-expression#A1EF9Dbold
meta.brace.round#C7C8FF—
constant.language.boolean#C7C8FFbold
storage.type.string.go—italic
variable.other.object#67DCF9bold
variable.object.property#C7C8FFbold
meta.import variable.other#37CCFFbold
keyword#D983F5—
string#A1EF9D—
entity.name.function#37CCFF—
entity.other.attribute-name#37CCFFitalic
entity.name.tag, support.type.property-name#D983F5—
source.css keyword.other.unit#C7C8FF—
support.constant.property-value#37CCFFitalic
meta.object-literal.key#D983F5italic
meta.tag.sgml.doctype#67DCF9italic
meta.tag.sgml.doctype punctuation.definition.tag#C7C8FF—
meta.tag.sgml.doctype variable.language.documentroot#FDC64D—
entity.name.tag.css#FDC64D—
markup.quote#D983F5italic
markup.heading#67DCF9bold
markup.italic—italic
markup.bold—bold
meta.separator#67DCF9—
meta.link.reference.def#D983F5—
beginning.punctuation.definition.list#A1EF9D—
string.other.link.title#A1EF9D—
markup.underline.link#37CCFF—
markup.inline.raw#FDC64D—
entity.name.type.org#67DCF9bold
punctuation.definition.tag.org#52606B—
block.language.org#A1EF9D99italic
support.type.property-name.org#67DCF9—
meta.structure.dictionary.value.org#A1EF9D—
punctuation.definition.block.sequence.item#A1EF9D—
entity.name.function.go#67DCF9italic
support.function.go#37CCFF—
string.quoted.double.yaml, string.quoted.single.yaml#A1EF9D—
string.unquoted.plain.out.yaml#C8C8FF—
entity.name.section.group-title.ini, punctuation.definition.entity.ini#37CCFF—
support.type.property-name.json#C7C8FFitalic
constant.language.json#37CCFFitalic
string.quoted.double.json#D983F5—
string.quoted.double.jsonnet#D983F5—
meta.function-call entity.name.function#C7C8FFbold
variable.other.object.ts—bold
variable.other.object.property.ts#67DCF9—
meta.parameters.ts#C7C8FFbold
meta.type.annotation.ts#67DCF9italic
Allegory Theme by selfrefactor - VS Code Theme