feat: implement centralized dual-theme system (light/dark) by yashyrs027 · Pull Request #45 · NexGenStudioDev/CommDesk

yashyrs027 · 2026-05-06T16:43:23Z

Here’s a professional PR description for the theme system implementation in Commdesk:

✨ PR: Implement Global Scalable Light/Dark Theme System

📌 Overview

This PR introduces a fully centralized and scalable theming architecture for Commdesk with complete support for:

🌞 Light Theme
🌙 Dark Theme

The new system replaces hardcoded styling with reusable design tokens and ensures visual consistency across all pages, layouts, and reusable UI components.

The implementation follows modern SaaS dashboard design principles inspired by:

Linear
Vercel
Stripe
Notion
GitHub Dark UI

🚀 What’s Included

✅ Global Theme Architecture

Implemented a centralized theme system via:

theme.config.ts
reusable token architecture
shared theme provider
scalable theme utilities

Added Theme Tokens

colors
typography
spacing
radius
shadows
gradients
component tokens
status colors

🎨 Dual Theme Support

🌞 Light Theme

Features:

soft neutral backgrounds
clean card surfaces
subtle borders
enterprise dashboard appearance

🌙 Dark Theme

Features:

charcoal/dark surfaces
premium SaaS styling
neon-accent glow effects
improved visual depth

🧩 Design Token System

Created reusable semantic tokens including:

background
surface
surfaceSecondary
border
textPrimary
textSecondary
primary
secondary
success
warning
danger
hover
shadow

This removes dependency on hardcoded colors and improves maintainability.

Example

❌ Before

background: "#111827"

✅ After

theme.colors.surface

🔄 Theme Switching System

Implemented global theme switching with:

persistent theme selection
system theme detection
smooth transitions
flash prevention on initial load
global state support

Supported Features

Light Mode
Dark Mode
System Preference Mode

🛠 Updated Components

Refactored existing components to fully support both themes.

Updated UI Components

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

📄 Updated Admin Pages

Verified and updated theme compatibility for:

/admin/dashboard
/admin/projects
/admin/events
/admin/users
/admin/analytics
/admin/settings

✍ Typography System

Implemented centralized typography tokens using:

Font

Inter

Typography Tokens

headings
body
labels
captions
buttons

🏷 Status Badge System

Added reusable themed badge variants for:

Draft
Submitted
Approved
Rejected
Suspended
Flagged
Under Review

All badge variants now adapt dynamically to the active theme.

🌫 Shadows & Effects

Implemented reusable elevation + glow systems:

Light Theme

soft layered shadows
subtle depth

Dark Theme

glow accents
elevated glassmorphism effects
modern dashboard aesthetics

📱 Responsive Theme Support

Verified theme rendering across:

desktop
tablet
mobile

No theme-related layout breakages detected.

📂 Added Theme Structure

/theme
│
├── theme.config.ts
├── colors.ts
├── typography.ts
├── shadows.ts
├── spacing.ts
├── radius.ts
├── provider.tsx
└── hooks/
    └── useTheme.ts

🧪 Test Coverage

Theme Switching

Light mode works correctly
Dark mode works correctly
Theme persists after refresh
System theme detection works

Components

Buttons support both themes
Tables render correctly
Modals support both themes
Forms remain readable

Responsive

Mobile rendering verified
Tablet layouts verified
No broken UI in either theme

✅ Definition of Done

Global theme system implemented
Light & dark themes fully functional
Components migrated to theme tokens
Admin pages support both themes
Hardcoded colors removed
Theme persistence implemented
Visual consistency maintained platform-wide

yashyrs027 · 2026-05-06T16:49:15Z

Hi @abhishek-nexgen-dev ,I've submitted a PR. Could you please review and merge it when you get a chance?

gemini-code-assist

Code Review

This pull request introduces a comprehensive theme system for the CommDesk application, migrating from hardcoded styles to CSS variables for light and dark mode support. It includes the creation of a centralized theme provider, design tokens, and utility classes, while updating various components (Dashboard, Member, Events, Contact & Support) to utilize these new tokens. The review feedback highlights a recurring issue with imperative DOM manipulation for hover states, recommending the use of CSS classes instead for better React idiomatic practices.

I am having trouble creating individual review comments. Click here to see my feedback.

src/features/Dashboard/components/TaskRow.tsx (20-27)

Avoid imperative DOM manipulation in React. Use CSS classes (e.g., hover:bg-[var(--cd-hover)]) or state-driven styling to handle hover states, which is more idiomatic and maintainable.

className={`flex items-center justify-between p-3 rounded-xl transition-colors ${!urgent ? "hover:bg-[var(--cd-hover)]" : ""}`}