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#000000
  • activityBar.dropBorder#09e7fb
  • activityBar.foreground#e0e7ff
  • activityBarBadge.background#09e7fb
  • activityBarBadge.foreground#000000
  • badge.background#000000
  • badge.foreground#e0e7ff
  • breadcrumb.activeSelectionForeground#09e7fb
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#e0e7ff
  • breadcrumb.foreground#525975
  • breadcrumbPicker.background#000000
  • button.background#717cb450
  • button.foreground#e0e7ff
  • checkbox.background#00000000
  • checkbox.foreground#e0e7ff
  • debugToolBar.background#000000
  • descriptionForeground#e0e7ff
  • diffEditor.insertedTextBackground#09e7fb15
  • diffEditor.removedTextBackground#de216320
  • dropdown.background#000000
  • dropdown.border#00000000
  • dropdown.foreground#e0e7ff
  • editor.background#000000
  • editor.foreground#e0e7ff
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#717cb450
  • editorCursor.foreground#09e7fb
  • editorError.foreground#de2163
  • editorGroup.border#00000000
  • editorGroup.dropBackground#00000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#09e7fb60
  • editorGutter.deletedBackground#de216360
  • editorGutter.modifiedBackground#00ffd860
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#e0e7ff10
  • editorIndentGuide.activeBackground#3b3f51
  • editorIndentGuide.background#3b3f51bb
  • editorInfo.foreground#00ffd8
  • editorLineNumber.foreground#3b3f51bb
  • editorLink.activeForeground#09e7fb
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#de2163
  • editorOverviewRuler.infoForeground#00ffd8
  • editorOverviewRuler.warningForeground#dec32c
  • editorRuler.foreground#3b3f51bb
  • editorSuggestWidget.selectedBackground#717cb450
  • editorWarning.foreground#dec32c
  • editorWidget.background#000000
  • editorWidget.border#000000
  • editorWidget.resizeBorder#09e7fb
  • errorForeground#dec32c
  • extensionButton.prominentBackground#09e7fb90
  • extensionButton.prominentHoverBackground#09e7fb
  • focusBorder#000000
  • gitDecoration.conflictingResourceForeground#00ffd890
  • gitDecoration.deletedResourceForeground#de216390
  • gitDecoration.ignoredResourceForeground#52597590
  • gitDecoration.modifiedResourceForeground#00ffd890
  • gitDecoration.untrackedResourceForeground#09e7fb90
  • input.background#0e131a
  • input.border#00000000
  • input.foreground#e0e7ff
  • input.placeholderForeground#e0e7ff60
  • inputOption.activeBackground#00000000
  • inputOption.activeForeground#09e7fb
  • inputValidation.errorForeground#de216350
  • inputValidation.infoForeground#00ffd850
  • inputValidation.warningForeground#dec32c50
  • list.activeSelectionBackground#00000000
  • list.activeSelectionForeground#e0e7ff
  • list.errorForeground#de2163
  • list.filterMatchBackground#717cb450
  • list.focusBackground#00000000
  • list.focusForeground#09e7fb
  • list.highlightForeground#09e7fb
  • list.hoverBackground#00000000
  • list.hoverForeground#e0e7ff
  • list.inactiveSelectionBackground#00000000
  • list.inactiveSelectionForeground#e0e7ff
  • list.warningForeground#dec32c
  • listFilterWidget.background#00000000
  • listFilterWidget.noMatchesOutline#00000000
  • listFilterWidget.outline#00000000
  • menu.background#000000
  • menu.foreground#e0e7ff
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000000
  • menu.selectionForeground#09e7fb
  • menu.separatorBackground#e0e7ff
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#09e7fb
  • notificationLink.foreground#09e7fb
  • notifications.background#000000
  • notifications.foreground#e0e7ff
  • panel.background#000000
  • panel.border#00000000
  • panel.dropBackground#00000000
  • panelTitle.activeBorder#09e7fb
  • panelTitle.activeForeground#e0e7ff
  • panelTitle.inactiveForeground#525975
  • peekView.border#000000
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#717cb450
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#717cb450
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#e0e7ff60
  • peekViewTitleLabel.foreground#e0e7ff
  • pickerGroup.foreground#09e7fb
  • progressBar.background#09e7fb
  • quickInputList.focusBackground#717cb450
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#e0e7ff30
  • scrollbarSlider.background#e0e7ff20
  • scrollbarSlider.hoverBackground#e0e7ff25
  • settings.checkboxBackground#000000
  • settings.checkboxForeground#e0e7ff
  • settings.dropdownBackground#000000
  • settings.dropdownForeground#e0e7ff
  • settings.headerForeground#09e7fb
  • settings.modifiedItemIndicator#09e7fb
  • settings.numberInputBackground#000000
  • settings.numberInputForeground#e0e7ff
  • settings.textInputBackground#000000
  • settings.textInputForeground#e0e7ff
  • sideBar.background#000000
  • sideBar.border#00000000
  • sideBar.foreground#525975
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#525975
  • sideBarTitle.foreground#e0e7ff
  • statusBar.background#000000
  • statusBar.debuggingBackground#09e7fb
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#4b526d
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#717cb450
  • tab.activeBorder#09e7fb
  • tab.activeForeground#e0e7ff
  • tab.border#00000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#525975
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#09e7fb
  • terminal.ansiBrightBlack#e0e7ffbb
  • terminal.ansiBrightBlue#09e7fb
  • terminal.ansiBrightCyan#09e7fb
  • terminal.ansiBrightGreen#00ffd8
  • terminal.ansiBrightMagenta#de2163
  • terminal.ansiBrightRed#de2163
  • terminal.ansiBrightWhite#e0e7ff
  • terminal.ansiBrightYellow#dec32c
  • terminal.ansiCyan#09e7fb
  • terminal.ansiGreen#00ffd8
  • terminal.ansiMagenta#de2163
  • terminal.ansiRed#de2163
  • terminal.ansiWhite#e0e7ff
  • terminal.ansiYellow#dec32c
  • terminal.foreground#e0e7ff
  • textLink.foreground#09e7fb
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#e0e7ff
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#525975

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name, support#09e7fb
keyword, storage#00ffd8
entity.name.variable, string#e0e7ff
constant#f78c6c
comment, punctuation.definition.comment#e0e7ffbbitalic
punctuation#e0e7ff
*url*, *uri*, *link*underline
source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json#09e7fb
source.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json meta.structure.dictionary.json support.type.property-name.json#00ffd8
markup.heading, punctuation.definition.list.begin.markdown#00ffd8
markup.boldbold
markup.italic, markup.quoteitalic
markup.underlineunderline
Dominator by tomocy - VS Code Theme