Serendipity Theme, adapted for retina displays.

#vscode #ux #uiweekly #webdev

Serendipity.

Serendipity Theme

Installation

Open Extensions sidebar panel in VS Code. View → Extensions
Search for serendipity
Click Install to install it.
Code > Preferences > Color Theme > serendipity-light - serendipity-dark - serendipity-dark-italic - serendipity-light-italic
Optional: Use the recommended settings below for best experience

Recommended Settings

{
  // This is are my personal prefferences.
  "editor.fontFamily": "'IBM Plex Mono', monospace",
  "editor.fontSize": 18,
  "editor.lineHeight": 38,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "normal",
  "prettier.eslintIntegration": true,
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "phase",
  "editor.renderWhitespace": "all",
}

Colours

I have worked towards a color palette that would feel fine on the eyes when using retina screens, this color combination made it possible, thanks to the pastel colors used on dark mode instead of "neonish".

The theme is available for editors, shells, UI's and more coming up.