Tweaking the NetNewsWire article theme

Sometimes the smallest changes can have a large effect. And so it was with some tweaks I made to how NetNewsWire displays articles on my phone and Mac. All the time I’ve been using NetNewsWire, nearly five years, I’ve been slightly bothered by the use of the standard system font to render articles. It’s just not quite my thing.

So yesterday I decided to work out how to tweak the fonts. I altered the article font to my favourite on-screen reading fonts, IBM Plex Sans on macOS and Saverek on iOS (where you can’t install your own fonts). I also altered the preferred code font to JetBrains Mono, still one of my favourites.

Here’s what I came up with:

Yes: it’s almost identical to the default theme! But, previously, I disliked the font so much that, while I use NetNewsWire all the time on my phone, I didn’t really use it at all on my Mac. But after changing the font to one I like, I find myself coming back to it. We’ll see how long that sticks!

Even with so few differences, changing the font still involves creating a new theme for NetNewsWire. Read on for a short how-to on how to create your own tweaked theme.

1. Extract the default theme files from the NetNewsWire package. Open the package using Show Package Contents when right-clicking on the app in the Finder. Navigate to Content -> Resources and copy out template.html and stylesheet.css.

2. Copy these to a folder named something like MyTheme.nnwtheme in:

   ~/Library/Containers/com.ranchero.NetNewsWire-Evergreen/Data/Library/Application Support/NetNewsWire/Themes/
   

3. Create a file named Info.plist in the MyTheme.nnwtheme folder. This contains the metadata of your theme, and it should look like this:

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
   <dict>
      <key>Name</key>
      <string>My Theme</string>
      <key>ThemeIdentifier</key>
      <string>uk.co.mysite.nnwthemes.mytheme</string>
      <key>CreatorHomePage</key>
      <string>https://mysite.co.uk/</string>
      <key>CreatorName</key>
      <string>Mr Big</string>
      <key>Version</key>
      <integer>1</integer>
   </dict>
   </plist>
   

4. Once the Info.plist file is in the .nnwtheme folder, you should be able to select your theme from NetNewsWire preferences. It should look identical to the default theme right now.

5. Start editing the theme. NewNewsWire will reload the theme as you save the files.

   For some inspiration of what to try tweaking, check out the diff of my theme from the default.

My theme is at mikerhodes/nnw-allmine.