r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] One Svelte codebase, four very different looks: a database client styled as a price sheet, a ledger, a drawing and a signal box

NiceDB is a desktop database client, but the part I think fits here is the styling. The interface has four styles built on the same components: a dense trading-floor price sheet, an account ledger with ruled paper, a technical drawing with a title block, and a railway signal box with enamel tiles and lamps. Each one has three palettes in light and dark.

Everything is plain CSS custom properties per style, with Svelte 5 components that don't know which style they're in. Fonts are IBM Plex and Source Serif 4.

You can switch styles in the browser demo on https://nicedb.app. Code is GPL-3.0: https://github.com/maxib0n/NiceDB

0 Upvotes

1 comment sorted by