How to create a new theme for Playfair

One feature of Playfair that I haven’t really talked about yet is the ability to create themes. There isn’t any documentation on this yet so I’m going to give a quick walkthrough here by looking at the example theme that comes in the Github repo (the default theme is built into Playfair so that you can load it without hosting Playfair).

Because it’s easy to get the data, I’m going to re-create this FRED graph showing how some economic data can be leading indicators for unemployment. Let’s start by looking at the example theme file. Here’s the beginning of it:

{
"top_margin":25,
"bottom_margin":8,
"left_margin":0,
"right_margin":15,
"head_height":0,
"footer_height":0,
"hedsize":"26px",
"hedsizemin":"18px",
"hedweight":700,
"hedface":"Newscycle",
"hedtextfill":"#190729",
"deksize":"20px",
"deksizemin":"15px",
"dekweight":400,
"dekface":"Newscycle",
"dektextfill":"#2f1f3e",
"datasize":"11px",
"dataweight":400,
"dataface":"Pragati",
"datatextfill":"#190729",
"maxdeklines":2,
"annotatesize":"14px",
"annotateweight":400,
"annotateface":"Pragati",
"annotatetextfill":"#190729",
"sourcesize":"10px",
"sourceweight":400,
"sourceface":"Newscycle",
"sourcetextfill":"#190729",
"notesize":"10px",
"noteweight":400,
"noteface":"Newscycle",
"notetextfill":"#190729",
"chartfill":"white",
"chart_toppad":0,
"chart_bottompad":0,
"chart_leftpad":0,
"chart_rightpad":0,
"headerfill":"white",
"header_toppad":0,
"header_bottompad":12,
"header_leftpad":0,
"header_rightpad":0,
"footerfill":"white",
"footer_toppad":4,
"footer_bottompad":5,
"footer_leftpad":0,
"footer_rightpad":0,

As you can see, this is a really simple JSON object just listing parameters of the graph (eventually I want to restructure themes and give them more organization but for now it’s just this big dumb long list). I’m not going to go through all the parameters here, but I will spotlight a few important ones.

First up is the logo. I’m going to give this theme a (admittedly quite ugly) logo. I downloaded a logo-ish looking graphic from wiki commons and put it on a black background to create this fake logo:

Icon_Bitrate copy

In order to include a logo like this in a Playfair theme, the image needs to be turned into a data URI. Save your image as a PNG (if you’re going to use a colored footer in your theme you’ll want to make sure you use transparency in your image as necessary) and head to one of the many sites on the web that convert images to base 64 data URIs. You want the part of the resulting string that begins with “data:”. Here’s the beginning of the string for my logo:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdkAAAHWCAYAAAA7EfPXAAAACXBIWXMAAAsTAAALEwEAmpwYAAA59GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMTEgNzkuMTU4MzI1LCAyMDE1

If you scroll down to the end of the example theme file you can see where the logo goes – the “logo” parameter. In addition, you’ll see a “logoscale” parameter right below that. Logoscale controls the size of the logo. In this case, my base graphic is about 470×470 and that’s way too big. I made the logoscale 16 so that my final graphic is only about 30×30 (470/16).

The next thing I’m going to change is the base font. If you search the theme document for “face” you’ll see a bunch of parameters that control the fontface of various chart elements. The default theme uses PT Sans for all chart elements. For this new theme I’ve switched elements to Pragati or News Cycle. These are all Google fonts so you can take a look at them on the Google fonts website. Here are all the fonts Playfair supports:

  • Lato
  • Fjalla
  • Archivo
  • Asap
  • Cuprum
  • Dosis
  • Karma
  • Lora
  • Pragati
  • PT Sans
  • Source
  • Varela
  • Newscycle
  • Marvel
  • Nunito
  • Oswald
  • Playfair

Finally I made some changes to the default color scheme. Generally you’ll want to enter colors as hex codes. You can probably figure out what I did in the theme file. Most of the text is now #190729, while the chart’s background is white and I’ve changed grid lines to a darker shade of gray accordingly.

Once the theme file is made, and you have a hosted copy of Playfair, changing themes is pretty easy, as you can see in this gif:

theme

Here’s the finished graph:

extheme

Share on FacebookTweet about this on TwitterShare on LinkedIn