Tape Theming

hannah

2023-11-04

I love the idea of Tape. There's some issues I have with the workflow — like, I wish data was stored in plaintext1 rather than a SQLite DB — but conceptually and visually it ticks a lot of boxes for me.

You know what else I love? 100r's old SVG theming. Portable cross-app theming is a really neat idea — and showing themes as SVGs is clean as hell.

Luckily for me, Tape supports 100r theming!

Default theme colors

Based on reading the template in Aeriform's Github and messing around with SVG files manual testing, this seems to be how Tape uses 100r theming as of v1.4.0.

Groove is the Tape term for buttons that add things, i.e. the collapsible New Collection and Add buttons.

Value Spec Impact
background Application Background Background
f_high Foreground, high-contrast Main text
f_med Foreground, medium-contrast Tape logo color
f_low Foreground, low-contrast Item separator
f_inv Foreground, for modals and overlays Groove text
b_high Background, high-contrast Alt text
b_med Background, medium-contrast Groove background
b_low Background, low-contrast Collection background
b_inv Background, for modals and overlays Unused2

Tape-specific colors

There's also some Tape-specific values — most are obvious.

<desc id='tape_style' fill='0'></desc>
<desc id='tape_priority' fill='#dc322f'></desc>
<desc id='tape_working' fill='#cb4b16'></desc>
<desc id='tape_submitted' fill='#b58900'></desc>
<desc id='tape_approved' fill='#268bd2'></desc>
<desc id='tape_done' fill='#2aa198'></desc>

The only odd one out is tape_style, which is a style-setting variable with the following options: