Custom CSS Styling on iOS Using Shortcuts
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
Inspired by this answer on StackExchange, I wrote a pair of Shortcuts which take a standard CSS stylesheet as input and apply this style to any webpage in Safari through the share sheet. This uses some quick and dirty regex to parse the CSS file and wraps this in a JavaScript function, which runs on a webpage using the Shortcuts action provided by Safari.
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.
All of the JavaScript run on the page is visible in the text blocks and I encourage you to read it before running. The first time you run the Shortcut, it will ask for access to files (if you wish to choose a stylesheet this way) and to the webpage on which it is run. If you have not added Shortcuts from the web before, you will also need to allow untrusted Shortcuts in Settings.