R@ndom Curve

Creating a theme for Quiver
Andres C. Rodriguez 2016-06-02

I really like Quiver. It’s a great little app and I am using it more and more like I would use Evernote. In fact, it is the application I wish Evernote was. Of course, to be at the Evernote level, Quiver would need to have automatic synching in the cloud, a web (and iOS) app, sharing, etc. But the lack of all this is a feature, not a bug. I mainly use Quiver as a Markdown editor but I love how things are organized and how I can access my notes really quickly. See below for my wish list.

Long story short, before Quiver, I had been using DayOne and really came to like their design. So I wanted Quiver’s design to become like the image below:

DayOne Theme for Quiver

Instead of the native theme (below), which feels a little bland to me:

Original Theme from Quiver

Luckily for me, DayOne’s theme is documented in a GitHub repository (bloom/DOMarkdown). So I needed to do the match between that CSS structure and Quiver’s structure.

Preliminaries

I poked around Quiver, and saw that the preferences has a Themes tab (see below). Good. Now, to understand how to use it, I had to email Yaogang Lian, Quiver’s author. He quickly responded and explained to me that the note itself is a WebView, with a native Mac OS X application wrapping it. Good again, since I know how to do CSS (not so much Objective-C).

DayOne

And since I wanted to understand how the HTML was structured, I had to turn on WebKitDeveloperExtras globally (so that the Inspect Element menu appears):

defaults write NSGlobalDomain WebKitDeveloperExtras -bool true

After this setting, I can bring up the developer tools in a wrapped WebView. Took a some time, but after a while I had Quiver running with the Developer Tools.

Now, on with with the styles.

CSS

To debug my CSS I exported a Quiver note to HTML, and load it in a browser locally with my CSS file. Otherwise it becomes very cumbersome to go into preferences and change the CSS there. Plus you have to get it all in one line, which is even more cumbersome as you are developing (and updating) the theme.

The final CSS for the theme is below.

Editor

.cell {
    font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro';
    font-size: 12px;
}

.ace_heading {
    font-weight: bold;
}

Presentation

h1,h2,h3,h4,h5,h6 { 
    font-family: Avenir, Helvetica Neue, sans-serif; 
}

p, li { 
    font-family: Avenir, Helvetica Neue, sans-serif; 
}

a { 
    color: #47B1C7; 
    text-decoration: none; 
}

a:hover { 
    color: #EA4C89; 
}

pre { 
    background-color: #f8f8f8; 
    border: #E8E8E8 1px solid; 
    border-radius: 5px; 
    color: #444; 
    font-size: 5px; 
    padding: 5px 10px; 
}

code {
    background-color: #FAFAFA; 
    border: 1px solid #E8E8E8;
    border-radius: 3px;
    color: #2c92b0;
}

pre code { 
    border: 1px solid transparent; 
    margin: 0px; 
    padding: 0px; 
}

.ace_line { 
    background-color: #f8f8f8; 
    font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro';
    font-size: 12px;
}

table th, table td { 
    font-family: Avenir, Helvetica Neue, sans-serif; 
}

th { background-color: #EEEEEE; }

td { background-color: #FFFFFF; }

img[src*='#avatar'] { 
    border-radius: 50%; 
    max-height: 200px; 
    max-width: 200px; 
}

img[src*='#border'] { 
    border: 1px solid #CCC; 
}

img[src*='#logo'] { 
    max-height: 100px; 
    max-width: 100px; 
    padding: 5px; 
}

img[src*='#photo'], video[src*='#photo'] { 
    border: 1px solid #AAA; 
    box-shadow: 0 0 3px 0px #DDD; 
    max-height: 600px; 
    max-width: 600px; 
    padding: 10px; 
}

img[src*='#screenshot'] { 
    max-height: 480px; 
    max-width: 480px; 
    margin: auto; 
}

Quiver’s Wish List

I have reported most of these in the Quiver’s GitHub repository but in the hope of raising their profile (wink, wink) here my personal pet peeves:

Thanks for reading.