DEV Community

Cover image for Serendipity Theme, adapted for retina displays.
Michael Andreuzza
Michael Andreuzza

Posted on

Serendipity Theme, adapted for retina displays.

Serendipity.

Serendipity Theme

Preview

Installation

  1. Open Extensions sidebar panel in VS Code. View β†’ Extensions
  2. Search for serendipity
  3. Click Install to install it.
  4. Code > Preferences > Color Theme > serendipity-light - serendipity-dark - serendipity-dark-italic - serendipity-light-italic
  5. 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",
}
Enter fullscreen mode Exit fullscreen mode

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.

Available Options

  • Dark
  • Dark Italics
  • Dark Low Contrast
  • Light
  • Light Italics
  • Light Low Contrast

Jetbrains

Slack:

  • Dark
  • Light

Linear App:

  • Light
  • Dark

iTerm:

  • Light
  • Dark

Firefox:

  • Light
  • Dark

Dark Version

Preview

Dark Version

HTML
Preview

CSS
Preview

JS
Preview

Light Version

Preview

Light Version

HTML
Preview

CSS
Preview

JS
Preview

Feedback

Anything you wonder just contact me, @mike_andreuzza on twitter.

Discussion (0)