@pveyes/aperture

Color theme for VSCode to help you focus

Usage no npm install needed!

<script type="module">
  import pveyesAperture from 'https://cdn.skypack.dev/@pveyes/aperture';
</script>

README

Aperture Logo

Color theme for VSCode to help you focus

Color Pallete

Aperture Color Pallete

  • Anti-Flash White #F2F7F2
  • Licorice #141414
  • Dark Pink #E75A7C
  • Dark Terra Cotta #D05353
  • Neon Carrot #F9A03F
  • Tuscan #F8DDA4
  • Medium Spring Bud #C3E88D
  • French Sky Blue #82AAFF
  • Lavender Purple #A67DB8
  • Mauve #DBB9F1

All colors (and their name) are retrieved from Coolors

Variants

There are 2 variants of this theme.

  • Large Aperture. Main theme which designed to perform best in low light condition (at night).
  • Small Aperture. Alternative theme to use when you're working under bright sunlight.

When using Small Aperture theme, color pallete are generated by darkening 25-50% (depending on how good its contrast ratio), except for background & foreground which uses invert method + minor adjustment.

Screenshot

Large Aperture: Large Aperture Editor Theme Screenshot

Small Aperture: Small Aperture Editor Theme Screenshot

Supported Languages

Generally, all languages with good syntax highlighting support are already supported, but here's list of languages that I personally tested:

  • Web (HTML, CSS, JavaScript, JSON)
  • JavaScript+ (JSX, TypeScript)
  • Golang
  • Rust
  • Markdown

Usage in Web

You can also use this theme in web using shiki syntax highlighter. First you need to install this dependency:

yarn add @pveyes/aperture -D

Then before highlighting, call loadTheme to the theme path. You can choose whether to use dark-mode or light-mode theme:

const shiki = require('shiki')
const theme = shiki.loadTheme('./node_modules/@pveyes/aperture/themes/Large-Aperture.json');

shiki.getHighlighter({ theme })

LICENSE

MIT