Sharing custom theme

Hello, some of you might remember the “Scratch” theme I shared on the old Slack :headstone:

I’ve kept at it and sharing along the way to stop perfection getting in the way. Progress is slow, and will stay that way. Just pushed up version 13:

I ought to update the intro, it is looking half decent at least if I say so myself!

Note: this version includes some enhancement for folks with JavaScript enabled.

1 Like

Looks so good!

If you’re willing, when you feel like it’s ready, would you be willing to include it in the app?

1 Like

Thanks Brent, I’m stoked you like it! When it’s “ready”, for sure, I’d be delighted to contribute.

Themes are a great place where we can experiment without adding complexity to the app. As a result though, are aspects of this theme that feel kinda hacky. In particular where I’ve sought to solve problems that may be more elegantly resolved in the app.

At some point, when there is room in NNW roadmap, I’d like to help figure out where these complexities best belong. I like the idea of contributing a theme that makes sense to people who want peel it open to see how it works.

1 Like

This is very nice. Can you say more about the JavaScript part?

Thanks John, I’m pleased you asked.

The js in the template does a few things CSS cannot:

Measure how much text a post contains.

Useful to apply the is-short-content class which in turn is used to enlarge the text of short unstructured posts (if it looks like your viewport has space).

Compare the post title to the body content.

I follow a few folks whose feeds often include short form posts – but rather than just omit the post title (because their post doesn’t really have one) they repeat the post in the title. Sometimes truncated (e.g. kottke.org), sometimes in full. Reading these has irked me for a long time.

For example:

Why Wildfire Experts Are So Worried About This Year’s…

2 Jun 2026 at 6:48 am

Why Wildfire Experts Are So Worried About This Year’s Fire Season. “Key environmental indicators show that the nation is a tinderbox, gripped by widespread drought and with a light snowpack in the mountains.”

Becomes:

2 Jun 2026 at 6:48 am

Why Wildfire Experts Are So Worried About This Year’s Fire Season. “Key environmental indicators show that the nation is a tinderbox, gripped by widespread drought and with a light snowpack in the mountains.”

The JavaScript does a comparison, if it looks like the title is redundant it switches the template class responsible for the untitled post display i.e. articleDatelineTitle.

Finally

It normalises posts that have a title and no body to present them in the same manner as posts with the reverse – by copying the title to the body. Technically this could be done with CSS alone. But the js makes the code a little tidier.

Are any of those issues things that the app itself could help with?

Maybe!

I put some thought in. With respect for backwards theme compatibility, hypothetical new or modified template tags to simplify a theme template that always renders a h1 (removing :empty CSS tricks) and replacing use of JavaScript:

[[title_deduped]]

Same as [[title]], except empty if title text is duplicated* in body

*(algorithm to be defined, possibly non trivial as body often contains mark-up or differently encoded characters that complicate comparison).

[[dateline_style]]

Append existing class output with articleTitleDeduped if title_deduped (above) is empty.

Use this as a CSS class to style the <h1> containing the dateline differently, and hide the regular dateline.

[[body_length_class]]

Outputs articleLengthShort if body value is short*

*(shortness requires definition. Markup included? Other length classes?)

Use this as a CSS class to enlarge font size of short form content.

[[title_deduped|datetime_medium]]

Outputs title value or (if title is empty) datetime_medium

Introducing a possible OR syntax in the template tag in case a different theme wanted to substitute a different date format :man_shrugging:

Use this to avoid an empty <h1> (ux consistency for VoiceOver users).

[[body|title]]

As above. Outputs body value (or title if: body is empty).

Use this to ensure body is always populated.

@ollicle thank you for sharing your theme.

I’ve switched to it (from Fluid) to find out which one I prefer and noticed an issue with some SVG images. In the latest post from the feed Nano Bytes, Vol. 05 - Mark W.rites the small graphics used as icons in the top right of the grey boxes on the web page (Nano Bytes, Vol. 05 - Mark W.rites) are shown as huge, full width, images using your Scratch theme. They display fine as small icon on the right of the h2 subheading when using Fluid. It would be nice if you could address this in a future version of the Scratch theme.

1 Like

Another image issue with the current version of Scratch is that it doesn’t show images in xkcd.com posts. They are displayed when switching to another theme.

1 Like

Thank-you for taking the time to report these @panda!

Both issues are readily fixed. I’ll endeavour to do so soon.

1 Like

@panda Version 14 with fixes: Scratch | ollicle.com

Thank you however the links on that page are still marked v13.

BTW it would be a nice new NNW feature to have discovery and updates of themes directly from the app.

Update: I just noticed you’ve linked to the new version in Scratch – XKCD restored | ollicle.com Thank you for the mention.

Update 2: I expected v14 to replace v13 however it installed a Scratch_v14 theme in addition to the Scratch one.

Update 3: Looks very good now on the two feeds I mentioned.

I really need to automate the generation of that page :sweat_smile:

Links updated, thanks again @panda :folded_hands:

1 Like