Creating a theme for Quiver

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:

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

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).

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:

• Colors for tags would be much appreciated (facilitates easy finding of information)
• Ability to drag images to Markdown cell, as my workflow now goes around a clunky cell to drop images
• Make it possible to change the dates in the notes
• Use the location API in the Mac to record the location of a note creation (like DayOne)
• Spelling in Markdown notes is essential if that is the main type of note you are creating
• Add Back/Forward to move between notes (similar to browsers buttons)

Thanks for reading.

Originally published at R@andomCurve on Jun 02 2016