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 examplestephan stephan13 dmestas dmestas4. That swaps in another hashed color; it does not take a hex value./hash-color-test?randsuggests 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).