diaspora-pitchblack

A pitch black color theme for diaspora*: as black as possible without giving up readability or making any control hard to find.

Comes in two variants: Pitch Black and Pitch Black (High Contrast). It's the diaspora* sibling of Gitea Pitch Black and uses the same palette and rules, so both sites feel alike.

Built from diaspora*'s stock Dark color theme (app/assets/stylesheets/color_themes/dark/ at tag v0.9.1.0).

diaspora* version	Status
0.9.x	Supported (primary target, tested on v0.9.1.0)
develop (0.10.0-dev)	Compiles cleanly (tested at f965278, July 2026)
0.7.x and older	Not tested

On the stock stream page, about 82% of the pixels are pure #000000 with Pitch Black and 94% with the high contrast variant, against 0.3% with diaspora*'s own Dark theme.

Files

diaspora* color themes are SCSS that your pod compiles with the rest of its assets, so a theme is a small folder tree rather than a single CSS file. It comes in two copies:

Folder	What it is
min/	Comments removed, whitespace collapsed. This is the one to install.
max/	The same theme, human-readable, with comments explaining every token and override. Use it to tweak colors (then run node tools/build-min.mjs), or install it as-is.

Both compile to identical CSS (tools/verify.mjs checks this). Inside each:

Path	What it is
app/assets/stylesheets/color_themes/pitchblack/	Regular variant: _style.scss (colour tokens) plus desktop.scss and mobile.scss entry points
app/assets/stylesheets/color_themes/pitchblack_hc/	High contrast variant, same layout
app/assets/stylesheets/color_themes/_pitchblack_base.scss	Shared: maps the tokens onto Bootstrap 3 and diaspora* variables
app/assets/stylesheets/color_themes/_pitchblack_overrides.scss	Shared: fixes for spots diaspora* hard-codes colours (desktop and mobile)
app/assets/stylesheets/color_themes/_pitchblack_mobile.scss	Shared: fixes for the touch-optimised (mobile) view
config/locales/pitchblack/pitchblack.en.yml	Display names shown in the theme picker

Install

The quick way, from a clone of this repo:

bash install.sh /home/diaspora/diaspora          # installs min/
bash install.sh /home/diaspora/diaspora max      # or the commented copy

Then, as the user that runs diaspora*, from the pod's folder:

RAILS_ENV=production bin/rake assets:precompile
# then restart diaspora* (e.g. systemctl restart diaspora.target)

By hand, it's three steps:

1. Copy the contents of min/ (or max/) over your diaspora* folder. Everything it adds is a new file, so nothing of diaspora*'s own is overwritten.

2. Add the themes to config/color_themes.yml:

   available:
     - original
     - original_white
     - dark_green
     - magenta
     - egyptian_blue
     - dark
     - pitchblack
     - pitchblack_hc
   

3. Precompile assets and restart, as above.

Users then choose Pitch Black or Pitch Black (High Contrast) under Settings → Account → Color theme. To make it the default for new and logged-out users, set it in config/diaspora.toml:

[configuration.settings]
default_color_theme = "pitchblack"

config/color_themes.yml is tracked by diaspora*'s git repo, so a diaspora* upgrade may reset it (or ask you to stash it). The theme files themselves are untracked and survive upgrades. Simply re-run bash install.sh after each upgrade, before precompiling.

How diaspora* themes work, and why this one has overrides

A diaspora* color theme sets SCSS variables before diaspora*'s own stylesheets (and Bootstrap 3's) are compiled. Most of diaspora*'s colours are !default variables, so the bulk of this theme is the variable mapping in _pitchblack_base.scss. Each variant's _style.scss holds only a short list of pb-* tokens (surfaces, borders, text, links, status colours) that feed that mapping; change a token and everything downstream follows.

Some colours can't be reached that way: diaspora* hard-codes a few (#fff publisher, #aabbcc tag highlight, black text in autocomplete lists, a light highlight.js theme…) and re-assigns a few variables without !default ($gray, $text-dark-grey, $list-group-hover-bg…). _pitchblack_overrides.scss patches those. Unlike diaspora*'s Dark theme, it's emitted after diaspora*'s stylesheet, so its rules win on source order as well as specificity.

Design notes

• Page, stream, posts, sidebar and navbar are #000000. Inputs, menus, buttons, code blocks and modals sit one step off black (#0a0a0a) so they're still distinguishable.
• Layout comes from visible neutral grey borders (#2e2e2e) rather than grey panels. diaspora*'s card shadows are switched off: on black they only blur the edge.
• Greyscale links: links are white, body text is light grey (#d0d0d0), so links are the brightest text on the page. Inline links in post and comment bodies also get a faint grey underline. Primary buttons, the "you are here" marker in the sidebar and focus rings stay blue (diaspora*'s and Gitea's stock #4183c4).
• The sidebar's solid-blue hover and solid-grey "selected" rows are replaced by a subtle lift plus a 3px accent bar, and the same treatment is used for conversations and list groups.
• The dimmest text colour (#8c8c8c) still has about 6.3:1 contrast on black. Every text/background pair rendered on the preview pages passes WCAG AA (4.5:1).
• Status colours (alerts, form errors) are the same as Gitea Pitch Black: dark tinted backgrounds, bright text. Solid fills (buttons, labels) are darkened just enough to keep white text at 4.5:1 or better.
• Code blocks use a GitHub-dark-style highlight.js palette instead of diaspora*'s light "github" one.
• Neutral (not blue-tinted) greys throughout, color-scheme: dark for native form controls, and dark scrollbars.

High contrast variant

pitchblack_hc follows the conventions shared by other platforms' dark high contrast themes: Windows 11 Night sky (plus Aquatic and Dusk), VS Code Dark High Contrast, and GitHub's Dark high contrast, measured against WCAG 2.2 AAA. It mirrors Gitea Pitch Black (High Contrast).

	Pitch Black	Pitch Black (High Contrast)
Surfaces	#000 with near-black inputs, menus and buttons	Everything #000; structure comes from borders only
Borders	#2e2e2e	#a0a0a0 (8:1 on black)
Text	#d0d0d0 body, dimmest #8c8c8c	#ffffff body, dimmest #b3b3b3; every text colour is at least 7:1
Links	White	Cyan #75e9fc (Windows Aquatic), used only for links and underlined in post and comment bodies
Primary buttons, selection marker	Blue	White, with black text on buttons (Windows "Highlight" style)
Keyboard focus	Blue ring	2px orange #f38518 ring (VS Code HC) on every focusable control
Menus, hovercards, tooltips, modals	Border and shadow	2px white ring (Windows flyout guidance)
Hover rows	Subtle lift	Lift plus a 1px white outline
Status, labels, badges	Tinted backgrounds, bright text	Brighter text, solid fills that pass 7:1 with white text

If Windows contrast themes are turned on, browsers replace page colours with the system palette anyway; this variant is for high contrast inside diaspora* without changing the whole OS.

Screenshots

These are diaspora* v0.9.1.0's real stylesheets, compiled with this theme, applied to preview pages rebuilt from diaspora*'s own Handlebars and HAML markup (tools/preview/).

High contrast

Development

max/ is the source of truth; min/ is generated from it.

cd tools && npm install && cd ..
node tools/build-min.mjs                          # regenerate min/ from max/
node tools/verify.mjs /path/to/diaspora           # compile all 4 entry points from max/ and min/, check they match
node tools/verify.mjs /path/to/diaspora tools/preview/css   # ...and write the CSS for the preview pages

verify.mjs compiles with dart-sass and the same front-end packages diaspora* vendors, emulating the asset pipeline's image-url()/font-path() helpers. diaspora* itself compiles with libsass (sassc-rails); the theme avoids anything libsass doesn't support and has been checked with both.

To look at the preview pages, serve tools/preview/ with diaspora*'s app/assets/images/ (plus vendor/assets/entypo/entypo.woff and Bootstrap's glyphicon fonts under bootstrap/) available at tools/preview/assets/, then open desktop.html?theme=pitchblack, components.html?theme=pitchblack_hc, mobile.html?theme=pitchblack&drawer=1 and so on.

License

MIT