Summer Light
Publisher: Annie KoopThemes in package: 1
Light theme for VS Code inspired by the bold, fun colors of summertime.
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#E4E4E7
- activityBar.foreground#212125
- activityBarBadge.background#ff248d
- activityBarBadge.foreground#F7F7F6
- badge.background#ff248d
- badge.foreground#ffffff
- breadcrumb.background#ffffff
- breadcrumb.focusForeground#ac43ff
- breadcrumb.foreground#21253F
- button.background#2388ff
- button.foreground#ffffff
- button.hoverBackground#51A1FF
- button.secondaryBackground#ac43ff
- button.secondaryForeground#ffffff
- button.secondaryHoverBackground#BE6BFF
- checkbox.background#F7F7F6
- checkbox.border#2388ff
- checkbox.foreground#21253F
- dropdown.background#F7F7F6
- dropdown.border#2388ff
- dropdown.foreground#21253F
- dropdown.listBackground#F7F7F6
- editor.background#FFFFFF
- editor.findMatchBackground#0eb279
- editor.findMatchHighlightBackground#ff6116
- editor.foreground#21253F
- editor.selectionBackground#00c6fd
- editorCursor.background#F7F7F6
- editorCursor.foreground#2388ff
- editorGroup.border#ac43ff
- editorGroup.dropBackground#2388ff
- editorGroup.emptyBackground#F7F7F6
- editorGroupHeader.border#ffffff00
- editorGroupHeader.noTabsBackground#F7F7F6
- editorGroupHeader.tabsBackground#F7F7F6
- editorLineNumber.activeForeground#66da00
- editorLineNumber.foreground#ff248d
- editorWidget.background#ffdfd0
- editorWidget.border#2388ff
- editorWidget.resizeBorder#2388ff
- focusBorder#ac43ff
- foreground#21253F
- input.background#F7F7F6
- input.border#00000000
- input.foreground#21253F
- input.placeholderForeground#ac43ff
- inputOption.activeBackground#0eb279
- inputOption.activeBorder#ffffff00
- inputOption.activeForeground#21253f
- list.activeSelectionBackground#ffd9d9
- list.activeSelectionForeground#21253F
- list.dropBackground#2388ff
- list.errorForeground#21253F
- list.focusBackground#e5e5e5
- list.focusForeground#21253F
- list.highlightForeground#0eb279
- list.hoverBackground#E5E5E5
- list.hoverForeground#21253F
- list.inactiveSelectionBackground#d6f2e8
- list.inactiveSelectionForeground#21253F
- list.invalidItemForeground#FF0000
- listFilterWidget.background#2388ff
- listFilterWidget.noMatchesOutline#FF0000
- menu.background#f7f7f6
- menu.border#0eb279
- menu.foreground#21253f
- menu.selectionBackground#2388ff
- menu.selectionBorder#ffffff00
- menu.selectionForeground#21253f
- menu.separatorBackground#6272a4
- menubar.selectionBackground#2388ff
- menubar.selectionBorder#ff000000
- menubar.selectionForeground#21253f
- notificationCenter.border#2388ff
- notificationCenterHeader.background#e5e5e5
- notificationCenterHeader.foreground#21253f
- notifications.background#F7F7F6
- notifications.border#2388ff
- notifications.foreground#21253f
- notificationsErrorIcon.foreground#ff248d
- notificationsInfoIcon.foreground#ac43ff
- notificationsWarningIcon.foreground#ff6116
- notificationToast.border#2388ff
- panel.background#f7f7f6
- panel.border#ac43ff
- panelTitle.activeBorder#2388ff
- panelTitle.activeForeground#2388ff
- panelTitle.inactiveForeground#ac43ff
- pickerGroup.border#2388ff
- progressBar.background#2388ff
- scrollbar.shadow#ff248d
- selection.background#00c6fd
- sideBar.background#F7F7F6
- sideBar.border#ac43ff
- sideBar.dropBackground#ffdeee
- sideBar.foreground#21253F
- sideBarSectionHeader.background#F7F7F6
- sideBarSectionHeader.foreground#21253F
- sideBarTitle.foreground#21253F
- statusBar.background#DCECFF
- statusBar.debuggingBackground#66da00
- statusBar.debuggingForeground#21253F
- statusBar.foreground#21253F
- statusBar.noFolderBackground#F7F7F6
- statusBar.noFolderForeground#21253F
- statusBarItem.activeBackground#2388FF71
- statusBarItem.errorBackground#FF0000
- statusBarItem.errorForeground#F7F7F6
- statusBarItem.hoverBackground#2388FF71
- statusBarItem.remoteBackground#00c6fd
- statusBarItem.remoteForeground#F7F7F6
- tab.activeBorder#2388ff
- tab.activeForeground#21253F
- tab.hoverBackground#2388ff54
- tab.inactiveBackground#f4f4f4
- tab.unfocusedActiveBackground#2388ff54
- terminal.ansiBlack#000000
- terminal.ansiBlue#2388ff
- terminal.ansiBrightBlack#000000
- terminal.ansiBrightBlue#2388ff
- terminal.ansiBrightCyan#00c6fd
- terminal.ansiBrightGreen#66da00
- terminal.ansiBrightMagenta#FF29A3
- terminal.ansiBrightRed#FF0000
- terminal.ansiBrightWhite#F7F7F6
- terminal.ansiBrightYellow#d4b701
- terminal.ansiCyan#00c6fd
- terminal.ansiGreen#0eb279
- terminal.ansiMagenta#FF29A3
- terminal.ansiRed#FF0000
- terminal.ansiWhite#F7F7F6
- terminal.ansiYellow#d4b701
- terminal.background#F7F7F6
- terminal.border#2388ff
- terminal.foreground#21253F
- terminal.selectionBackground#6272a426
- terminalCursor.background#F7F7F6
- terminalCursor.foreground#ac43ff
- textLink.foreground#2388ff
- titleBar.activeBackground#F7F7F6
- titleBar.activeForeground#21253F
- titleBar.inactiveBackground#e5e5e5
- titleBar.inactiveForeground#21253f60
- tree.indentGuidesStroke#ac43ff
- widget.shadow#ac43ff
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter | #F78000 | italic |
| comment, punctuation.definition.comment | #6273a4c2 | italic |
| comment.block.preprocessor | #6273a4c2 | |
| comment.documentation, comment.block.documentation | #6273a4c2 | — |
| invalid.illegal | #FF1313 | — |
| keyword.operator | #da288c | — |
| keyword, storage | #da288c | — |
| storage.type, support.type | #2388ff | — |
| constant.language, support.constant, variable.language | #2388ff | — |
| variable, support.variable | #21253F | — |
| entity.name.function, support.function | #0078FF | bold |
| entity.name.type, entity.other.inherited-class, support.class | #0EB279 | bold |
| entity.name.exception | #ff0000 | — |
| entity.name.section | — | bold |
| constant.numeric, constant.character, constant | #2388ff | — |
| string | #0EB279 | — |
| constant.character.escape | #00C6FD | — |
| string.regexp | #AC43FF | — |
| constant.other.symbol | #2388FF | — |
| punctuation | #21253F | — |
| meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html | #2388ff | — |
| meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #21253F | — |
| entity.name.tag | #FF248D | — |
| meta.tag entity.other.attribute-name, entity.other.attribute-name.html | #2388ff | italic |
| constant.character.entity, punctuation.definition.entity | #00C6FD | — |
| meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css | #2388ff | — |
| meta.property-name, support.type.property-name | #21253F | — |
| meta.property-value, meta.property-value constant.other, support.constant.property-value | #2388FF | — |
| keyword.other.important | — | bold |
| markup.changed | #21253F | — |
| markup.deleted | #21253F | — |
| markup.italic | — | italic |
| markup.error | #FF1313 | — |
| markup.inserted | #2388FF | — |
| meta.link | #2388FF | — |
| markup.output, markup.raw | #21253F | — |
| markup.prompt | #21253F | — |
| markup.heading | #2388ff | — |
| markup.bold | — | bold |
| markup.traceback | #21253F | — |
| markup.underline | — | underline |
| markup.quote | #21253F | — |
| markup.list | #2388ff | — |
| markup.bold, markup.italic | #0EB279 | — |
| markup.inline.raw | #FF6116 | |
| meta.diff.range, meta.diff.index, meta.separator | #21253F | — |
| meta.diff.header.from-file | #21253F | — |
| meta.diff.header.to-file | #21253F | — |