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.activeBackground#d6c95611
  • activityBar.activeBorder#FFD700
  • activityBar.background#181818
  • activityBar.border#181818
  • activityBar.foreground#949494
  • activityBarBadge.background#FFD700
  • activityBarBadge.foreground#1e1e1e
  • badge.background#FFD700
  • badge.foreground#1d2021
  • breadcrumb.background#3e3d1c34
  • button.background#FFD700
  • button.foreground#1E1E1E
  • button.hoverBackground#cea800
  • editor.background#1e1e1e
  • editor.foreground#d4d4d4
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#3e3d1c66
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#d3c64e40
  • editor.selectionHighlightBackground#faffad26
  • editorCursor.background#57430e
  • editorCursor.foreground#cfa738
  • editorGroup.border#181818
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorIndentGuide.activeBackground#ffffff33
  • editorIndentGuide.background#ffffff0c
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#3a3a3a
  • editorPane.background#00000044
  • editorRuler.foreground#ffffff11
  • errorForeground#fb4934
  • focusBorder#3c3836
  • foreground#d4d4d4
  • gitDecoration.ignoredResourceForeground#4b4b4b
  • icon.foreground#1E1E1E
  • list.activeSelectionBackground#3c383680
  • list.activeSelectionForeground#FFD700
  • list.dropBackground#383b3d
  • list.focusBackground#3c3836
  • list.focusForeground#1E1E1E
  • list.hoverBackground#3c383680
  • list.hoverForeground#FFD700
  • list.inactiveSelectionBackground#3c383680
  • list.inactiveSelectionForeground#ad9300
  • panel.background#1b1b1b
  • panel.border#181818
  • peekView.border#30597a00
  • peekViewEditor.background#181818
  • peekViewEditorGutter.background#1b1b1b
  • peekViewResult.background#1b1b1b
  • scrollbar.shadow#00000022
  • selection.background#d3c64e40
  • sideBar.background#1b1b1b
  • sideBar.border#181818
  • sideBar.foreground#ffffff88
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#181818
  • statusBar.border#181818
  • statusBar.foreground#646464
  • statusBar.noFolderBackground#252526
  • statusBarItem.remoteBackground#181818
  • statusBarItem.remoteForeground#646464
  • tab.activeBackground#3e3d1c34
  • tab.activeBorderTop#FFD700
  • tab.activeModifiedBorder#ff3c0088
  • tab.border#181818
  • tab.hoverBackground#20252B
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#949494
  • tab.unfocusedHoverBackground#1e1e1e
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#569CD6
  • terminal.ansiBrightBlack#131313
  • terminal.ansiBrightBlue#7abcf3
  • terminal.ansiBrightCyan#9fffff
  • terminal.ansiBrightGreen#B5CEA8
  • terminal.ansiBrightMagenta#f0c2f7
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#4ce2e2
  • terminal.ansiGreen#87ad72
  • terminal.ansiMagenta#D8A0DF
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#eeeeee
  • terminal.ansiYellow#cea800
  • terminal.foreground#d4d4d4
  • titleBar.activeBackground#181818
  • titleBar.border#181818
  • tree.indentGuidesStroke#ffffff11
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#BDB76B—
comment#57a64a
variable#BDB76B
keyword#D8A0DF
keyword.operator.comparison#DCDCDC
keyword.operator.assignment#DCDCDC
keyword.operator.arithmetic#DCDCDC
constant.numeric#B5CEA8
constant#B4CEA8
constant.language#569CD6
constant.language.boolean#569CD6
string#d69d85
constant.character.escape, string source#D69D85
meta.preprocessor#bd63c5
keyword.control.import#bd63c5
entity.name.function, keyword.other.name-of-parameter.objc#ff8000
entity.name.type#FFD700
storage.type#ffd700
storage.modifier#569CD6
entity.other.inherited-class#FFD700
variable.parameter#BDB76B
storage.type.method#BDB76B
meta.section entity.name.section, declaration.section entity.name.section#8A8A8A—
support.function#ff8000
support.class, support.type#ffd700
support.constant#ffd700
support.variable#BDB76B
keyword.operator.js#687687—
invalid#ff3333—
invalid.deprecated.trailing-whitespace——
text source, string.unquoted——
meta.xml-processing, declaration.xml-processing#68685B
meta.doctype, declaration.doctype#808080
meta.doctype.DTD, declaration.doctype.DTD—
meta.tag, declaration.tag#808080
entity.name.tag#569CD6
entity.other.attribute-name#92CAF4
string.quoted.double.xml, string.quoted.double.html#C8C8C8
markup.heading#569CD6
markup.quote#DCDCDC
markup.list#DCDCDC—
meta.selector.css entity.name.tag#D7BA7D—
meta.selector.css entity.other.attribute-name.tag.pseudo-class#D7BA7D—
meta.selector.css entity.other.attribute-name.id#D7BA7D—
meta.selector.css entity.other.attribute-name.class#D7BA7D—
support.type.property-name.css#9CDCFE—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#C8C8C8—
meta.preprocessor.at-rule keyword.control.at-rule#87CEFA—
source.cs comment.block.documentation.source.cs meta.tag.xml, source.cs comment.block.documentation.source.cs meta.tag.xml entity.name.tag.localname.xml, source.cs comment.block.documentation.source.cs meta.tag.xml entity.other.attribute-name#608B4E—
markup.deleted.git_gutter#F92672—
markup.inserted.git_gutter#A6E22E—
markup.changed.git_gutter#967EFB—
markup.ignored.git_gutter#565656—
markup.untracked.git_gutter#565656—
git.changes.x——
git.changes.+——
git.changes.-——