Coral Reef Dark
Publisher: The Orange CatThemes in package: 1
A coral reef inspired visual studio code theme
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#FF7F51
- activityBar.background#21252B
- activityBar.border#282C34
- activityBar.foreground#FFD4C6
- badge.background#2EC4B6
- badge.foreground#00070D
- button.background#2EC4B6
- button.foreground#00070D
- button.hoverBackground#259D92
- debugToolBar.background#282C34
- descriptionForeground#BFBFBF
- dropdown.background#000E13
- dropdown.border#259D92
- dropdown.foreground#FFD4C6
- editor.background#282C34
- editor.findMatchBackground#F2C94C55
- editor.findMatchHighlightBackground#FFD4C633
- editor.foldBackground#FF7F5115
- editor.foreground#FFD4C6
- editor.lineHighlightBackground#FFD4C613
- editor.selectionBackground#FFD4C633
- editor.selectionHighlightBackground#FFD4C622
- editor.wordHighlightBackground#FFD4C622
- editor.wordHighlightStrongBackground#259D9244
- editorBracketHighlight.foreground1#2EC4B6
- editorBracketHighlight.foreground2#FF7F51
- editorBracketHighlight.foreground3#F2C94C
- editorBracketHighlight.unexpectedBracket.foreground#CC6542
- editorBracketPairGuide.activeBackground1#2EC4B622
- editorBracketPairGuide.activeBackground2#FF7F5122
- editorBracketPairGuide.activeBackground3#F2C94C22
- editorCursor.foreground#FF7F51
- editorGroupHeader.tabsBackground#282C34
- editorGutter.addedBackground#2EC4B6
- editorGutter.deletedBackground#CC6542
- editorIndentGuide.activeBackground1#FF7F5166
- editorIndentGuide.background1#3A4048
- editorLineNumber.foreground#636D83
- editorWhitespace.foreground#424850
- errorForeground#CC6542
- focusBorder#FFAA8A
- foreground#FFD4C6
- input.background#000E13
- input.border#259D92
- input.foreground#FFD4C6
- input.placeholderForeground#BFBFBF
- list.activeSelectionBackground#FF7F5133
- list.activeSelectionForeground#FFD4C6
- list.highlightForeground#F2C94C
- list.hoverBackground#FF7F5111
- notifications.background#282C34
- notifications.border#2EC4B6
- panel.background#282C34
- panel.border#2EC4B6
- panelTitle.activeForeground#FF7F51
- panelTitle.inactiveForeground#FFAA8A
- scrollbarSlider.activeBackground#FF7F5166
- scrollbarSlider.background#FF7F5122
- scrollbarSlider.hoverBackground#FF7F5144
- selection.background#F2C94C44
- sideBar.background#21252B
- sideBar.border#21252B
- sideBar.foreground#FFD4C6
- sideBarSectionHeader.background#282C34
- sideBarSectionHeader.foreground#FFD4C6
- statusBar.background#282C34
- statusBar.border#282C34
- statusBar.debuggingBackground#FF7F51
- statusBar.foreground#FFD4C6
- tab.activeBackground#282C34
- tab.activeBorder#FF7F51
- tab.activeForeground#FFD4C6
- tab.border#00000000
- tab.hoverBackground#FF7F5113
- tab.inactiveBackground#282C34
- tab.inactiveForeground#FFAA8A
- terminal.ansiBlack#21252b
- terminal.ansiBlue#2EC4B6
- terminal.ansiBrightBlue#2EC4B6
- terminal.ansiCyan#2EC4B6
- terminal.ansiGreen#98C379
- terminal.ansiMagenta#C678DD
- terminal.ansiRed#ff0000
- terminal.ansiWhite#FFD4C6
- terminal.ansiYellow#F2C94C
- terminal.foreground#FFD4C6
- titleBar.activeBackground#21252B
- titleBar.activeForeground#FFAA8A
- titleBar.inactiveBackground#282C34
- window.activeBorder#21252B
- window.inactiveBorder#21252B
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| keyword, storage.type, storage.modifier | #2EC4B6 | — |
| string | #D5C9B7 | — |
| constant.numeric, constant.character.numeric | #FF7F51 | — |
| variable, identifier | #FFAA8A | — |
| entity.name.function, support.function | #CDAFC1 | — |
| variable.other.property | #F2C94C | — |
| punctuation, meta.brace | #FFAA8A | — |
| comment.line.double-slash.js, punctuation.definition.comment.js | #5C6370 | italic |
| entity.name.tag.css, support.type.property-name.css, support.type.vendored.property-name.css | #FFAA8A | — |
| support.constant.property-value.css, punctuation.definition.constant.css, constant.other.color.rgb-value.hex.css, string.quoted.single.css, meta.property-value.css | #F2C94C | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, support.type.property-name.media.css, meta.property-list.css, source.css | #FFAA8A | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #2EC4B6 | — |
| punctuation.definition.entity.css, punctuation.separator.key-value.css | #FFD4C6 | — |
| keyword.other.unit.css, constant.numeric.css | #FF7F51 | — |
| meta.at-rule.keyframes.body.css, source.css | #FF7F51 | — |
| support.function.gradient.css, support.constant.color.css | #CDAFC1 | — |
| entity.other.pseudo-class.css, entity.other.pseudo-element.css | #2EC4B6 | italic |
| punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, comment.block.css, source.css | #5C6370 | italic |
| entity.name.tag.html, meta.tag.structure.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #2EC4B6 | — |
| entity.other.attribute-name.html | #FFAA8A | italic |
| string.quoted.double.html, string.quoted.single.html | #CDAFC1 | — |
| meta.attribute.html | #FF7F51 | — |
| constant.character.entity.html | #CDAFC1 | — |
| invalid.illegal.unmatched-tag.html | #CC6542 | bold |
| markup.heading.html | #2EC4B6 | bold |
| markup.bold.html | #FF7F51 | bold |
| markup.italic.html | #CDAFC1 | italic |
| text.html.derivative | #FFD4C6 | — |
| punctuation.definition.comment.html, comment.block.html | #5C6370 | italic |