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#f9826c
  • activityBar.background#ffffff
  • activityBar.border#e1e4e8
  • activityBar.foreground#2f363d
  • activityBar.inactiveForeground#959da5
  • activityBarBadge.background#2188ff
  • activityBarBadge.foreground#ffffff
  • badge.background#dbedff
  • badge.foreground#005cc5
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#2f363d
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#fafbfc
  • button.background#159739
  • button.foreground#ffffff
  • button.hoverBackground#138934
  • checkbox.background#fafbfc
  • checkbox.border#d1d5da
  • debugToolBar.background#ffffff
  • descriptionForeground#6a737d
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#fafbfc
  • dropdown.border#e1e4e8
  • dropdown.foreground#2f363d
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.focusedStackFrameHighlightBackground#fff5b1
  • editor.foldBackground#fafbfc
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#0366d611
  • editor.lineHighlightBackground#f6f8fa
  • editor.selectionBackground#0366d625
  • editor.selectionHighlightBackground#34d05840
  • editor.selectionHighlightBorder#34d05800
  • editor.stackFrameHighlightBackground#fffbdd
  • editor.wordHighlightBackground#34d05800
  • editor.wordHighlightBorder#24943e99
  • editor.wordHighlightStrongBackground#34d05800
  • editor.wordHighlightStrongBorder#24943e50
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d05800
  • editorCursor.foreground#044289
  • editorGroup.border#e1e4e8
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#00cf80
  • editorIndentGuide.background#e5e9ec
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#1b1f234d
  • editorOverviewRuler.border#ffffff
  • editorWhitespace.foreground#d1d5da
  • editorWidget.background#f6f8fa
  • errorForeground#cb2431
  • focusBorder#2188ff
  • foreground#444d56
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#e36209
  • gitDecoration.deletedResourceForeground#d73a49
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#005cc5
  • gitDecoration.submoduleResourceForeground#959da5
  • gitDecoration.untrackedResourceForeground#28a745
  • input.background#fafbfc
  • input.border#e1e4e8
  • input.foreground#2f363d
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#e2e5e9
  • list.activeSelectionForeground#2f363d
  • list.focusBackground#cce5ff
  • list.hoverBackground#ebf0f4
  • list.hoverForeground#2f363d
  • list.inactiveFocusBackground#dbedff
  • list.inactiveSelectionBackground#e8eaed
  • list.inactiveSelectionForeground#2f363d
  • notificationCenterHeader.background#e1e4e8
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#fafbfc
  • notifications.border#e1e4e8
  • notifications.foreground#2f363d
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#005cc5
  • notificationsWarningIcon.foreground#e36209
  • panel.background#f6f8fa
  • panel.border#e1e4e8
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#2f363d
  • panelTitle.inactiveForeground#6a737d
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#2f363d
  • progressBar.background#2188ff
  • quickInput.background#fafbfc
  • quickInput.foreground#2f363d
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#2f363d
  • settings.modifiedItemIndicator#2188ff
  • sideBar.background#f6f8fa
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#2f363d
  • sideBarTitle.foreground#2f363d
  • statusBar.background#ffffff
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#f9826c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#586069
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#e8eaed
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#2f363d
  • tab.border#e1e4e8
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#e1e4e8
  • tab.unfocusedHoverBackground#ffffff
  • terminal.foreground#586069
  • textBlockQuote.background#fafbfc
  • textBlockQuote.border#e1e4e8
  • textCodeBlock.background#f6f8fa
  • textLink.activeForeground#005cc5
  • textLink.foreground#0366d6
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#2f363d
  • titleBar.border#e1e4e8
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6A737D
constant, entity.name.constant, variable.other.constant, variable.language#005CC5
entity, entity.name#6F42C1
variable.parameter.function#24292E
entity.name.tag#22863A
keyword#D73A49
storage, storage.type#D73A49
storage.modifier.package, storage.modifier.import, storage.type.java#24292E
string, punctuation.definition.string, string punctuation.section.embedded source#032F62
support#005CC5
meta.property-name#005CC5
variable#E36209
variable.other#24292E
invalid.broken#B31D28italic
invalid.deprecated#B31D28italic
invalid.illegal#B31D28italic
invalid.unimplemented#B31D28italic
carriage-return#FAFBFCitalic underline
message.error#B31D28
string source#24292E
string variable#005CC5
source.regexp, string.regexp#032F62
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#032F62
string.regexp constant.character.escape#22863Abold
support.constant#005CC5
support.variable#005CC5
meta.module-reference#005CC5
punctuation.definition.list.begin.markdown#E36209
markup.heading, markup.heading entity.name#005CC5bold
markup.quote#22863A
markup.italic#24292Eitalic
markup.bold#24292Ebold
markup.raw#005CC5
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#B31D28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863A
markup.changed, punctuation.definition.changed#E36209
markup.ignored, markup.untracked#F6F8FA
meta.diff.range#6F42C1bold
meta.diff.header#005CC5
meta.separator#005CC5bold
meta.output#005CC5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#B31D28
constant.other.reference.link, string.other.link#032F62underline
source#000000
comment#AAAAAA
keyword, storage#2F6F9F
entity.name.function, keyword.other.name-of-parameter.objc#5724BB
entity.name#D44950
entity.other.inherited-class#060708bold italic
support#4E279A
constant.numeric#CF4F5F
variable#7B8C4D
constant#7653C1
variable.other.constant#7653C1
constant.language#7653C2
string#73B00A
support.function#D71707
support.type#0B51A6
entity.name.tag, declaration.tag#2F6F9F
entity.other.attribute-name#4F9FCF
string.quoted.double.html#D44950
meta.tag#4F9EEB
invalid#F93232
markup.inserted#81C7FF
markup.deleted#D1363D
meta.diff.header, meta.separator.diff, meta.diff.index, meta.diff.range#64AB80
meta.selector.css, entity.other.attribute-name.pseudo-class.css, entity.name.tag.wildcard.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css#2F6F9F
support.type.property-name.css#C82E0E
keyword.other.unit.css, constant.other.rgb-value.css, constant.numeric.css#389507
support.constant.font-name.css, constant.other.color.rgb-value.css#389507
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
comment, punctuation.definition.comment, string.comment#8995A0
entity.name.function, keyword.other.name-of-parameter.objc, support, support.function#0D5C43
variable, variable.other.constant#1155A3
keyword, storage, entity, storage.type, entity.name.type.implementation#304B44
constant, constant.numeric, constant.language, entity.name#A74047
string#50750E
keyword, storage, constant.language, support.class.builtin, entity.name.tag.htmlbold

Shiki preview

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

Loading...