Sea Cliff Theme is a VS Code theme with a blue tinted dark base, high-contrast pastel syntax, and 3 darkness variants. It supports semantic highlighting.
The above screenshot is using JetBrains Mono, Material Product Icons, and the Material Icon Theme.
| Role | Soft | Deep | Night |
|---|---|---|---|
| Chrome | #0F1318 |
#0D0F12 |
#0A0C0F |
| Surface | #11151A |
#0F1216 |
#0C0F12 |
| Editor | #161A20 |
#101214 |
#0C0E11 |
| Overlay | #121720 |
#101317 |
#0D1013 |
| Border | #2C3440 |
#1B2026 |
#171B20 |
| Primary text | #D9E1EA |
#D9E1EA |
#D9E1EA |
| Secondary text | #C3CCD7 |
#C3CCD7 |
#C3CCD7 |
| Muted text | #8B98A8 |
#8B98A8 |
#8B98A8 |
| Lilac accent | #D7B4FF |
#D7B4FF |
#D7B4FF |
| Peach accent | #FFCF99 |
#FFCF99 |
#FFCF99 |
| Token Family | Hex |
|---|---|
| Comments | #A6B3C2 |
| Keywords | #FFB3C1 |
| Strings | #A8E6CF |
| Numbers | #F3E1A6 |
| Types | #FFC4A6 |
| Variables | #8FD3FF |
| Functions and methods | #D7B4FF |
| Classes and namespaces | #B8C0FF |
| Constants and special variables | #F2A7C6 |
| Instance variables | #F2B6A0 |
| Symbols | #9EDFD6 |
| Regex | #C6E59D |
| Diff deleted | #FF9F9F |
The Web Content Accessibility Guidelines (WCAG) are a set of standards for making web content more accessible to people with disabilities. User Interfaces compliant with WCAG contrast guidelines make text and UI elements more readable for people with low vision, color blindness, aging eyesight, or in challenging viewing conditions.
All Sea Cliff theme variants meet WCAG 2.2 AAA contrast guidelines.
The contrast ratios below are calculated from the theme JSON files using WCAG 2.2 contrast math. WCAG contrast compares the relative luminance of foreground and background colors; higher ratios are more readable. See the WCAG 2.2 distinguishable quick reference for more details.
| Theme | Editor Text | Text Level | Lowest Syntax | Syntax Level |
|---|---|---|---|---|
| Sea Cliff Soft | 13.23:1 |
AAA | 8.19:1 |
AAA |
| Sea Cliff Deep | 14.22:1 |
AAA | 8.80:1 |
AAA |
| Sea Cliff Night | 14.64:1 |
AAA | 9.06:1 |
AAA |
The colors for the UI chrome are designed to remain readable and avoid overly dark text, while borders, selections, and inactive states stay visually quiet.
pnpm install
pnpm generate:readme
pnpm package