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#131018
  • activityBar.border#00000000
  • activityBar.foreground#ffffff
  • activityBarBadge.background#44afe3
  • badge.background#44afe3
  • badge.foreground#ffffff
  • breadcrumb.foreground#c9b9df
  • button.background#7154a0
  • button.hoverBackground#8167aa
  • checkbox.background#000000
  • checkbox.border#ffffff22
  • checkbox.foreground#ffffff
  • debugExceptionWidget.border#ff0000
  • descriptionForeground#ffefffaa
  • dropdown.background#000000ee
  • dropdown.border#ffffff22
  • dropdown.foreground#ffffff
  • dropdown.listBackground#000000cc
  • editor.background#272431
  • editor.findMatchBackground#44afe3aa
  • editor.findMatchBorder#44afe3
  • editor.findMatchHighlightBackground#44afe366
  • editor.findRangeHighlightBackground#44afe366
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#9a80bb33
  • editor.inactiveSelectionBackground#9a80bb55
  • editor.lineHighlightBackground#9a80bb22
  • editor.selectionBackground#9a80bb33
  • editor.selectionHighlightBackground#9a80bb55
  • editor.selectionHighlightBorder#00000000
  • editor.symbolHighlightBackground#ffce03
  • editorBracketMatch.background#44afe3
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#ffffff
  • editorError.foreground#d71b5d
  • editorGroup.border#00000000
  • editorGroup.dropBackground#44afe3bb
  • editorGroup.emptyBackground#00000000
  • editorGroupHeader.tabsBackground#131018
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#56be92
  • editorGutter.commentRangeForeground#d2bba2
  • editorGutter.deletedBackground#d71b5d
  • editorGutter.modifiedBackground#ffce03
  • editorHoverWidget.background#131018
  • editorHoverWidget.border#00000000
  • editorHoverWidget.foreground#ffffff
  • editorIndentGuide.activeBackground#9a80bbaa
  • editorIndentGuide.background#9a80bb44
  • editorLineNumber.activeForeground#9a80bbcc
  • editorLineNumber.foreground#9a80bb77
  • editorLink.activeForeground#44afe3
  • editorWarning.foreground#d71b5d
  • editorWhitespace.foreground#9a80bb66
  • editorWidget.background#131018
  • editorWidget.border#00000000
  • editorWidget.foreground#ffffff
  • focusBorder#7154a033
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#56be92
  • gitDecoration.conflictingResourceForeground#d7661b
  • gitDecoration.deletedResourceForeground#d71b5d
  • gitDecoration.ignoredResourceForeground#ffefff55
  • gitDecoration.modifiedResourceForeground#ffce03
  • gitDecoration.submoduleResourceForeground#44afe3
  • gitDecoration.untrackedResourceForeground#56be92
  • icon.foreground#7154a0
  • input.background#ffffff
  • input.foreground#1a1229
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#9a80bb55
  • inputOption.activeBorder#00000000
  • inputValidation.errorBackground#c50f4f
  • inputValidation.errorBorder#c50f4f
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#9a80bb
  • inputValidation.infoBorder#9a80bb
  • inputValidation.infoForeground#333333
  • inputValidation.warningBackground#ffce03
  • inputValidation.warningBorder#ffce03
  • inputValidation.warningForeground#333333
  • list.activeSelectionBackground#482d78
  • list.dropBackground#383b3d
  • list.filterMatchBackground#3b916d
  • list.focusBackground#482d7866
  • list.hoverBackground#482d7866
  • list.hoverForeground#ffefffdd
  • list.inactiveSelectionBackground#482d7866
  • listFilterWidget.background#3b916d
  • listFilterWidget.noMatchesOutline#d71b5d
  • listFilterWidget.outline#3b916d
  • menu.background#252526
  • menu.foreground#cccccc
  • panel.background#131018
  • panel.border#00000000
  • panel.dropBackground#ff0000
  • scrollbarSlider.activeBackground#ffefff77
  • scrollbarSlider.background#ffefff33
  • scrollbarSlider.hoverBackground#ffefff55
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#ffce03
  • settings.numberInputBackground#ffffff
  • settings.textInputBackground#ffffff
  • settings.textInputBorder#00000000
  • sideBar.background#131018
  • sideBar.border#ffffff22
  • sideBar.foreground#ffefffaa
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#44afe3
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorderTop#9a80bb
  • tab.activeModifiedBorder#ff0000
  • tab.hoverBackground#322d41
  • tab.inactiveBackground#00000000
  • tab.inactiveModifiedBorder#ff0000
  • tab.unfocusedActiveModifiedBorder#ff0000
  • tab.unfocusedHoverBackground#322d41
  • tab.unfocusedInactiveModifiedBorder#ff0000
  • terminal.ansiBrightRed#d71b5d
  • textLink.activeForeground#9a80bb
  • textLink.foreground#9a80bb
  • titleBar.activeBackground#131018
  • titleBar.inactiveBackground#131018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
comment#9A80BB78
string#BEA2E0
constant.numeric#9959FF
constant.language#9959FF
constant.character, constant.other#9959FF
variable#EEE3FF
keyword#F23074
storage#F23074
storage.type#7AD3FFitalic
entity.name.class#54C898underline
entity.other.inherited-class#54C898italic underline
entity.name.function#54C898
variable.parameter#FFCE03italic
entity.name.tag#F23074
entity.other.attribute-name#A6E22E
support.function#7AD3FF
support.constant#7AD3FF
support.type, support.class#7AD3FFitalic
support.other.variable#FFFFFF
invalid#F8F8F0
invalid.deprecated#F8F8F0
Meadow Color Theme by Timothy Kempf - VS Code Theme