Zero $750 Bounty - Shadcn Themes

Shadcn Theming & Styling

PR to staging

Currently our appearance settings are limited to dark, light, and primary modes. We would want a way for users to customize their app however they want, and saving it to the database.

Requirements:

Adding a "theme" dropdown in the connection screen for users to manage the connection's theme or create one.
Customize colors, fonts (Google fonts), spacing, shadows, corner radius, backgrounds. (Live preview/updates, live input/dials)
Save the themes to the database in a new table, allow users to manage their theme(s) or delete them
Load the theme related to the activeConnection
Allow users to mark a theme as public to show it on the theme marketplace
Add a page to list public themes and the ability to copy the theme to be used by the current user.

Reference:

May 05 '25 22:05 MrgSub

/bounty 750

May 05 '25 22:05 MrgSub

💎 $750 bounty • Zero

Steps to solve:

Start working: Comment /attempt #883 with your implementation plan
Submit work: Create a pull request including /claim #883 in the PR body to claim the bounty
Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

❗ Important guidelines:

To claim a bounty, you need to provide a short demo video of your changes in your pull request
If anything is unclear, ask for clarification before starting as this will help avoid potential rework
Low quality AI PRs will not receive review and will be closed
Do not ask to be assigned unless you've contributed before

Thank you for contributing to Mail-0/Zero!

Attempt	Started (UTC)	Solution	Actions
🟢 @adiologydev	May 05, 2025, 10:55:49 PM	WIP
🟢 @danteissaias	May 05, 2025, 11:33:22 PM	WIP
🟢 @vaibhavshukla06	May 06, 2025, 08:06:38 AM	WIP
🟢 @neo773	May 06, 2025, 10:37:10 AM	#910	Reward
🟢 @G3root	May 06, 2025, 11:49:44 AM	#897	Reward
🟢 @Rohit-Singh-Rawat	May 06, 2025, 12:36:28 PM	WIP
🟢 @heywinit	May 06, 2025, 12:02:05 PM	WIP
🟢 @umarhadi	May 06, 2025, 12:02:08 PM	#912	Reward
🟢 @Nitish-Naik	May 06, 2025, 01:28:11 PM	WIP
🟢 @plyght	May 06, 2025, 02:04:18 PM	WIP
🟢 @watercubz	May 06, 2025, 04:44:39 PM	WIP
🟢 @harsh-791	May 06, 2025, 05:31:47 PM	#893	Reward
🟢 @AbhinavAnand241201	May 06, 2025, 06:09:47 PM	WIP
🟢 @Daanish2003	May 06, 2025, 11:11:38 PM	WIP
🟢 @yourcodebuddy-in	May 07, 2025, 03:32:48 AM	WIP
🟢 @jubayeramb	May 07, 2025, 04:51:47 AM	WIP
🟢 @gitstart-opensource	May 07, 2025, 11:27:35 PM	#909	Reward
🟢 @Zedoman	Jun 16, 2025, 06:40:46 AM	#1315	Reward
🟢 @chrisdadev13	Jun 21, 2025, 05:44:41 PM	#1407	Reward
🟢 @hmacr	May 22, 2025, 06:37:21 AM	WIP
🟢 @Aestheticsuraj234	Jun 24, 2025, 04:54:46 AM	WIP
🟢 @djungarikDEV	Jun 25, 2025, 07:34:15 PM	WIP

May 05 '25 22:05 algora-pbc[bot]

/attempt #883

Here's how I'll be approaching this:

Add migration to store theme for the connection.
Wrap everything with a new themes provider which utilises next-themes but handles color changes dynamically.
On connection changes, load the theme to localStorage to avoid DB hits and trigger our provider.
Our provider will then inject the colors to the page for all the standard variables and it should be good to go.

May 05 '25 22:05 adiologydev

/attempt #883

Approach:

In the redesign, we lost some theming capability. For instance, the "New email" button now has hardcoded colors. Before we add user theming, let’s ensure all components use CSS variables.
We’ll set up a new themes table to store all the usual CSS variables (like --card, --card-foreground, etc.). We’ll make all these options available to users.
We already grab your session/active connection on the server side. We can do an SQL JOIN on the theme to get the CSS variables.
We’ll inject a stylesheet with the CSS variables on the server side to prevent flashing unstyled content. It’ll be a client component, so we can update the variables dynamically when creating a new theme. This way, you can live preview as you tweak different settings.

Questions:

~~For picking custom fonts, can we stick to Google Fonts? Or do we want to let users upload their own fonts?~~

May 05 '25 23:05 danteissaias

/attempt #883

Approach:

Right now, users only get basic appearance modes (light/dark/syste). To make theming more flexible, we’ll introduce full user-defined themes with editable tokens like --primary, --background, --radius, --font, etc.
First, we’ll build a new themes table to store theme configs per user (colors, fonts, spacing, shadows, etc.), including metadata like name, isPublic, and createdBy.
We’ll update the connection screen UI to include a “Theme” dropdown, where users can pick, edit, or create a new theme.
The Theme Editor will let users tweak settings in real time with a live preview. Think sliders for radius, color pickers, font selectors (maybe Google Fonts?), etc. Changes get injected via CSS variables on the client.
On activeConnection change, we’ll fetch the associated theme, inject a stylesheet dynamically, and avoid full page reloads or style flashes.
For public themes, we’ll add a “Theme Marketplace” — a page to browse and copy public themes directly into your account.
Users will be able to manage (edit/delete) their themes and toggle visibility to public/private.

Question: (same as @danteissaias )

Should we limit fonts to Google Fonts for now, or let users upload their own? The latter might need extra validation/hosting.

May 06 '25 08:05 ogvaibhavshukla

/attempt #883

May 06 '25 10:05 neo773

/attempt #883

May 06 '25 11:05 G3root

/attempt https://github.com/Mail-0/Zero/issues/883

May 06 '25 12:05 heywinit

/attempt #883

Implementation plan:

Database & Migration
- Create new themes table to store custom themes
- Add themeId column to mail0_connection table
- Theme structure will store all required CSS variables (--background, --foreground, etc.)
Component Styling Refactor
- Audit all components to ensure CSS variables usage
- Remove hardcoded colors and replace with variables
- Ensure consistency of theme tokens usage across the app
Theme Provider & Management
- Create new ThemeProvider extending next-themes
- Implement localStorage caching to avoid excessive DB hits
- Provider will inject CSS variables into :root element
- Handle theme switching on connection changes
Theme Editor UI
- Build Theme Editor component with live preview
- Implement color picker and controls for all CSS variables
- Save/update theme to database
- Options to set theme as public/private
Theme Marketplace
- List all public themes
- Preview & copy functionality
- Apply theme to active connection

May 06 '25 12:05 umarhadi

/attempt #883 @MrgSub do we stick to tailwind v3 for now, for this

May 06 '25 12:05 Rohit-Singh-Rawat

/attempt #883 @MrgSub do we stick to tailwind v3 for now, for this

@Rohit-Singh-Rawat Yes please for now!

May 06 '25 12:05 ahmetskilinc

/attempt #883

May 06 '25 13:05 Nitish-Naik

/attempt #883

My approach/plan:

[ ] theme editor – add dropdown → “Create/Edit Theme”, live preview (colors, fonts, radius, shadows).
[ ] advanced theming - for those who want: "Advanced options" → things like blur, etc
[ ] db – new themes table (id, owner, name, config jsonb, is_public).
[ ] load & persist – on activeConnection change, fetch once → cache in localStorage, inject CSS vars via next-themes.
[ ] manage – list, rename, delete themes in Settings; toggle Public.
[ ] marketplace – page that lists public themes; 1-click “Copy to my themes”.
[ ] share – export/import as JSON snippet.

May 06 '25 14:05 plyght

/attempt #883

May 06 '25 16:05 watercubz

@plyght @danteissaias @vaibhavshukla06 what are u using for custom theme editor a different page or making a editor float over entire app to get live changes?

May 06 '25 16:05 Rohit-Singh-Rawat

/attempt #883

May 06 '25 17:05 harsh-791

/attempt #883

May 06 '25 18:05 AbhinavAnand241201

@Rohit-Singh-Rawat I'm using a popup sort of like when creating a new email, and having a preview of all buttons, components, etc

May 06 '25 20:05 plyght

/attempt https://github.com/Mail-0/Zero/issues/883

May 06 '25 23:05 Daanish2003

/attempt #883

May 07 '25 03:05 yourcodebuddy-in

/attempt #899

Started earlier but forgot to post this comment.

May 07 '25 23:05 gitstart-opensource

Hi @MrgSub @ahmetskilinc,

Is this issue still open? I noticed that PR (https://github.com/vaibhavshukla06/Zero/pull/1) has been merged, but it was merged into the main branch instead of the staging branch.

Could you please clarify if this was intentional?

Thanks!

May 08 '25 05:05 harsh-791

Hi @harsh-791 yes it is still open.

I'm not sure what @vaibhavshukla06 was doing but he has merged into his own fork not into our repo (this repo)

May 08 '25 05:05 ahmetskilinc

Can anyone please tell me is this issue still open or #912 pr going to be merged?

May 09 '25 19:05 AasheeshLikePanner

/attempt #899

DB: Add themes table (colors, fonts, settings, is_public flag) and theme_id to connections Create theme provider/context for dynamic theme management Build theme editor UI with live preview Add theme dropdown to connection screen Create theme management page (CRUD operations) Implement public theme marketplace Add system to load themes based on active connection Migrate existing settings to new theme system

May 14 '25 21:05 yordanosalewond

/attempt #883

Database:

Add new themes table for storing theme config.
Add new column themeId to connection table.

Backend:

Add APIs for listing, creating, updating, and deleting themes.
Add API for changing connection theme.

Frontend:

Add new themes page which will list private themes specific to this user + public themes.
Add theme creation + theme editing pages.
Add a dropdown to connection for changing the theme.
Miscellaneous tasks needed to centralize CSS theme variables, so it's easier for the app to reuse them.