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.background#34343B
  • activityBar.border#79B3F080
  • activityBar.foreground#79B3F0C0
  • activityBarBadge.background#79B3F080
  • activityBarBadge.foreground#E0E0E0
  • badge.background#E0E0E040
  • badge.foreground#E0E0E0C0
  • breadcrumb.activeSelectionForeground#E0E0E0
  • breadcrumb.background#2D2D32
  • breadcrumb.foreground#E0E0E080
  • dropdown.background#34343B
  • editor.background#34343B
  • editor.foreground#E0E0E0
  • editor.inactiveSelectionBackground#E0E0E011
  • editor.lineHighlightBackground#E0E0E010
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#E0E0E020
  • editorBracketHighlight.foreground1#E0E0E0
  • editorBracketHighlight.foreground2#E0E0E0
  • editorBracketHighlight.foreground3#98DCE8
  • editorBracketHighlight.foreground4#79B3F0
  • editorBracketHighlight.foreground5#7B86C6
  • editorBracketHighlight.foreground6#7C86C6
  • editorError.foreground#DE5656
  • editorGroupHeader.tabsBorder#79B3F080
  • editorGutter.background#2D2D32
  • editorHoverWidget.background#34343B
  • editorHoverWidget.border#79B3F080
  • editorHoverWidget.foreground#E0E0E0
  • editorInfo.foreground#E0E0E0
  • editorLineNumber.activeForeground#E0E0E0
  • editorLineNumber.dimmedForeground#E0E0E020
  • editorLineNumber.foreground#E0E0E040
  • editorWarning.foreground#FEF188
  • focusBorder#E0E0E0C0
  • gitDecoration.addedResourceForeground#91C58A
  • gitDecoration.conflictingResourceForeground#DE5656
  • gitDecoration.ignoredResourceForeground#E0E0E040
  • gitDecoration.modifiedResourceForeground#79B3F0B0
  • gitDecoration.renamedResourceForeground#FEF188
  • gitDecoration.stageModifiedResourceForeground#79B3F0
  • gitDecoration.submoduleResourceForeground#7B86C6
  • gitDecoration.untrackedResourceForeground#91C58A80
  • list.activeSelectionBackground#79B3F040
  • list.focusBackground#79B3F080
  • list.hoverBackground#79B3F040
  • list.inactiveSelectionBackground#79B3F020
  • minimap.errorHighlight#DE5656
  • minimap.selectionHighlight#E0E0E020
  • minimap.warningHighlight#FEF188
  • panel.background#34343B
  • panel.border#79B3F080
  • panel.dropBorder#E0E0E040
  • panelTitle.activeBorder#E0E0E0C0
  • panelTitle.activeForeground#E0E0E0C0
  • panelTitle.inactiveForeground#E0E0E080
  • sideBar.background#34343B
  • sideBar.border#79B3F080
  • sideBar.dropBackground#34343B
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#34343B
  • sideBarSectionHeader.border#79B3F080
  • sideBarSectionHeader.foreground#E0E0E0
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#79B3F080
  • statusBar.debuggingBackground#9E8980
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#7B86C6
  • tab.activeBackground#79B3F040
  • tab.border#34343B
  • tab.hoverBackground#79B3F040
  • tab.inactiveBackground#34343B
  • terminal.border#79B3F080
  • titleBar.activeBackground#34343B
  • titleBar.activeForeground#E0E0E0
  • titleBar.border#79B3F080
  • titleBar.inactiveBackground#34343B
  • titleBar.inactiveForeground#E0E0E080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#E0E0E040
constant#E0E0E0
entity#E0E0E0
variable, support, meta.attribute#E0E0E0
storage, keyword, punctuation#E0E0E080
keyword.operator#DF6B92B0
keyword.control#DF6B92
string, punctuation.definition.string.begin, punctuation.definition.string.end, constant.numeric#91C58A
invalid#DE5656
support.type.property-name.json, punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments#6BB4AC
entity.name.tag.yaml#6BB4AC
markup.heading.markdown#E0E0E0bold
markup.bold.markdown#E0E0E0bold
entity.name.tag.tsx#E0E0E0bold
support.class.component.tsx#E0E0E0bold
entity.other.attribute-name.tsx#79B3F0