Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
84 lines (68 sloc) 4.62 KB
title layout option category tags updated drafted unique_id description project image_index image
newbound Atom syntax themes
edgeless
minor
projects
color
design
2016-10-30 23:03
2016-10-30 18:37
2016-03-30:newbound
Three syntax color themes for the text editor Atom.
2016-03-30-newbound-light-sample.png
src alt
2016-03-30-newbound-light-sample.png
sample of newbound light theme
src alt
2016-03-30-newbound-dark-sample.png
sample of newbound dark theme
src alt
2016-03-31-newbound-warm-sample.png
sample of newbound warm theme
src alt caption
2016-03-29-newbound-light-swatches.png
swatches from newbound light theme
**newbound light** shades and hues
src alt caption
2016-03-29-newbound-dark-swatches.png
swatches from newbound dark theme
**newbound dark** shades and hues
src alt caption
2016-03-31-newbound-warm-swatches.png
swatches from newbound warm theme
**newbound warm** shades and hues
src alt caption
2016-03-29-newbound-light-md.png
sample of newbound light in Atom with a markdown file
**newbound light** theme, Markdown syntax
src alt caption
2016-03-29-newbound-dark-html.png
sample of newbound dark in Atom with an HTML file
**newbound dark** theme, HTML syntax
src alt caption
2016-03-31-newbound-warm-ruby.png
sample of newbound warm in Atom with a Ruby file
**newbound warm** theme, Ruby syntax

There can never be enough legible, intentionally designed syntax themes for text editors. I designed newbound light (as well as its dark and warm alternatives) as a theme for Atom, based on the hues and shades from this website. Optimized for writing Markdown and for front-end development, it should also work with other syntaxes. The light theme is intended for general use where high but not harsh contrast (maximum ratio around 11:1) is desired. The dark and warm themes are better suited for late night work, and are intentionally slightly lower contrast (typically between 4.5:1 and 10:1).

Working with Atom as my primary text editor, I spend a lot of time looking at syntax-highlighted code. I carefully designed color palettes while creating my own website. I tweaked and refined those palettes for a pleasing, legible set of syntax theme colors. Leaning heavily on the existing syntax support and syntax themes built into Atom, I made adjustments to work especially well with Markdown, HTML, and CSS which I use for every project. I tested the themes thoroughly, lived with them for a while, and then published open source versions. I now use these syntax themes every day.

{% assign image = page.image[3] %} {% include block/image.html class="image--wide screenshot" %}

{% assign image = page.image[4] %} {% include block/image.html class="image--wide screenshot" %}

{% assign image = page.image[5] %} {% include block/image.html class="image--wide screenshot" %}

{% assign image = page.image[6] %} {% include block/image.html class="image" %}

{% assign image = page.image[7] %} {% include block/image.html class="image" %}

{% assign image = page.image[8] %} {% include block/image.html class="image" %}

{% capture endnote %} Take a look at any of the three themes on GitHub to browse more “in use” samples, see the code, or read installation instructions for Atom.


All three palettes can be used as base16 themes, since they were designed with similar constraints. However, my syntax themes were made by hand for the most part, and do not strictly adhere to base16 styling guidelines. base16 is a wonderful design constraint (eight hues, eight shades) but its typical application for light themes tends to be a bit of an afterthought and often results in illegible levels of contrast, which is partly why I decided to create my own light theme in the first place.

The name for this design comes from the track “newbound” by Autechre on their 2013 EP L-event. {% endcapture %}

{% include block/ancillary--endnotes.html %}