Lagoon Theme
Publisher: Khoa DoanThemes in package: 2
A cozy warm-teal color theme for people who want their editor to feel like a sunlit lagoon.
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#4ECDC414
- activityBar.activeBorder#4ECDC4
- activityBar.background#163A42
- activityBar.foreground#ECF7EE
- activityBar.inactiveForeground#6E9099
- activityBarBadge.background#4ECDC4
- activityBarBadge.foreground#163A42
- badge.background#4ECDC4
- badge.foreground#0E2A30
- button.background#4ECDC4
- button.foreground#0E2A30
- button.hoverBackground#7EE0D9
- button.secondaryBackground#3A6872
- button.secondaryForeground#ECF7EE
- dropdown.background#0E2A30
- dropdown.border#3A6872
- dropdown.foreground#ECF7EE
- editor.background#1F4850
- editor.findMatchBackground#FFCB6B33
- editor.findMatchBorder#FFCB6B
- editor.findMatchHighlightBackground#FFCB6B1F
- editor.foreground#ECF7EE
- editor.hoverHighlightBackground#FFCB6B22
- editor.lineHighlightBackground#2A5660
- editor.lineHighlightBorder#4ECDC41F
- editor.selectionBackground#4ECDC433
- editor.selectionHighlightBackground#4ECDC41A
- editor.wordHighlightBackground#4ECDC422
- editor.wordHighlightBorder#4ECDC45C
- editor.wordHighlightStrongBackground#4ECDC440
- editor.wordHighlightStrongBorder#4ECDC480
- editorBracketHighlight.foreground1#4ECDC4
- editorBracketHighlight.foreground2#FFCB6B
- editorBracketHighlight.foreground3#FFA585
- editorBracketHighlight.foreground4#7AFFCC
- editorBracketHighlight.foreground5#80E5FF
- editorBracketHighlight.foreground6#FF7E8E
- editorBracketHighlight.unexpectedBracket.foreground#FF5566
- editorBracketMatch.background#4ECDC420
- editorBracketMatch.border#4ECDC4
- editorCursor.foreground#FFCB6B
- editorError.foreground#FF7E8E
- editorGroupHeader.tabsBackground#163A42
- editorGroupHeader.tabsBorder#0E2A30
- editorIndentGuide.activeBackground1#4ECDC460
- editorIndentGuide.background1#34626C
- editorInfo.foreground#80E5FF
- editorLineNumber.activeForeground#FFCB6B
- editorLineNumber.foreground#6E9099
- editorOverviewRuler.addedForeground#7AFFCC
- editorOverviewRuler.deletedForeground#FF7E8E
- editorOverviewRuler.errorForeground#FF7E8E
- editorOverviewRuler.findMatchForeground#FFCB6B99
- editorOverviewRuler.infoForeground#80E5FF
- editorOverviewRuler.modifiedForeground#FFCB6B
- editorOverviewRuler.warningForeground#FFCB6B
- editorOverviewRuler.wordHighlightForeground#4ECDC460
- editorWarning.foreground#FFCB6B
- editorWhitespace.foreground#3A6872
- errorForeground#FF7E8E
- focusBorder#4ECDC4
- foreground#ECF7EE
- gitDecoration.conflictingResourceForeground#FFA585
- gitDecoration.deletedResourceForeground#FF7E8E
- gitDecoration.ignoredResourceForeground#6E9099
- gitDecoration.modifiedResourceForeground#FFCB6B
- gitDecoration.untrackedResourceForeground#7AFFCC
- input.background#0E2A30
- input.border#3A6872
- input.foreground#ECF7EE
- input.placeholderForeground#6E9099
- inputOption.activeBackground#4ECDC420
- inputOption.activeBorder#4ECDC4
- list.activeSelectionBackground#3A6872
- list.activeSelectionForeground#FFCB6B
- list.focusBackground#3A6872
- list.focusOutline#4ECDC460
- list.highlightForeground#4ECDC4
- list.hoverBackground#2A5660
- list.inactiveSelectionBackground#2A5660
- list.inactiveSelectionForeground#ECF7EE
- minimap.errorHighlight#FF7E8E
- minimap.findMatchHighlight#FFCB6BAA
- minimap.selectionHighlight#4ECDC4AA
- minimap.warningHighlight#FFCB6B
- panel.background#163A42
- panel.border#0E2A30
- panelTitle.activeBorder#4ECDC4
- panelTitle.activeForeground#FFCB6B
- panelTitle.inactiveForeground#6E9099
- scrollbarSlider.activeBackground#FFCB6B80
- scrollbarSlider.background#3A687280
- scrollbarSlider.hoverBackground#6E9099B0
- selection.background#4ECDC440
- sideBar.background#163A42
- sideBar.foreground#C5D8DA
- sideBarSectionHeader.background#163A42
- sideBarSectionHeader.foreground#ECF7EE
- sideBarTitle.foreground#ECF7EE
- statusBar.background#0E2A30
- statusBar.debuggingBackground#FFA585
- statusBar.debuggingForeground#0E2A30
- statusBar.foreground#C5D8DA
- statusBar.noFolderBackground#0E2A30
- statusBarItem.hoverBackground#4ECDC420
- statusBarItem.remoteBackground#4ECDC4
- statusBarItem.remoteForeground#0E2A30
- tab.activeBackground#1F4850
- tab.activeBorder#FFCB6B20
- tab.activeBorderTop#FFCB6B
- tab.activeForeground#FFCB6B
- tab.border#0E2A30
- tab.hoverBackground#2A5660
- tab.hoverForeground#ECF7EE
- tab.inactiveBackground#163A42
- tab.inactiveForeground#6E9099
- terminal.ansiBlack#0E2A30
- terminal.ansiBlue#4ECDC4
- terminal.ansiBrightBlack#6E9099
- terminal.ansiBrightBlue#7EE0D9
- terminal.ansiBrightCyan#B0F0FF
- terminal.ansiBrightGreen#A5FFD9
- terminal.ansiBrightMagenta#FFBFA5
- terminal.ansiBrightRed#FF9BA8
- terminal.ansiBrightWhite#F5FBF6
- terminal.ansiBrightYellow#FFDB8F
- terminal.ansiCyan#80E5FF
- terminal.ansiGreen#7AFFCC
- terminal.ansiMagenta#FFA585
- terminal.ansiRed#FF7E8E
- terminal.ansiWhite#ECF7EE
- terminal.ansiYellow#FFCB6B
- terminal.background#163A42
- terminal.foreground#ECF7EE
- titleBar.activeBackground#0E2A30
- titleBar.activeForeground#ECF7EE
- titleBar.inactiveBackground#0E2A30
- titleBar.inactiveForeground#6E9099
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6E9099 | italic |
| string, punctuation.definition.string, string.quoted | #7AFFCC | — |
| constant.numeric, constant.language, constant.character, constant.other | #80E5FF | — |
| variable, variable.other.readwrite, variable.parameter | #ECF7EE | — |
| variable.other.constant, entity.name.constant | #4ECDC4 | — |
| variable.other.enummember, constant.other.enum, entity.name.constant.enum | #FFA585 | — |
| keyword, storage.type, storage.modifier | #FFCB6B | — |
| keyword.control | #FFCB6B | bold |
| entity.name.function, support.function, meta.function-call entity.name.function, meta.function-call.generic | #FFA585 | — |
| entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class | #4ECDC4 | — |
| entity.name.tag | #FF7E8E | bold |
| punctuation.definition.tag | #ECF7EE | — |
| entity.other.attribute-name | #FFCB6B | — |
| string.regexp, constant.character.escape | #4ECDC4 | — |
| keyword.operator | #FFCB6B | — |
| punctuation, meta.brace | #9CB5BA | — |
| markup.heading, entity.name.section | #FFA585 | bold |
| markup.bold | #7AFFCC | bold |
| markup.italic | #FFCB6B | italic |
| markup.inserted | #4ECDC4 | — |
| markup.deleted | #FF7E8E | — |
| markup.changed | #FFA585 | — |
| invalid, invalid.illegal | #FF7E8E | underline |