Skip to main content
Coding Theme

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#1E272C
  • activityBarBadge.background#7FC1CA
  • activityBarBadge.foreground#3C4C55
  • badge.background#7FC1CA
  • badge.foreground#3C4C55
  • button.background#7FC1CA
  • button.foreground#3C4C55
  • debugExceptionWidget.background#DF8C8C
  • debugExceptionWidget.border#DF8C8C
  • debugToolBar.background#1E272C
  • diffEditor.insertedTextBackground#A8CE930C
  • diffEditor.insertedTextBorder#A8CE93
  • diffEditor.removedTextBackground#DF8C8C0C
  • diffEditor.removedTextBorder#DF8C8C
  • dropdown.foreground#7FC1CA
  • editor.background#3C4C55
  • editor.findMatchBackground#6A7D89
  • editor.findMatchHighlightBackground#6A7D89
  • editor.findRangeHighlightBackground#556873
  • editor.foreground#C5D4DD
  • editor.inactiveSelectionBackground#556873
  • editor.lineHighlightBackground#556873
  • editor.selectionBackground#6A7D89
  • editor.wordHighlightBackground#556873
  • editor.wordHighlightStrongBackground#556874
  • editorGroup.background#1E272C
  • editorGroup.border#899BA6
  • editorGroupHeader.noTabsBackground#1E272C
  • editorGroupHeader.tabsBackground#1E272C
  • editorGutter.addedBackground#A8CE93
  • editorGutter.deletedBackground#DF8C8C
  • editorGutter.modifiedBackground#83AFE5
  • editorHoverWidget.background#556873
  • editorHoverWidget.border#3C4C55
  • editorIndentGuide.background#556873
  • editorLineNumber.activeForeground#7FC1CA
  • editorLineNumber.foreground#6A7D89
  • editorOverviewRuler.addedForeground#A8CE93
  • editorOverviewRuler.deletedForeground#DF8C8C
  • editorOverviewRuler.modifiedForeground#F2C38F
  • editorSuggestWidget.background#556873
  • editorSuggestWidget.border#556873
  • editorSuggestWidget.highlightForeground#7FC1CA
  • editorSuggestWidget.selectedBackground#6A7D89
  • editorWidget.background#3C4C55
  • editorWidget.border#3C4C55
  • extensionButton.prominentBackground#7FC1CA
  • extensionButton.prominentForeground#3C4C55
  • extensionButton.prominentHoverBackground#7FC1CA
  • input.background#556873
  • input.border#556873
  • input.foreground#7FC1CA
  • input.placeholderForeground#d8dee9
  • inputOption.activeBorder#7FC1CA
  • inputValidation.errorBackground#DF8C8C
  • inputValidation.errorBorder#DF8C8C
  • list.activeSelectionBackground#7FC1CA
  • list.activeSelectionForeground#3C4C55
  • list.focusBackground#1E272C
  • list.focusForeground#7FC1CA
  • list.highlightForeground#7FC1CA
  • list.hoverBackground#6A7D89
  • list.inactiveSelectionBackground#3C4C55
  • list.inactiveSelectionForeground#7FC1CA
  • notification.background#3C4C55
  • notification.buttonBackground#556873
  • notification.errorBackground#DF8C8C
  • notification.errorForeground#3C4C55
  • notification.warningBackground#F2C38F
  • notification.warningForeground#3C4C55
  • panelTitle.activeBorder#7FC1CA
  • panelTitle.activeForeground#7FC1CA
  • peekView.border#1E272C
  • peekViewEditor.background#3C4C55
  • peekViewResult.background#1E272C
  • peekViewResult.selectionBackground#7FC1CA
  • peekViewResult.selectionForeground#3C4C55
  • peekViewTitle.background#1E272C
  • progressBar.background#7FC1CA
  • scrollbar.shadow#3C4C55
  • scrollbarSlider.background#7FC1CA
  • sideBar.background#1E272C
  • statusBar.background#1E272C
  • statusBar.debuggingBackground#DF8C8C
  • tab.activeBackground#3C4C55
  • tab.activeBorder#3C4C55
  • tab.activeForeground#7FC1CA
  • tab.border#1E272C
  • tab.inactiveBackground#1E272C
  • tab.inactiveForeground#6A7D89
  • terminal.ansiBlack#3C4C55
  • terminal.ansiBlue#83AFE5
  • terminal.ansiBrightBlack#899BA6
  • terminal.ansiBrightMagenta#D18EC2
  • terminal.ansiBrightWhite#E6EEF3
  • terminal.ansiCyan#7FC1CA
  • terminal.ansiGreen#A8CE93
  • terminal.ansiMagenta#9A93E1
  • terminal.ansiRed#DF8C8C
  • terminal.ansiWhite#C5D4DD
  • terminal.ansiYellow#DADA93
  • terminal.background#3C4C55
  • terminal.foreground#C5D4DD
  • titleBar.activeBackground#1E272C
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis#D18EC2italic
strong—bold
comment, meta.selector#899BA6—
constant.language, constant.numeric, string, markup.inline.raw, meta.brace.square#7FC1CA—
entity.name.tag.css#F2C38F—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#D18EC2—
markup#D18EC2—
markup.underline—underline
markup.bold—bold
markup.italic—italic
markup.heading#F2C38Fbold
storage#A8CE93—
header, markup.heading.markdown, beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown, punctuation.definition.tag, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.definition.block, entity.name.tag.tsx, meta.brace.round, storage.type.function.arrow#F2C38F—
support.function, entity.name.function, keyword.operator.assignment#DADA93—
variable.language, keyword, support.class, entity.name.class, entity.name.type.class#9A93E1—
entity.other.attribute-name.tsx, support.type.property-name, meta.object-literal.key, entity.name.function, entity.name.tag, meta.definition.variable, meta.function.expression, variable.parameter, variable.other.readwrite source, variable.other.readwrite.alias, variable.other.object#83AFE5—
support.variable.property#C5D4DD—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

nova - Coding Theme