Some websites could do with an extra lick of paint.
Using a desktop browser, extensions like Stylus are available to apply custom CSS to webpages. I’ve been using this tool with Roam, experimenting with many of the great themes the community have been sharing (in particular, the beautiful light theme shown in this post from Maggie Appleton). However, I spend a lot of my time on my iPad and wanted to have the same experience there. This is possible using iOS Shortcuts, with only a few simple actions.
Applying CSS with Shortcuts
This all happens within Safari, without leaving the page, and persists as long as you stay at the same URL. Thankfully, when using with this Roam, this means the style changes persist as you roam around your database. Unfortunately, due to limitations with custom fonts in iOS, this doesn’t currently support fonts not available in Safari. If you’d like to try out these Shortcuts, they can be installed from the links below:
The Parse CSS to Override Shortcut is not called directly, but is run by the Apply Custom CSS Shortcut, which is added to the share sheet for web pages.
By default, ‘Apply Custom CSS’ will open the file picker for you to choose a .css file to use. If you would instead like to quickly apply the same styling, you could modify this Shortcut to get a file at a specific path, or simply copy and paste the contents of the .css file into a Text block. This file or text block would then be passed as the input to the ‘Parse CSS to Override’ Shortcut.
For my own use, I have duplicated the ‘Apply’ Shortcut specifically for Roam, with a text block containing my current favorite custom theme so it runs super fast.