Implement Global Theme System (Dark & Light Mode) for Commdesk

Commdesk currently needs a fully structured and scalable theme system that supports both:

```txt id="p4k60n"
Light Theme
Dark Theme
```

The platform should use a centralized theme configuration architecture so that all pages, layouts, and components automatically adapt to the selected theme.

This issue focuses on:

* updating the global `theme.config.ts`
* creating a reusable design token system
* applying the new color palette across the platform
* updating existing components to support both themes
* ensuring visual consistency throughout the application

The new theme system should follow the attached design color palette and modern SaaS dashboard aesthetics.

---

# 🎯 Goal

Build a centralized theme architecture for Commdesk that:

* supports dark & light mode globally
* uses reusable design tokens
* keeps UI visually consistent
* improves scalability and maintainability
* updates all existing admin components/pages

---

# 🏗️ Requirements

---

# 1️⃣ Create / Update Global Theme Config

Update:

```txt id="3x2s9s"
theme.config.ts
```

to support a complete dual-theme architecture.

---

## Theme Structure

The config should contain:

* colors
* typography
* spacing
* border radius
* shadows
* gradients
* status colors
* component tokens

---

## Required Themes

### Light Theme


<img width="643" height="361" alt="Image" src="https://github.com/user-attachments/assets/2bd0d9bd-aefb-4a6b-94d7-9cf5ff127bcc" />


Use:

* soft neutral backgrounds
* clean surfaces
* subtle borders
* professional admin feel

---

### Dark Theme

<img width="761" height="434" alt="Image" src="https://github.com/user-attachments/assets/ef8a3cea-a152-4f68-8ee3-633e41dae838" />


Use:

* charcoal backgrounds
* soft dark surfaces
* neon accent colors
* premium SaaS aesthetic

---

# 2️⃣ Color Palette System

Use the provided design palette as the base design system.

---

## Primary Colors

```txt id="c6o80c"
Primary   → Blue
Secondary → Purple
Tertiary  → Cyan/Green
Neutral   → Gray/Black
```

---

## Theme Tokens

Create reusable tokens such as:

```ts id="7ps7wp"
background
surface
surfaceSecondary
border
textPrimary
textSecondary
primary
secondary
success
warning
danger
hover
shadow
```

---

# 3️⃣ Theme Switching System

Implement a global theme toggle system.

---

## Requirements

* persist selected theme
* support system theme preference
* smooth transitions
* avoid flash on page load
* global state support

---

## Suggested Options

* Context API
* Zustand
* next-themes

---

# 4️⃣ Update Existing Components

Refactor all existing components to support both themes.

---

## Components to Update

Examples:

* Sidebar
* Navbar
* Cards
* Tables
* Buttons
* Inputs
* Dropdowns
* Modals
* Charts
* Badges
* Tabs
* Pagination
* Analytics Cards
* Empty States
* Skeleton Loaders

---

## Important

Hardcoded colors should be removed.

Use theme tokens instead.

Example:

❌ Avoid

```css id="t6mvbi"
background: #111827;
```

✅ Use

```ts id="k11c5w"
theme.colors.surface
```

---

# 5️⃣ Update Admin Dashboard Pages

Ensure all admin pages fully support both themes.

---

## Pages to Verify

```txt id="m4h6l3"
/admin/dashboard
/admin/projects
/admin/events
/admin/users
/admin/analytics
/admin/settings
```

---

# 6️⃣ Typography System

Use a consistent typography system.

---

## Font

```txt id="4qkq1v"
Inter
```

---

## Typography Tokens

Create tokens for:

* headings
* body text
* labels
* captions
* buttons

---

# 7️⃣ Component States

Support proper states in both themes.

---

## States

* hover
* active
* focus
* disabled
* loading
* selected

---

# 8️⃣ Status Badge System

Create reusable themed badges for:

```txt id="vgt33r"
Draft
Submitted
Approved
Rejected
Suspended
Flagged
Under Review
```

Badges should adapt correctly in both themes.

---

# 9️⃣ Shadows & Effects

Create reusable shadow and glow systems.

---

## Requirements

* soft shadows for light mode
* glow accents for dark mode
* modern SaaS feel
* subtle glassmorphism support

---

# 🔟 Responsive Theme Support

Ensure themes work correctly on:

* desktop
* tablet
* mobile

---

# ⚙️ Suggested Theme Config Structure

Example structure:

```ts id="rq0h8t"
export const themes = {
  light: {
    colors: {},
    typography: {},
    shadows: {},
  },

  dark: {
    colors: {},
    typography: {},
    shadows: {},
  },
};
```

---

# 📂 Suggested File Structure

```txt id="df4x7k"
/theme
│
├── theme.config.ts
├── colors.ts
├── typography.ts
├── shadows.ts
├── spacing.ts
├── radius.ts
├── provider.tsx
└── hooks/
    └── useTheme.ts
```

---

# 🎨 Design Requirements

The UI should feel:

* modern
* clean
* futuristic
* premium
* enterprise-grade

Inspired by:

* Linear
* Vercel
* Stripe
* Notion
* GitHub Dark UI

---

# ⚠️ Important Notes

* avoid hardcoded colors
* ensure accessibility contrast
* maintain consistent spacing
* support scalable token architecture
* keep animations smooth and subtle

---

# 🧪 Required Test Cases

---

## Theme Switching

* [ ] light mode works correctly
* [ ] dark mode works correctly
* [ ] theme persists after refresh
* [ ] system theme detection works

---

## Components

* [ ] all buttons support both themes
* [ ] tables render correctly
* [ ] modals support both themes
* [ ] forms are readable in both modes

---

## Responsive

* [ ] mobile theme rendering works
* [ ] tablet layouts work correctly
* [ ] no broken UI in either theme

---

# ✅ Definition of Done

This issue is complete when:

* global theme system is implemented
* both dark and light themes work correctly
* all existing components use theme tokens
* admin pages fully support themes
* no hardcoded colors remain
* theme switching is smooth and persistent
* UI remains visually consistent across the platform



Implement Global Theme System (Dark & Light Mode) for Commdesk #39

Description

🎯 Goal

🏗️ Requirements

1️⃣ Create / Update Global Theme Config

Theme Structure

Required Themes

Light Theme

Dark Theme

2️⃣ Color Palette System

Primary Colors

Theme Tokens

3️⃣ Theme Switching System

Requirements

Suggested Options

4️⃣ Update Existing Components

Components to Update

Important

5️⃣ Update Admin Dashboard Pages

Pages to Verify

6️⃣ Typography System

Font

Typography Tokens

7️⃣ Component States

States

8️⃣ Status Badge System

9️⃣ Shadows & Effects

Requirements

🔟 Responsive Theme Support

⚙️ Suggested Theme Config Structure

📂 Suggested File Structure

🎨 Design Requirements

⚠️ Important Notes

🧪 Required Test Cases

Theme Switching

Components

Responsive

✅ Definition of Done

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions