fossil-skin

A skin for Fossil in two variants, dark and light: Fossil's default layout with WCAG AA contrast, Instrument Sans, the Bone Hive logo, and fixes for every place Fossil hard-codes colors (timeline graph, diffs, ticket reports, chat, forum, pikchr, tickets). It also carries a main menu with a Search entry, a phone-friendly menu, and the day of the week above each timeline date.

Use it on any Fossil repository

Pick one of the self-contained files in dist/. Each embeds the logo, favicon and the small accessibility script, so it needs nothing but Fossil:

File	Variant	Font	Size
craftdesign-skin.cfg	dark	the viewer's system font	210 KB
craftdesign-skin-instrument-sans.cfg	dark	Instrument Sans, embedded (the look of this server)	300 KB
craftdesign-skin-light.cfg	light	the viewer's system font	210 KB
craftdesign-skin-light-instrument-sans.cfg	light	Instrument Sans, embedded	300 KB

fossil config import craftdesign-skin-light.cfg -R /path/to/repo.fossil

That sets the skin (css, header, footer, details), the logo, and the main menu. Nothing needs restarting: the next page load uses it. To switch between dark and light, or between fonts, import the other file the same way. To take it off, pick any built-in skin under Admin → Skins.

Dark or light

The two variants share one stylesheet and differ in their colors and in one setting, white-foreground in the skin's details. Fossil reads that setting on the server to choose user, branch and pikchr colors: dark tints for white text in the dark skin, pastels for dark text in the light one. So the light variant is its own skin rather than a toggle. A CSS switch on the dark skin could only wash its dark tints toward gray.

Colors

• Chat. Each message keeps its sender's color, muted 30% toward the page in the dark skin. Your own messages sit on the right where Fossil puts them there: by default in tall, phone-shaped windows, and anywhere for users who untick "Left-align my posts" in chat settings.
• Timeline. Branch rows keep their color, muted 40% in the dark skin, and each graph line is drawn in its branch's color.
• Choosing user colors. Fossil derives each user's color from a hash of their login; a skin can only decide how strongly it shows. If two people come out similar, an admin can set user-color-map (Admin → Settings) to hash a different word for a login, for example stephan stephan13 dmestas dmestas4. That swaps in another hashed color; it does not take a hex value. /hash-color-test?rand suggests words.

On phones

The ☰ menu opens as a sheet from under the menu bar to the bottom of the screen. The page behind it stays still, the menu bar stays on screen while it is open (so ☰ is always there to close it), and every link can be reached by scrolling the sheet. Wide tables scroll inside themselves, and ticket and admin forms stack into label above field. The menu bar keeps every entry and scrolls sideways, with ☰ pinned at its left edge.

Timeline weekdays

Each timeline date gets its full weekday on a small line above it. It is worked out in the browser from the date Fossil prints, so it matches that date whether the timeline shows UTC or local time. Without JavaScript you just see the date.

Building the files yourself

python3 skin/build.py       # writes all four files into dist/

Two optional things the skin cannot do for you, because they are per-repo settings:

# Full-text search, so the Search menu entry has something to show
fossil fts-config enable check-in wiki ticket forum document -R repo.fossil
fossil fts-config index on -R repo.fossil

# A wiki page as the home page (the skin hides Fossil's extra "index" / "Home" title)
fossil config -R repo.fossil set index-page '/wiki?name=index'

Requires Fossil 2.20 or newer for the mainmenu setting; older versions ignore it and use their built-in menu.

Changes, questions, bugs

Use the forum for questions and the tickets for bugs or change requests. Both are open: click "Anonymous login" and you can post. Forum posts from anonymous users are held until a moderator approves them. If you have a fix, attach a patch to the ticket or describe the change in the forum thread.

This server (fossil.craftdesign.group)

The hosted repos use the dark variant from the same sources, with the fonts and script served by Caddy instead of embedded, plus a landing page, per-repo metadata and git mirrors:

Path	What
skin/	css.txt, header.txt, footer.txt, logo.png, icons/, apply.py, build.py
www/	landing page, a11y.js, favicon, fonts
repos/*.meta	per-repo icon, description and public access, read by apply.py
mirror/	hourly git → fossil mirror script
docs/	setup notes, and how the skin works (docs/SKIN.md)
Caddyfile	serves www/ and proxies the rest to Fossil

Deploying a change: copy the edited files to /var/fossil/skin or /var/fossil/www on the server and run python3 /var/fossil/skin/apply.py, which pushes the skin into every repo and regenerates the landing page. deploy.sh does both from a checkout on the server. Adding a repository is documented on the server at fossil-skin/wiki/new-repo.

Licenses

Skin: MIT. Instrument Sans: SIL Open Font License. Icons: Phosphor, MIT. The weekday calculation follows Ben Joffe's "Fast Day-of-Week Computation" (benjoffe.com/fast-day-of-week).