A custom new tab with Caelestia integration
- Svelte 30.5%
- Rust 28%
- TypeScript 24.6%
- JavaScript 11.5%
- CSS 1.9%
- Other 3.5%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
Ivan
78b0038380
Side by side with the lyrics, the cover's column is wider than the cover, so the space around it looked like stray padding. A card tinted with the primary container, as wide as the cover plus its padding, makes that space the card's: it reads well across schemes, light and dark. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> |
||
| .forgejo | ||
| .githooks | ||
| assets | ||
| docs | ||
| extension | ||
| scripts | ||
| src | ||
| tests | ||
| zen | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| AGENTS.md | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| flake.lock | ||
| flake.nix | ||
| IDEAS.md | ||
| LICENSE | ||
| README.md | ||
caelestia-tab
A new tab, and site themes, that follow the caelestia colour scheme live, for Firefox and Firefox-based browsers (Floorp, Zen, LibreWolf, Waterfox).
- The new tab takes the scheme's colours and the current wallpaper, and changes the moment you switch schemes. It has a clock, bookmarks on a CSS grid you define yourself, and a menu over the clock with a GitHub tab (your pull requests and issues) and a Media tab (any MPRIS player, the Spotify app, mpv or your browser, with its controls and timed lyrics). The pen edits every part of it in place.
- Site themes: the 134 catppuccin/userstyles, compiled against the live scheme instead of a Catppuccin flavour.
- Your own styles: every page gets the scheme as
--caelestia-*CSS variables, plus acaelestia-schemeevent, for Stylus and userscripts. - Nerd Font glyphs on bookmarks, bundled, with suggestions from the address: a GitHub bookmark is offered every GitHub glyph.
- Your own menu tabs, built in from
~/.config/caelestia-tab/components, with the helper's data. GitHub needs no setup if you useghor git already; secrets stay in the helper, named by alias, from SOPS, a command, a file or the environment. - Tree Style Tab's sidebar in the scheme too, live: a tint, or the wallpaper.
- Zen's window in the scheme too, live: Zen ignores the theme API, so it's done with a Zen mod and a small autoconfig script.
- Every part is a component: the clock, the toolbar, the bookmarks and the tabs are Svelte components whose settings forms are drawn from what they declare.
The browser's window frame is CaelestiaFox's job; the two work side by side.
Showcase
Quick start
nix profile install git+https://git.hu-tao.dev/hutao/caelestia-tab # or: cargo install --git …
caelestia-tab install # register the helper with your browsers
Then build the extension (npm ci --prefix extension && npm run --prefix extension build)
and load extension/dist/manifest.json from about:debugging (This Firefox,
Load Temporary Add-on…), and open a new tab. The handbook's
Installing
chapter covers permanent installs, Home Manager, and the site-theme
permission.
Documentation
The handbook (source in
docs/src/):
| Chapter | What it covers |
|---|---|
| Installing | The helper, the extension, Nix and Home Manager |
| Browsers | Where each browser looks for the helper, per-browser quirks |
| Zen's window | The Zen mod, and the script that reloads it live |
| The page and its tabs | The page's parts, the GitHub and Media tabs, the helper's data, and secrets |
| Writing a menu tab | Tabs of your own and their settings, and data plugins in the helper |
| Theming your own sites | The --caelestia-* variables in Stylus and userscripts |
| Development | The dev shell, checks, running it, refreshing the vendored styles |
| How the pieces talk | Helper, storage, new tab, content scripts |
| The helper | Data plugins, watching, the wire format |
| The new tab | Settings, rendering, the bookmark grid |
| Site themes | How the Catppuccin styles get the live scheme |
| Known hazards | The non-obvious things |
What's planned next lives in IDEAS.md.
Development
nix develop
sh scripts/setup-hooks.sh
cargo test && node --test tests/*.test.mjs && web-ext lint --source-dir extension --self-hosted
Contributors and agents: read AGENTS.md first.
Licence
MIT, see LICENSE. The vendored catppuccin/userstyles are MIT, less.js is Apache-2.0, and the Nerd Fonts symbols are MIT, with each glyph set under its own licence (Nerd Fonts' licence audit).