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#e5e2e0
  • activityBar.border#dad7d5
  • activityBar.foreground#000
  • activityBar.inactiveForeground#999
  • activityBarBadge.background#000
  • activityBarBadge.foreground#f5f2f0
  • badge.background#000000
  • badge.foreground#f5f2f0
  • button.background#999
  • button.foreground#e5e2e0
  • button.hoverBackground#000
  • diffEditor.insertedTextBackground#66990018
  • diffEditor.removedTextBackground#99062418
  • dropdown.background#faf7f5
  • dropdown.border#dad7d5
  • editor.background#f5f2f0
  • editor.findMatchBackground#fce4b6
  • editor.findMatchHighlightBackground#fcfcb688
  • editor.foreground#000000
  • editor.rangeHighlightBackground#fcfcb688
  • editor.selectionBackground#b3d4fc88
  • editorCursor.foreground#000
  • editorError.foreground#990624
  • editorGroupHeader.tabsBackground#e5e2e0
  • editorGutter.addedBackground#66990044
  • editorGutter.deletedBackground#99062444
  • editorGutter.modifiedBackground#0077aa44
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#999
  • editorLink.activeForeground#07a
  • editorWarning.foreground#c49863
  • editorWidget.background#e5e2e0
  • focusBorder#959290
  • gitDecoration.addedResourceForeground#690
  • gitDecoration.deletedResourceForeground#990624
  • gitDecoration.modifiedResourceForeground#07a
  • gitDecoration.renamedResourceForeground#c49863
  • input.background#faf7f5
  • input.border#dad7d5
  • list.activeSelectionBackground#b3d4fc88
  • list.activeSelectionForeground#000
  • list.errorForeground#990624
  • list.focusBackground#b3d4fc88
  • list.highlightForeground#07a
  • list.hoverBackground#b3d4fc44
  • list.inactiveSelectionBackground#b3d4fc88
  • list.inactiveSelectionForeground#000
  • list.warningForeground#c49863
  • notificationLink.foreground#0077aa
  • notificationsErrorIcon.foreground#905
  • notificationsInfoIcon.foreground#07a
  • notificationsWarningIcon.foreground#c49863
  • panel.background#e5e2e0
  • panel.border#dad7d5
  • progressBar.background#000
  • quickInput.background#f5f2f0
  • sideBar.background#e5e2e0
  • sideBar.border#dad7d5
  • sideBar.foreground#000
  • sideBarTitle.foreground#000
  • statusBar.background#e5e2e0
  • statusBar.border#dad7d5
  • statusBar.debuggingBackground#996b84
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#000
  • statusBar.noFolderBackground#e5e2e0
  • tab.activeForeground#000
  • tab.border#00000000
  • tab.inactiveBackground#e5e2e0
  • tab.inactiveForeground#999
  • tab.selectedBorderTop#00000000
  • terminal.ansiBlack#000
  • terminal.ansiBlue#07a
  • terminal.ansiBrightBlack#000
  • terminal.ansiBrightBlue#036
  • terminal.ansiBrightCyan#044
  • terminal.ansiBrightGreen#250
  • terminal.ansiBrightMagenta#501
  • terminal.ansiBrightRed#550000
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#80541f
  • terminal.ansiCyan#088
  • terminal.ansiGreen#690
  • terminal.ansiMagenta#905
  • terminal.ansiRed#990624
  • terminal.ansiWhite#708090
  • terminal.ansiYellow#c49863
  • terminal.selectionBackground#b3d4fc44
  • textLink.activeForeground#07a
  • textLink.foreground#07a
  • titleBar.activeBackground#e5e2e0
  • titleBar.border#dad7d5
  • titleBar.inactiveBackground#e5e2e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.other.attribute-name#bf3f59—
constant, string.quoted.double.html, string#690—
comment, punctuation.definition.comment#708090—
entity.name.tag, property, support.type.property-name.json, support.type.property-name.css#905—
entity.name.function, entity.name.type.class#905—
entity.name.section.markdown, keyword, keyword.operator.new, storage.modifier, storage.type, variable.language.this#07a—
markup.changed#c49863—
markup.deleted#990624—
markup.inserted#690—
keyword.operator#c49863—
meta.brace.round, punctuation#999—
constant.numeric.css, keyword.other.unit, variable#000—
entity.name.tag.css, entity.name.tag.html, entity.name.tag.wildcard.css, entity.other.attribute-name.class.css, entity.other.attribute-name.html, entity.other.attribute-name.id.css, punctuation.definition.entity.css, tag#07a—
entity.other.attribute-name.html#38aba5—
Prismatic by Chris Klimas - VS Code Theme