AI for Frontend Developers — Day 71

AI for Frontend Developers — Week 11 Day 1

Implementing a Complete Theme System for My AI Chat Application 🎨

One of the most noticeable aspects of any application is its visual appearance. Users spend hours interacting with interfaces, and a well-designed theme can significantly improve usability, readability, and overall experience.

Today I worked on implementing a scalable theme system for my AI Chat application. Instead of hardcoding colors throughout the codebase, I centralized all color definitions using CSS custom properties (variables), making the application easier to maintain and extend.

Why Refactor the Existing Styling?

Initially, most UI colors were directly hardcoded inside component styles and CSS classes.

Example:

background: #020617;
color: #f1f5f9;
border: rgba(255, 255, 255, 0.1);

While this works for a single theme, it quickly becomes difficult to manage when introducing multiple themes.

Problems with this approach:

• Color values get repeated throughout the project.
• Updating a color requires searching multiple files.
• Supporting additional themes becomes cumbersome.
• Maintaining visual consistency becomes difficult.

To solve this, I moved all theme-related colors into centralized CSS variables.

Creating a Theme Foundation with CSS Variables

I introduced a global theme configuration using CSS custom properties.

Default Theme (Dark Navy)

:root {
  /* ── Backgrounds ── */
  --bg-gradient:        linear-gradient(135deg, #020617, #0f172a);
  --bg-deep:            #020617;
  --bg-secondary:       #0f172a;
  --bg-sidebar:         #171717;
  --bg-chat-box:        #111827;
  --bg-surface:         #1e293b;
  --bg-message-ai:      #1e293b;
  --bg-message-ai-alt:  #1f2937;
  --bg-message-user:    linear-gradient(135deg, #2563eb, #1d4ed8);
  --bg-input:           #020617;
  --bg-dropdown:        #1a2035;
  --bg-modal:           #1c202f;
  --bg-modal-alpha:     rgba(15, 18, 32, 0.95);
  --bg-modal-sticky:    rgba(15, 18, 32, 0.98);

  /* ── Text ── */
  --text-primary:       #f1f5f9;
  --text-primary-soft:  #e2e8f0;
  --text-secondary:     #cbd5e1;
  --text-muted:         #9b9b9b;
  --text-dim:           #64748b;
  --text-faint:         #5e5e5e;

  /* ── Accent (Indigo) ── */
  --accent:             #818cf8;
  --accent-hover:       #4f46e5;
  --accent-light:       #a5b4fc;
  --accent-blue:        #3b82f6;
  --accent-soft:        rgba(99, 102, 241, 0.12);
  --accent-soft-2:      rgba(99, 102, 241, 0.08);
  --accent-soft-3:      rgba(99, 102, 241, 0.15);
  --accent-border:      rgba(99, 102, 241, 0.2);
  --accent-border-mid:  rgba(99, 102, 241, 0.4);

  /* ── Borders ── */
  --border:             rgba(255, 255, 255, 0.1);
  --border-soft:        rgba(255, 255, 255, 0.08);
  --border-subtle:      rgba(255, 255, 255, 0.06);
  --border-faint:       rgba(255, 255, 255, 0.04);
  --border-input:       #334155;
  --border-code:        #1f2937;

  /* ── Semantic ── */
  --danger:             #f87171;
  --danger-light:       #fca5a5;
  --success:            #22c55e;
  --success-light:      #4ade80;

  /* ── Scrollbars ── */
  --scrollbar:          #2e2e2e;
  --scrollbar-mid:      #374151;
  --scrollbar-dark:     #1e2240;
}

Now UI components no longer depend on hardcoded colors.

Instead of:

background: #020617;

I can simply use:

background: var(--bg-deep);

This creates a single source of truth for all design tokens.

Implementing Light Mode

Once the foundation was in place, adding new themes became much easier.

For Light Mode, I only needed to override the variables:

[data-theme="light"] {
  /* ── Backgrounds ── */
  --bg-gradient:        linear-gradient(135deg, #eef2f7, #e8edf5);
  --bg-deep:            #eef2f7;
  --bg-secondary:       #e2e8f2;
  --bg-sidebar:         #dde3ee;
  --bg-chat-box:        #eef2f7;
  --bg-surface:         #d6dce8;
  --bg-message-ai:      #e8edf5;
  --bg-message-ai-alt:  #dde3ee;
  --bg-message-user:    linear-gradient(135deg, #2563eb, #1d4ed8);
  --bg-input:           #e2e8f2;
  --bg-dropdown:        #dde3ee;
  --bg-modal:           #eef2f7;
  --bg-modal-alpha:     rgba(238, 242, 247, 0.97);
  --bg-modal-sticky:    rgba(238, 242, 247, 0.98);

  /* ── Text ── */
  --text-primary:       #1a2035;
  --text-primary-soft:  #2d3a52;
  --text-secondary:     #3d4f6e;
  --text-muted:         #5a6e8c;
  --text-dim:           #7a8faa;
  --text-faint:         #a0b0c4;

  /* ── Accent (Indigo) ── */
  --accent:             #4f46e5;
  --accent-hover:       #3730a3;
  --accent-light:       #6366f1;
  --accent-blue:        #2563eb;
  --accent-soft:        rgba(79, 70, 229, 0.1);
  --accent-soft-2:      rgba(79, 70, 229, 0.07);
  --accent-soft-3:      rgba(79, 70, 229, 0.13);
  --accent-border:      rgba(79, 70, 229, 0.3);
  --accent-border-mid:  rgba(79, 70, 229, 0.5);

  /* ── Borders — visible on light bg ── */
  --border:             rgba(100, 116, 139, 0.25);
  --border-soft:        rgba(100, 116, 139, 0.18);
  --border-subtle:      rgba(100, 116, 139, 0.15);
  --border-faint:       rgba(100, 116, 139, 0.1);
  --border-input:       rgba(100, 116, 139, 0.35);
  --border-code:        rgba(100, 116, 139, 0.2);

  /* ── Semantic ── */
  --danger:             #dc2626;
  --danger-light:       #ef4444;
  --success:            #16a34a;
  --success-light:      #22c55e;

  /* ── Scrollbars ── */
  --scrollbar:          #b0bdd0;
  --scrollbar-mid:      #94a3b8;
  --scrollbar-dark:     #cbd5e1;
}

The entire application instantly adapts to the selected theme because every component references variables instead of hardcoded values.

Themes Added

After implementing the theme architecture, I expanded the application with multiple theme options.

Dark Themes

🌑 Custom Dark Navy
⚫ Pure Black
🩶 Slate Gray
🟤 Dark Mocha
🔥 Obsidian Warm
🌿 Midnight Green

Light Themes

☀️ Light Mode
🤍 Soft White
📄 Paper
🌸 Cherry Blossom
🩵 Sky
🌿 Fresh Mint
🍊 Peach

Special Themes

🟣 Cyberpunk
⚡ Hacker

Benefits of This Approach

Moving colors into theme variables provided several advantages:

+----------------------+--------------------------------------------+
| Benefit              | Description                                |
+----------------------+--------------------------------------------+
| Scalability          | Easy to add new themes                     |
| Maintainability      | Colors managed from one location           |
| Consistency          | Same design tokens across the app          |
| Flexibility          | Instant theme switching                    |
| Cleaner CSS          | Less duplication and hardcoded values      |
+----------------------+--------------------------------------------+

Most importantly, future themes can now be added with minimal effort by simply defining a new theme block and overriding the required variables.

Settings Integration

Since I already built a dedicated Settings modal during Week 10, theme selection naturally fits into that architecture.

The selected theme is stored in user settings and automatically applied when the user returns to the application, providing a personalized and consistent experience across sessions.

Conclusion

Today’s work was less about adding a visible feature and more about improving the application’s architecture. Refactoring hardcoded colors into centralized CSS variables created a scalable foundation that now supports multiple themes with minimal complexity.

With this system in place, future visual customizations can be implemented much faster while keeping the codebase clean and maintainable.

🔗 Live Demo & Code

👉 Live App: https://ai-chat-app-learning.netlify.app

👉 GitHub Repo: https://github.com/RohitKuwar/ai-chat-app/tree/feature/theme

🚀 What’s Next

Today I implemented a scalable theme architecture by moving hardcoded colors into centralized CSS variables and introducing multiple dark, light, and special themes.

Next week, I’ll continue expanding the settings system by integrating more LLM model options, temperature controls to make the AI experience even more personalized.

I’ll be posting here daily as I learn. Let’s grow together and stay ahead in the AI era 🚀

Happy learning ✌️