Coral Reef PS Theme
Publisher: Pranav S SThemes in package: 2
A VS Code color theme with warm coral reef tones. Includes dark and light variants.
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#e0f8f6
- activityBar.border#c8eeea
- activityBar.foreground#0f2e33
- activityBar.inactiveForeground#a8ddd8
- activityBarBadge.background#1a535c
- activityBarBadge.foreground#f7fff7
- badge.background#1a535c
- badge.foreground#f7fff7
- breadcrumb.activeSelectionForeground#1a535c
- breadcrumb.focusForeground#0f2e33
- breadcrumb.foreground#a8ddd8
- breadcrumbPicker.background#ffffff
- button.background#1a535c
- button.foreground#f7fff7
- button.hoverBackground#226870
- button.secondaryBackground#4ecdc4
- button.secondaryForeground#0f2e33
- button.secondaryHoverBackground#3ab8b0
- descriptionForeground#1a535c
- diffEditor.insertedLineBackground#1a785010
- diffEditor.insertedTextBackground#1a785018
- diffEditor.removedLineBackground#cc484810
- diffEditor.removedTextBackground#cc484818
- diffEditorGutter.insertedLineBackground#1a785025
- diffEditorGutter.removedLineBackground#cc484825
- dropdown.background#ffffff
- dropdown.border#b8e8e4
- dropdown.foreground#0f2e33
- editor.background#f5fff5
- editor.findMatchBackground#ffe66d60
- editor.findMatchHighlightBackground#ffe66d35
- editor.foreground#0f2e33
- editor.inactiveSelectionBackground#4ecdc418
- editor.lineHighlightBackground#edfaf9
- editor.rangeHighlightBackground#ffe66d18
- editor.selectionBackground#4ecdc430
- editor.selectionForeground#0f2e33
- editor.wordHighlightBackground#4ecdc420
- editor.wordHighlightStrongBackground#4ecdc438
- editorBracketMatch.background#4ecdc425
- editorBracketMatch.border#4ecdc4
- editorCursor.foreground#1a535c
- editorError.foreground#f14c4c
- editorGroupHeader.tabsBackground#e0f8f6
- editorGroupHeader.tabsBorder#c8eeea
- editorGutter.addedBackground#2a9060
- editorGutter.background#f5fff5
- editorGutter.deletedBackground#cc4848
- editorGutter.modifiedBackground#1a535c
- editorHint.foreground#4ecdc4
- editorHoverWidget.background#ffffff
- editorHoverWidget.border#b8e8e4
- editorHoverWidget.foreground#0f2e33
- editorIndentGuide.activeBackground1#4ecdc4
- editorIndentGuide.background1#c8eeea
- editorInfo.foreground#1a535c
- editorLineNumber.activeForeground#1a535c
- editorLineNumber.foreground#a8ddd8
- editorRuler.foreground#c8eeea
- editorSuggestWidget.background#ffffff
- editorSuggestWidget.border#b8e8e4
- editorSuggestWidget.foreground#0f2e33
- editorSuggestWidget.highlightForeground#cc4848
- editorSuggestWidget.selectedBackground#4ecdc420
- editorWarning.foreground#cca700
- editorWhitespace.foreground#c8eeea
- editorWidget.background#ffffff
- editorWidget.border#b8e8e4
- editorWidget.foreground#0f2e33
- errorForeground#cc4848
- extensionButton.prominentBackground#1a535c
- extensionButton.prominentForeground#f7fff7
- extensionButton.prominentHoverBackground#226870
- focusBorder#1a535c
- foreground#0f2e33
- gitDecoration.addedResourceForeground#1a7850
- gitDecoration.conflictingResourceForeground#cca700
- gitDecoration.deletedResourceForeground#cc4848
- gitDecoration.ignoredResourceForeground#b8e0dc
- gitDecoration.modifiedResourceForeground#1a535c
- gitDecoration.untrackedResourceForeground#4ecdc4
- icon.foreground#1a535c
- input.background#ffffff
- input.border#b8e8e4
- input.foreground#0f2e33
- input.placeholderForeground#a8ddd8
- inputOption.activeBackground#4ecdc420
- inputOption.activeBorder#1a535c
- inputOption.activeForeground#0f2e33
- inputValidation.errorBackground#fff0f0
- inputValidation.errorBorder#f14c4c
- inputValidation.warningBackground#fff8e0
- inputValidation.warningBorder#cca700
- list.activeSelectionBackground#4ecdc425
- list.activeSelectionForeground#0f2e33
- list.focusBackground#4ecdc425
- list.focusForeground#0f2e33
- list.highlightForeground#cc4848
- list.hoverBackground#d8f5f2
- list.hoverForeground#0f2e33
- list.inactiveSelectionBackground#d8f5f2
- list.inactiveSelectionForeground#134048
- listFilterWidget.background#e8faf8
- listFilterWidget.outline#1a535c
- menu.background#f5fff5
- menu.border#c8eeea
- menu.foreground#0f2e33
- menu.selectionBackground#4ecdc420
- menu.selectionForeground#0f2e33
- menu.separatorBackground#c8eeea
- menubar.selectionBackground#d8f5f2
- menubar.selectionForeground#0f2e33
- minimap.background#e8faf8
- minimap.errorHighlight#f14c4c
- minimap.findMatchHighlight#ffe66d70
- minimap.selectionHighlight#4ecdc435
- minimap.warningHighlight#cca700
- minimapGutter.addedBackground#1a7850
- minimapGutter.deletedBackground#cc4848
- minimapGutter.modifiedBackground#1a535c
- notifications.background#ffffff
- notifications.border#c8eeea
- notifications.foreground#0f2e33
- notificationsErrorIcon.foreground#f14c4c
- notificationsInfoIcon.foreground#1a535c
- notificationsWarningIcon.foreground#cca700
- notificationToast.border#1a535c
- panel.background#e8faf8
- panel.border#c8eeea
- panelTitle.activeBorder#cc4848
- panelTitle.activeForeground#0f2e33
- panelTitle.inactiveForeground#7ecdc8
- peekView.border#1a535c
- peekViewEditor.background#edfcfa
- peekViewEditor.matchHighlightBackground#ffe66d28
- peekViewResult.background#e8faf8
- peekViewResult.fileForeground#0f2e33
- peekViewResult.lineForeground#1a535c
- peekViewResult.matchHighlightBackground#ff6b6b22
- peekViewResult.selectionBackground#4ecdc422
- peekViewResult.selectionForeground#0f2e33
- peekViewTitle.background#d8f5f2
- peekViewTitleDescription.foreground#1a535c
- peekViewTitleLabel.foreground#0f2e33
- pickerGroup.border#c8eeea
- pickerGroup.foreground#1a535c
- quickInput.background#ffffff
- quickInput.foreground#0f2e33
- quickInputList.focusBackground#4ecdc420
- quickInputList.focusForeground#0f2e33
- quickInputTitle.background#e0f8f6
- scrollbar.shadow#00000015
- scrollbarSlider.activeBackground#4ecdc490
- scrollbarSlider.background#b8e8e480
- scrollbarSlider.hoverBackground#4ecdc455
- selection.background#4ecdc420
- sideBar.background#e8faf8
- sideBar.border#c8eeea
- sideBar.foreground#134048
- sideBarSectionHeader.background#d8f5f2
- sideBarSectionHeader.border#c8eeea
- sideBarSectionHeader.foreground#1a535c
- sideBarTitle.foreground#1a535c
- statusBar.background#1a535c
- statusBar.border#0f3840
- statusBar.debuggingBackground#ff6b6b
- statusBar.debuggingBorder#cc4848
- statusBar.debuggingForeground#f7fff7
- statusBar.foreground#f7fff7
- statusBar.noFolderBackground#f5fff5
- statusBar.noFolderForeground#1a535c
- statusBarItem.activeBackground#2a7a84
- statusBarItem.hoverBackground#226870
- statusBarItem.remoteBackground#4ecdc4
- statusBarItem.remoteForeground#0f2e33
- symbolIcon.classForeground#a08800
- symbolIcon.functionForeground#1a535c
- symbolIcon.keywordForeground#cc4848
- symbolIcon.stringForeground#1a7850
- symbolIcon.variableForeground#0f2e33
- tab.activeBackground#f5fff5
- tab.activeBorder#cc4848
- tab.activeForeground#0f2e33
- tab.border#c8eeea
- tab.hoverBackground#d8f5f2
- tab.hoverForeground#134048
- tab.inactiveBackground#e0f8f6
- tab.inactiveForeground#90ccc8
- tab.unfocusedActiveBackground#e0f8f6
- tab.unfocusedActiveForeground#7ecdc8
- terminal.ansiBlack#0f2e33
- terminal.ansiBlue#1a6888
- terminal.ansiBrightBlack#1a535c
- terminal.ansiBrightBlue#2a80a0
- terminal.ansiBrightCyan#2a7a84
- terminal.ansiBrightGreen#2a9060
- terminal.ansiBrightMagenta#a860b8
- terminal.ansiBrightRed#ff6b6b
- terminal.ansiBrightWhite#f5fff5
- terminal.ansiBrightYellow#c8b000
- terminal.ansiCyan#1a535c
- terminal.ansiGreen#1a7850
- terminal.ansiMagenta#8848a0
- terminal.ansiRed#cc4040
- terminal.ansiWhite#c8eeea
- terminal.ansiYellow#a89000
- terminal.background#e8faf8
- terminal.foreground#0f2e33
- terminal.selectionBackground#4ecdc420
- terminalCursor.foreground#1a535c
- textBlockQuote.background#e0f8f6
- textBlockQuote.border#1a535c
- textCodeBlock.background#e0f8f6
- textLink.activeForeground#4ecdc4
- textLink.foreground#1a535c
- textPreformat.foreground#134048
- textSeparator.foreground#c8eeea
- titleBar.activeBackground#e0f8f6
- titleBar.activeForeground#0f2e33
- titleBar.border#c8eeea
- titleBar.inactiveBackground#e0f8f6
- titleBar.inactiveForeground#7ecdc8
- toolbar.activeBackground#4ecdc420
- toolbar.hoverBackground#d8f5f2
- tree.indentGuidesStroke#b8e8e4
- widget.shadow#00000015
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8ecac6 | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.delete, storage.modifier | #cc4848 | — |
| storage.type.function, storage.type.class, storage.type | #cc4848 | italic |
| keyword.operator, keyword.operator.logical, keyword.operator.comparison | #2a7a84 | — |
| string, string.quoted, string.template | #1a7850 | — |
| constant.character.escape, string.regexp | #2a9060 | — |
| constant.numeric | #a08800 | — |
| constant.language | #a08800 | italic |
| constant.other, variable.other.constant | #226870 | — |
| entity.name.function, meta.function entity.name.function | #1a535c | — |
| meta.function-call.generic, meta.function-call entity.name.function | #226870 | — |
| variable.parameter, meta.parameter | #2a7a84 | italic |
| entity.name.class, entity.name.type.class | #a08800 | — |
| entity.other.inherited-class | #a08800 | italic |
| entity.name.type, support.type | #226870 | — |
| entity.name.type.interface | #226870 | italic |
| variable, variable.other.readwrite | #0f2e33 | — |
| variable.other.property, support.variable.property | #134048 | — |
| variable.language | #cc4848 | italic |
| punctuation, meta.brace, meta.delimiter | #90ccc8 | — |
| entity.name.tag, meta.tag.sgml | #cc4848 | — |
| entity.other.attribute-name | #1a535c | — |
| string.quoted.double.html, string.quoted.single.html | #1a7850 | — |
| support.type.property-name.css, entity.name.tag.css | #1a535c | — |
| support.constant.property-value.css | #2a7a84 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #a08800 | — |
| constant.numeric.css, keyword.other.unit.css | #a08800 | — |
| support.type.property-name.json | #1a535c | — |
| entity.name.section.markdown, markup.heading | #1a535c | bold |
| markup.bold | #a08800 | bold |
| markup.italic | #226870 | italic |
| markup.inline.raw, markup.fenced_code.block | #1a7850 | — |
| markup.underline.link | #226870 | — |
| meta.decorator, entity.name.function.decorator | #a08800 | italic |
| support.function, support.function.builtin | #226870 | — |
| support.class | #a08800 | — |
| invalid, invalid.illegal | #f7fff7 | — |
| invalid.deprecated | #a8ddd8 | strikethrough |