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#7fc7fb
  • activityBar.background#ffffffff
  • activityBar.border#d9dfe7ff
  • activityBar.foreground#333e4fff
  • activityBar.inactiveForeground#8b98a9ff
  • activityBarBadge.background#4ca1de
  • activityBarBadge.foreground#ffffffff
  • badge.background#f2e6ffff
  • badge.foreground#4cabde
  • breadcrumb.activeSelectionForeground#5d6a7dff
  • breadcrumb.focusForeground#333e4fff
  • breadcrumb.foreground#738295ff
  • breadcrumbPicker.background#fafbfeff
  • button.background#4cabde
  • button.foreground#ffffffff
  • button.hoverBackground#3b9dce
  • button.secondaryBackground#d9dfe7ff
  • button.secondaryForeground#000000ff
  • button.secondaryHoverBackground#a4afbdff
  • checkbox.background#ffffffff
  • checkbox.border#bfc7d2ff
  • checkbox.foreground#333e4fff
  • commandCenter.activeBackground#fafbfeff
  • commandCenter.activeBorder#bfc7d2ff
  • commandCenter.activeForeground#333e4fff
  • commandCenter.background#ffffffff
  • commandCenter.border#d9dfe7ff
  • commandCenter.foreground#5d6a7dff
  • commandCenter.inactiveBorder#d9dfe7ff
  • commandCenter.inactiveForeground#738295ff
  • debugToolBar.background#ffffffff
  • descriptionForeground#5d6a7dff
  • diffEditor.insertedTextBackground#daf8e4ff
  • diffEditor.removedTextBackground#ffe5e4ff
  • dropdown.background#ffffffff
  • dropdown.border#bfc7d2ff
  • dropdown.foreground#333e4fff
  • dropdown.listBackground#f4f7fdff
  • editor.background#ffffffff
  • editor.findMatchBackground#df812866
  • editor.findMatchBorder#df8128ff
  • editor.findMatchHighlightBackground#ffc26e66
  • editor.findMatchHighlightBorder#ffc26eff
  • editor.focusedStackFrameHighlightBackground#28a74525
  • editor.foldBackground#f4f7fdff
  • editor.foreground#1f2939ff
  • editor.inactiveSelectionBackground#c7d3ff66
  • editor.lineHighlightBackground#f4f7fdff
  • editor.linkedEditingBackground#7fc1fb99
  • editor.selectionBackground#c7d3ff99
  • editor.selectionHighlightBackground#98e4b999
  • editor.selectionHighlightBorder#98e4b999
  • editor.stackFrameHighlightBackground#ffd33d33
  • editor.wordHighlightBackground#ffc9aa66
  • editor.wordHighlightBorder#ffc9aaff
  • editor.wordHighlightStrongBackground#ffc9aa66
  • editor.wordHighlightStrongBorder#ffc9aaff
  • editorBracketHighlight.foreground1#0075a2ff
  • editorBracketHighlight.foreground2#d07826ff
  • editorBracketHighlight.foreground3#4c97de
  • editorBracketHighlight.foreground4#0075a2ff
  • editorBracketHighlight.foreground5#d07826ff
  • editorBracketHighlight.foreground6#4c9fde
  • editorBracketMatch.background#abe1f899
  • editorBracketMatch.border#abe1f8ff
  • editorCodeLens.foreground#5d6a7dff
  • editorCursor.foreground#3b9bce
  • editorError.foreground#df4047ff
  • editorGhostText.foreground#a4afbdff
  • editorGroup.border#d9dfe7ff
  • editorGroupHeader.tabsBackground#f4f7fdff
  • editorGroupHeader.tabsBorder#d9dfe7ff
  • editorGutter.addedBackground#98e4b9ff
  • editorGutter.deletedBackground#fc8f8eff
  • editorGutter.foldingControlForeground#5d6a7dff
  • editorGutter.modifiedBackground#a2b6ffff
  • editorHint.foreground#17975fff
  • editorIndentGuide.activeBackground#bfc7d2ff
  • editorIndentGuide.background#e7ebf2ff
  • editorInfo.foreground#519ef1
  • editorInlayHint.background#7382951a
  • editorInlayHint.foreground#738295ff
  • editorInlayHint.typeBackground#7382951a
  • editorInlayHint.typeForeground#738295ff
  • editorLightBulb.foreground#df8128ff
  • editorLineNumber.activeForeground#1f2939ff
  • editorLineNumber.foreground#bfc7d2ff
  • editorLink.activeForeground#4cadde
  • editorOverviewRuler.border#ffffffff
  • editorWarning.foreground#df8128ff
  • editorWhitespace.foreground#bfc7d2ff
  • editorWidget.background#f4f7fdff
  • editorWidget.border#a4afbdff
  • errorForeground#c1313bff
  • focusBorder#64c5e8
  • foreground#1f2939ff
  • gitDecoration.addedResourceForeground#17975fff
  • gitDecoration.conflictingResourceForeground#c16f23ff
  • gitDecoration.deletedResourceForeground#df4047ff
  • gitDecoration.ignoredResourceForeground#8b98a9ff
  • gitDecoration.modifiedResourceForeground#51aef1
  • gitDecoration.submoduleResourceForeground#8b98a9ff
  • gitDecoration.untrackedResourceForeground#17975fff
  • icon.foreground#1f2939ff
  • input.background#ffffffff
  • input.border#bfc7d2ff
  • input.foreground#333e4fff
  • input.placeholderForeground#8b98a9ff
  • inputOption.activeBorder#7fd0fb
  • inputValidation.errorBorder#c1313bff
  • keybindingLabel.background#f4f7fdff
  • keybindingLabel.border#d9dfe7ff
  • keybindingLabel.bottomBorder#d9dfe7ff
  • keybindingLabel.foreground#333e4fff
  • list.activeSelectionBackground#d9dfe7ff
  • list.activeSelectionForeground#333e4fff
  • list.errorForeground#c1313bff
  • list.focusBackground#e0ccffff
  • list.hoverBackground#e7ebf2ff
  • list.hoverForeground#333e4fff
  • list.inactiveFocusBackground#f2e6ffff
  • list.inactiveSelectionBackground#d9dfe7ff
  • list.inactiveSelectionForeground#333e4fff
  • list.warningForeground#c16f23ff
  • menu.background#f4f7fdff
  • menu.foreground#333e4fff
  • menu.selectionBackground#d9dfe7ff
  • menu.selectionForeground#333e4fff
  • menu.separatorBackground#d9dfe7ff
  • notificationCenterHeader.background#ffffffff
  • notificationCenterHeader.foreground#5d6a7dff
  • notifications.background#f4f7fdff
  • notifications.border#d9dfe7ff
  • notifications.foreground#333e4fff
  • notificationsErrorIcon.foreground#df4047ff
  • notificationsInfoIcon.foreground#738295ff
  • notificationsWarningIcon.foreground#df8128ff
  • panel.background#f4f7fdff
  • panel.border#d9dfe7ff
  • panelInput.border#d9dfe7ff
  • panelSection.border#d9dfe7ff
  • panelSectionHeader.background#0000
  • panelSectionHeader.foreground#333e4fff
  • panelTitle.activeBorder#64b3e8
  • panelTitle.activeForeground#333e4fff
  • panelTitle.inactiveForeground#5d6a7dff
  • peekView.border#64afe8
  • peekViewEditor.background#f4f7fdff
  • peekViewEditor.matchHighlightBackground#df812866
  • peekViewEditor.matchHighlightBorder#df8128ff
  • peekViewResult.background#e7ebf2ff
  • peekViewResult.matchHighlightBackground#df812866
  • peekViewResult.selectionBackground#d9dfe7ff
  • pickerGroup.border#d9dfe7ff
  • pickerGroup.foreground#333e4fff
  • problemsErrorIcon.foreground#df4047ff
  • problemsInfoIcon.foreground#738295ff
  • problemsWarningIcon.foreground#df8128ff
  • progressBar.background#7fc9fb
  • quickInput.background#ffffffff
  • quickInput.foreground#333e4fff
  • quickInputTitle.background#ffffffff
  • sash.hoverBorder#64b8e8
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#333e4fff
  • settings.modifiedItemIndicator#708fffff
  • sideBar.background#f4f7fdff
  • sideBar.border#d9dfe7ff
  • sideBar.foreground#475365ff
  • sideBarSectionHeader.background#f4f7fdff
  • sideBarSectionHeader.border#d9dfe7ff
  • sideBarSectionHeader.foreground#333e4fff
  • sideBarTitle.foreground#333e4fff
  • statusBar.background#ffffffff
  • statusBar.border#d9dfe7ff
  • statusBar.debuggingBackground#fc8f8eff
  • statusBar.debuggingForeground#000000ff
  • statusBar.foreground#5d6a7dff
  • statusBar.noFolderBackground#ffffffff
  • statusBarItem.prominentBackground#e8eaed
  • tab.activeBackground#ffffffff
  • tab.activeBorder#ffffffff
  • tab.activeBorderTop#64aae8
  • tab.activeForeground#333e4fff
  • tab.border#d9dfe7ff
  • tab.hoverBackground#ffffffff
  • tab.inactiveBackground#f4f7fdff
  • tab.inactiveForeground#5d6a7dff
  • tab.unfocusedActiveBorder#ffffffff
  • tab.unfocusedActiveBorderTop#d9dfe7ff
  • tab.unfocusedActiveForeground#a4afbdff
  • tab.unfocusedHoverBackground#ffffffff
  • tab.unfocusedHoverForeground#5d6a7dff
  • tab.unfocusedInactiveForeground#a4afbdff
  • terminal.ansiBlack#333e4fff
  • terminal.ansiBlue#3c87dd
  • terminal.ansiBrightBlack#000000ff
  • terminal.ansiBrightBlue#002487ff
  • terminal.ansiBrightCyan#00607eff
  • terminal.ansiBrightGreen#00522fff
  • terminal.ansiBrightMagenta#4d21bbff
  • terminal.ansiBrightRed#a52430ff
  • terminal.ansiBrightWhite#475365ff
  • terminal.ansiBrightYellow#904b1aff
  • terminal.ansiCyan#0075a2ff
  • terminal.ansiGreen#007b49ff
  • terminal.ansiMagenta#6f4cdeff
  • terminal.ansiRed#d03941ff
  • terminal.ansiWhite#5d6a7dff
  • terminal.ansiYellow#a65921ff
  • terminal.foreground#475365ff
  • terminal.tab.activeBorder#64bce8
  • terminalCursor.background#a4afbdff
  • terminalCursor.foreground#4cbade
  • textBlockQuote.background#fafbfeff
  • textBlockQuote.border#d9dfe7ff
  • textCodeBlock.background#f4f7fdff
  • textLink.activeForeground#2192bb
  • textLink.foreground#4cb5de
  • textPreformat.foreground#5d6a7dff
  • textSeparator.foreground#a4afbdff
  • titleBar.activeBackground#ffffffff
  • titleBar.activeForeground#333e4fff
  • titleBar.border#d9dfe7ff
  • titleBar.inactiveBackground#f4f7fdff
  • titleBar.inactiveForeground#5d6a7dff
  • tree.indentGuidesStroke#d9dfe7ff
  • welcomePage.buttonBackground#f4f7fdff
  • welcomePage.buttonHoverBackground#d9dfe7ff
  • widget.shadow#1f293940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#637083ff
constant, entity.name.constant, variable.other.constant, variable.language#264dcbff
entity, entity.name#4c9ade
variable.parameter.function#1f2939ff
entity.name.tag#007b49ff
keyword#c43058ff
storage, storage.type#c43058ff
annotation#c43058ff
storage.modifier.package, storage.modifier.import, storage.type.java#1f2939ff
string, punctuation.definition.string, string punctuation.section.embedded source#007b49ff
string.quoted.double.html, string.quoted.single.html, string.unquoted.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string punctuation.section.embedded source#0075a2ff
support#264dcbff
support.type.property-name#0075a2ff
meta.property-name#266bcb
variable#d07826ff
variable.other#1f2939ff
invalid.broken#ad1c48ffitalic
invalid.deprecated#ad1c48ffitalic
invalid.illegal#ad1c48ffitalic
invalid.unimplemented#ad1c48ffitalic
carriage-return#fafbfeffitalic underline
message.error#ad1c48ff
string source#1f2939ff
string variable#2670cb
source.regexp, string.regexp#007b49ff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#007b49ff
string.regexp constant.character.escape#007b49ffbold
support.constant#264dcbff
support.variable#267bcb
meta.module-reference#266dcb
punctuation.definition.list.begin.markdown#d07826ff
markup.heading, markup.heading entity.name#266bcbbold
markup.quote#007b49ff
markup.italic#1f2939ffitalic
markup.bold#1f2939ffbold
markup.raw#2676cb
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ad1c48ff
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#007b49ff
markup.changed, punctuation.definition.changed#d07826ff
markup.ignored, markup.untracked#f4f7fdff
meta.diff.range#4c95debold
meta.diff.header#267bcb
meta.separator#264dcbffbold
meta.output#264dcbff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#5d6a7dff
brackethighlighter.unmatched#ad1c48ff
constant.other.reference.link, string.other.link#007b49ffunderline
fenced_code.block.language#266bcb
markup.inline.raw.string.markdown#007b49ff
markup.bold, punctuation.definition.bold#d07826ffbold
markup.italic, punctuation.definition.italic#0075a2ffitalic
markup.strikethrough, punctuation.definition.strikethrough#ad1c48ffstrikethrough

Shiki preview

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

Loading...