$750 Bounty - Shadcn Themes

[MrgSub]

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:

[MrgSub]

/bounty 750

[algora-pbc]

💎 $750 bounty • Zero

Steps to solve:

1. Start working: Comment /attempt #883 with your implementation plan
2. Submit work: Create a pull request including /claim #883 in the PR body to claim the bounty
3. 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

[adiologydev]

/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.

[danteissaias]

/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?

[ogvaibhavshukla]

/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.

[neo773]

/attempt #883

[G3root]

/attempt #883

[heywinit]

/attempt #883

[umarhadi]

/attempt #883

Implementation plan:

1. 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.)

2. 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

3. 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

4. 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

5. Theme Marketplace

   • List all public themes
   • Preview & copy functionality
   • Apply theme to active connection

[Rohit-Singh-Rawat]

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