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.activeBorder#00aa66
  • activityBar.background#f5f6f7
  • activityBar.border#e3e5e8
  • activityBar.foreground#00aa66
  • activityBar.inactiveForeground#6a6d72
  • activityBarBadge.background#cc0055
  • activityBarBadge.foreground#ffffff
  • badge.background#cc0055
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#00aa66
  • breadcrumb.focusForeground#00aa66
  • breadcrumb.foreground#6a6d72
  • breadcrumbPicker.background#f5f6f7
  • button.background#00aa66
  • button.foreground#ffffff
  • button.hoverBackground#00cc77
  • button.secondaryBackground#e3e5e8
  • button.secondaryForeground#2b2d31
  • button.secondaryHoverBackground#d0d2d5
  • dropdown.background#f5f6f7
  • dropdown.border#00aa6860
  • dropdown.foreground#2b2d31
  • editor.background#ffffff
  • editor.findMatchBackground#cc005590
  • editor.findMatchHighlightBackground#cc005540
  • editor.foreground#2b2d31
  • editor.inactiveSelectionBackground#e3e5e8
  • editor.lineHighlightBackground#f8f9fa
  • editor.selectionBackground#00aa6630
  • editorBracketMatch.background#00aa6840
  • editorBracketMatch.border#00aa66
  • editorCursor.foreground#00aa66
  • editorError.foreground#cc0055
  • editorGroup.border#00aa6840
  • editorGroupHeader.tabsBackground#f5f6f7
  • editorGroupHeader.tabsBorder#e3e5e8
  • editorHint.foreground#00aa66
  • editorHoverWidget.background#f5f6f7
  • editorHoverWidget.border#00aa6860
  • editorIndentGuide.activeBackground#00aa6660
  • editorIndentGuide.background#e3e5e8
  • editorInfo.foreground#00aacc
  • editorLineNumber.activeForeground#00aa66
  • editorLineNumber.foreground#b8bcc2
  • editorRuler.foreground#e3e5e8
  • editorSuggestWidget.background#f5f6f7
  • editorSuggestWidget.border#00aa6860
  • editorSuggestWidget.highlightForeground#00aa66
  • editorSuggestWidget.selectedBackground#00aa6630
  • editorWarning.foreground#cc8800
  • editorWhitespace.foreground#e3e5e8
  • editorWidget.background#f5f6f7
  • editorWidget.border#00aa6860
  • focusBorder#00aa6860
  • gitDecoration.conflictingResourceForeground#cc00cc
  • gitDecoration.deletedResourceForeground#cc0055
  • gitDecoration.ignoredResourceForeground#b8bcc2
  • gitDecoration.modifiedResourceForeground#cc8800
  • gitDecoration.untrackedResourceForeground#00aa66
  • input.background#f5f6f7
  • input.border#00aa6860
  • input.foreground#2b2d31
  • input.placeholderForeground#6a6d72
  • inputOption.activeBackground#00aa6630
  • inputOption.activeBorder#00aa66
  • list.activeSelectionBackground#00aa6630
  • list.activeSelectionForeground#000000
  • list.highlightForeground#00aa66
  • list.hoverBackground#f8f9fa
  • list.inactiveSelectionBackground#e3e5e8
  • menu.background#f5f6f7
  • menu.foreground#2b2d31
  • menu.selectionBackground#00aa6840
  • menu.selectionForeground#000000
  • menu.separatorBackground#00aa6840
  • menubar.selectionBackground#00aa6840
  • menubar.selectionForeground#000000
  • notificationCenter.border#00aa6860
  • notificationCenterHeader.background#f5f6f7
  • notificationLink.foreground#00aa66
  • notifications.background#f5f6f7
  • notifications.border#00aa6860
  • panel.background#ffffff
  • panel.border#00aa6840
  • panelTitle.activeBorder#00aa66
  • panelTitle.activeForeground#00aa66
  • panelTitle.inactiveForeground#6a6d72
  • peekView.border#00aa66
  • peekViewEditor.background#f5f6f7
  • peekViewResult.background#f5f6f7
  • peekViewTitle.background#f5f6f7
  • scrollbarSlider.activeBackground#00aa6680
  • scrollbarSlider.background#00aa6640
  • scrollbarSlider.hoverBackground#00aa6660
  • sideBar.background#ffffff
  • sideBar.border#e3e5e8
  • sideBar.foreground#2b2d31
  • sideBarSectionHeader.background#f5f6f7
  • sideBarSectionHeader.border#00aa6840
  • sideBarSectionHeader.foreground#00aa66
  • sideBarTitle.foreground#00aa66
  • statusBar.background#f5f6f7
  • statusBar.border#00aa6840
  • statusBar.debuggingBackground#cc0055
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#00aa66
  • statusBar.noFolderBackground#f5f6f7
  • tab.activeBackground#ffffff
  • tab.activeBorder#00aa66
  • tab.activeBorderTop#00aa66
  • tab.activeForeground#00aa66
  • tab.border#f5f6f7
  • tab.hoverBackground#f8f9fa
  • tab.inactiveBackground#f5f6f7
  • tab.inactiveForeground#6a6d72
  • tab.unfocusedActiveBorder#6a6d72
  • terminal.ansiBlack#2b2d31
  • terminal.ansiBlue#00aacc
  • terminal.ansiBrightBlack#6a6d72
  • terminal.ansiBrightBlue#00ddff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#00ff88
  • terminal.ansiBrightMagenta#ff00ff
  • terminal.ansiBrightRed#ff0077
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffaa00
  • terminal.ansiCyan#00cccc
  • terminal.ansiGreen#00aa66
  • terminal.ansiMagenta#cc00cc
  • terminal.ansiRed#cc0055
  • terminal.ansiWhite#e3e5e8
  • terminal.ansiYellow#cc8800
  • terminal.background#ffffff
  • terminal.foreground#2b2d31
  • terminal.selectionBackground#00aa6650
  • titleBar.activeBackground#f5f6f7
  • titleBar.activeForeground#00aa66
  • titleBar.border#e3e5e8
  • titleBar.inactiveBackground#f5f6f7
  • titleBar.inactiveForeground#6a6d72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a8d92italic
string, string.quoted#00aa66
string.template#00cc77
constant.numeric#cc8800
constant.language.boolean#cc0055bold
constant.language, constant.character#cc0055
keyword, keyword.control#cc0055bold
storage, storage.type, storage.modifier#cc00ccbold
keyword.operator#cc0055
entity.name.function, support.function#00aaccbold
entity.name.class, support.class, entity.name.type.class#cc8800bold
entity.name.type, support.type#00aacc
variable, variable.other, variable.parameter#2b2d31
variable.language#cc00ccitalic bold
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator#cc00ccbold
keyword.control.import, keyword.control.from#cc0055
entity.name.tag#cc0055
entity.other.attribute-name#cc8800
punctuation#5a5d62
invalid, invalid.illegal#cc0055bold underline
support.constant, support.variable#cc8800
support.type.property-name.json#00aacc
markup.heading#00aa66bold
markup.bold#cc8800bold
markup.italic#cc00ccitalic
markup.inline.raw, markup.fenced_code#00aa66
markup.underline.link#00aaccunderline
Ezcord Theme by zkawiy - VS Code Theme