Skip to main content
CodingTheme

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.background#181818
  • activityBar.border#2B2B2B
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4D4D4D
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background#1E1E1E
  • breadcrumb.focusForeground#E0E0E0
  • breadcrumb.foreground#CCCCCC
  • button.background#0E639C
  • button.foreground#FFFFFF
  • button.hoverBackground#1177BB
  • dropdown.background#3C3C3C
  • dropdown.border#3E3E42
  • dropdown.foreground#CCCCCC
  • editor.background#1F1F1F
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D4180
  • editor.lineHighlightBackground#282828
  • editor.selectionBackground#264F78
  • editorBracketHighlight.foreground1#D4D4D4
  • editorBracketHighlight.foreground2#D4D4D4
  • editorBracketHighlight.foreground3#D4D4D4
  • editorBracketHighlight.foreground4#D4D4D4
  • editorBracketHighlight.foreground5#D4D4D4
  • editorBracketHighlight.foreground6#D4D4D4
  • editorBracketMatch.background#0064001A
  • editorBracketMatch.border#888888
  • editorCursor.foreground#AEAFAD
  • editorError.foreground#F48771
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2B2B2B
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.foreground#75BEFF
  • editorLineNumber.activeForeground#C6C6C6
  • editorLineNumber.foreground#858585
  • editorSuggestWidget.background#202020
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.selectedBackground#094771
  • editorSuggestWidget.selectedForeground#FFFFFF
  • editorWarning.foreground#CCA700
  • editorWhitespace.foreground#3B3B3B
  • editorWidget.background#202020
  • editorWidget.border#454545
  • gitDecoration.conflictingResourceForeground#E4676B
  • gitDecoration.deletedResourceForeground#C74E39
  • gitDecoration.ignoredResourceForeground#8C8C8C
  • gitDecoration.modifiedResourceForeground#E2C08D
  • gitDecoration.untrackedResourceForeground#73C991
  • input.background#3C3C3C
  • input.border#3E3E42
  • input.foreground#CCCCCC
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#094771
  • list.focusForeground#FFFFFF
  • list.hoverBackground#2A2D2E
  • list.hoverForeground#CCCCCC
  • list.inactiveSelectionBackground#37373D
  • list.inactiveSelectionForeground#CCCCCC
  • panel.background#181818
  • panel.border#2B2B2B
  • panelTitle.activeBorder#0078D4
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#9D9D9D
  • scrollbarSlider.activeBackground#BFBFBF66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464B3
  • sideBar.background#181818
  • sideBar.border#2B2B2B
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.foreground#CCCCCC
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#181818
  • statusBar.border#2B2B2B
  • statusBar.debuggingBackground#0078D4
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.hoverBackground#0062A3
  • tab.activeBackground#1F1F1F
  • tab.activeBorder#007ACC
  • tab.activeBorderTop#0078D4
  • tab.activeForeground#FFFFFF
  • tab.border#2B2B2B
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9D9D9D
  • terminal.background#181818
  • terminal.foreground#CCCCCC
  • terminalCursor.foreground#AEAFAD
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#2B2B2B
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#9D9D9D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#57A64A
entity.name.type.namespace#808080
punctuation.curlybrace, punctuation.parenthesis, punctuation.squarebracket, punctuation.separator, punctuation.terminator#D4D4D4
meta.embedded.interpolation, meta.interpolation.cs#D4D4D4
string, string.quoted, string.template#D69D85
punctuation.definition.interpolation#D69D85
meta.interpolation, source.cs meta.interpolation#D4D4D4
constant.numeric#B5CEA8
constant.language, constant.character, constant.other#569CD6
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other.using, keyword.other.namespace, storage.type, storage.modifier#569CD6
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#B4B4B4
entity.name.function, support.function#DCDCAA
variable.other.object.cs#4EC9B0
variable.parameter#9CDCFE
entity.name.type, entity.name.class, support.type, support.class#4EC9B0
entity.name.interface#B8D7A3
variable.other.property, support.variable.property#9CDCFE
entity.name.tag, meta.tag#569CD6
entity.other.attribute-name#9CDCFE
entity.name.namespace#D4D4D4
invalid, invalid.illegal#F44747
markup.bold#569CD6bold
markup.italic#569CD6italic
markup.heading#569CD6bold
markup.underline.link#569CD6underline
support.type.property-name.json#9CDCFE
entity.other.attribute-name.class.css#D7BA7D
entity.other.attribute-name.id.css#D7BA7D
support.type.property-name.css#9CDCFE

Shiki preview

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

Loading...

Visual Studio Theme Standard by JohnK - VS Code Theme