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.activeBackground#bababa
  • activityBar.activeBorder#bababa
  • activityBar.background#aaaaaa
  • activityBar.foreground#000000
  • activityBarBadge.background#aa0000
  • activityBarBadge.foreground#c1c1c1
  • badge.background#aa0000
  • button.background#bababa
  • button.foreground#000000
  • button.hoverBackground#d4d4d4
  • contrastBorder#bababa
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#aa0000
  • diffEditor.insertedTextBackground#00aa00
  • diffEditor.removedTextBackground#aa0000
  • dropdown.background#aaaaaa
  • dropdown.border#bababa
  • dropdown.foreground#000000
  • editor.background#0000aa
  • editor.findMatchBackground#aa00aa
  • editor.findMatchHighlightBackground#720072
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#5e5e5e
  • editor.lineHighlightBackground#ffffff44
  • editor.selectionBackground#aaaaaa
  • editor.selectionHighlightBackground#5e5e5e
  • editorCursor.foreground#ffffff
  • editorGroup.border#bababa
  • editorGroup.emptyBackground#aaaaaa
  • editorGroupHeader.noTabsBackground#00aaaa
  • editorGroupHeader.tabsBackground#00aaaa
  • editorHoverWidget.background#00aa00
  • editorHoverWidget.border#aaaaaa
  • editorHoverWidget.foreground#ffffff
  • editorIndentGuide.activeBackground#bababa
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#aaaaaa
  • editorMarkerNavigation.background#aa0000
  • editorMarkerNavigationError.background#aa0000
  • editorMarkerNavigationWarning.background#aa0000
  • editorSuggestWidget.background#aaaaaa
  • editorSuggestWidget.border#bababa
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#ffff55
  • editorWhitespace.foreground#ffffff26
  • editorWidget.background#aa0000
  • extensionButton.prominentBackground#696969
  • extensionButton.prominentHoverBackground#a00
  • focusBorder#bababa
  • foreground#ffffff
  • input.background#bababa
  • input.border#bababa
  • input.foreground#000000
  • input.placeholderForeground#696969
  • inputOption.activeBorder#000000
  • inputValidation.errorBackground#aa0000
  • inputValidation.errorBorder#ff5555
  • inputValidation.infoBackground#55ffff
  • inputValidation.infoBorder#00aaaa
  • inputValidation.warningBackground#ffff55
  • inputValidation.warningBorder#bababa
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#00aaaa
  • list.activeSelectionForeground#000000
  • list.focusBackground#00aaaa
  • list.highlightForeground#000000
  • list.hoverBackground#00aaaa
  • list.inactiveSelectionBackground#00aaaa
  • list.invalidItemForeground#ff5555
  • list.warningForeground#a00
  • notificationCenterHeader.background#aa00aa
  • notificationCenterHeader.foreground#ffffff
  • notifications.background#bababa
  • notifications.border#aaaaaa
  • notifications.foreground#ffffff
  • panel.background#9e009e
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#cccccc
  • peekView.border#aaaaaa
  • peekViewEditor.background#0000aa
  • peekViewEditor.matchHighlightBackground#aaaaaa
  • peekViewResult.background#aaaaaa
  • peekViewResult.fileForeground#000000
  • peekViewResult.lineForeground#000000
  • peekViewResult.selectionBackground#aa00aa
  • peekViewResult.selectionForeground#000000
  • peekViewTitle.background#5555ff
  • pickerGroup.border#bababa
  • pickerGroup.foreground#cccccc
  • scrollbar.shadow#aaaaaa
  • scrollbarSlider.activeBackground#000000
  • scrollbarSlider.background#000000
  • scrollbarSlider.hoverBackground#000000
  • settings.focusedRowBackground#0aa
  • settings.headerForeground#ffffff
  • sideBar.background#aaaaaa
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#5555ff
  • sideBarSectionHeader.foreground#bababa
  • sideBarTitle.foreground#000000
  • statusBar.background#00aaaa
  • statusBar.debuggingBackground#aa0000
  • statusBar.debuggingForeground#aaa
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#00aaaa
  • tab.activeBackground#00aaaa
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#00aaaa
  • tab.inactiveForeground#000000
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0000AA
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#5555ff
  • terminal.ansiBrightCyan#55ffff
  • terminal.ansiBrightGreen#55ff55
  • terminal.ansiBrightMagenta#ff55ff
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff55
  • terminal.ansiCyan#00aaaa
  • terminal.ansiGreen#00aa00
  • terminal.ansiMagenta#aa00aa
  • terminal.ansiRed#aa0000
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#e8e851
  • terminal.background#000000
  • textBlockQuote.background#0000aa
  • textLink.activeForeground#55ffff
  • textLink.foreground#696969
  • titleBar.activeBackground#aaaaaa
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#aaaaaa
  • titleBar.inactiveForeground#000000
  • welcomePage.background#aaaaaa
  • welcomePage.buttonBackground#aaa
  • welcomePage.buttonHoverBackground#0aa
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffffff
punctuation - (punctuation.definition.string || punctuation.definition.comment)#ffffffff
constant#55ffff
entity#ffff55
keyword#ff55ff
storage#ff55ff
string -string.unquoted.old-plist -string.unquoted.heredoc, string.unquoted.heredoc string#ffffffff
comment#828282italic
support#55ffff
variable#ffffffff
variable.language#ffffffff
meta.function-call#ffff55
invalid#f8f8f8
text source, string.unquoted.heredoc, source source#ffffff
entity.other.inherited-class#ffffffitalic
string.quoted source#ffffff
string constant#ffffff
string.regexp#55ff55
string variable#ff5555
support.function#ffff55
support.constant#ffffff
support.type.exception#ff5555
meta.preprocessor.c#ffffff
meta.preprocessor.c keyword#ffffff
meta.sgml.html meta.doctype, meta.sgml.html meta.doctype entity, meta.sgml.html meta.doctype string, meta.xml-processing, meta.xml-processing entity, meta.xml-processing string#ffff55
meta.tag, meta.tag entity#ffffff
meta.selector.css entity.name.tag#ffffff
meta.selector.css entity.other.attribute-name.id#ffff55
meta.selector.css entity.other.attribute-name.class#ffff55
support.type.property-name.css#ffffff
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#ffffff
meta.preprocessor.at-rule keyword.control.at-rule#ff55ff
meta.property-value support.constant.named-color.css, meta.property-value constant#55ff55
meta.constructor.argument.css#ff5555
meta.diff, meta.diff.header#ffffff
markup.deleted#f8f8f8
markup.changed#f8f8f8
markup.inserted#f8f8f8
markup.raw
markup.quote
markup.list
markup.bold#55ffffbold
markup.italic#55ffffitalic
markup.heading#55ffffbold
token.info-token#5555ff
token.warn-token#ffff55
token.error-token#ff5555
token.debug-token#ff55ff

Shiki preview

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

Loading...

Word - Coding Theme