Refactor: Replace custom dark mode with Tailwind native system

[Sidali-Djeghbal]

What does this PR do?

This PR delivers a major cleanup and modernization of the front-end structure for the overall dark mode implementation.
It replaces the manual CSS-based dark mode system with Tailwind’s built-in dark mode utilities, improving maintainability, performance, and consistency.

✅ Summary of All Changes

🧩 1. Fixed HTML Structure

• Improved indentation and readability.

🌗 2. Replaced Custom Dark Mode CSS with Tailwind Native System

Old issue:
A file css/dark-mode.css contained ~14 !important overrides to manually force dark mode colors.
This approach conflicted with Tailwind’s utility classes and made theme switching unpredictable.

Fix implemented:

• 🗑️ Deleted css/dark-mode.css.

• 🧭 Configured Tailwind dark mode properly:

  <script>
    tailwind.config = {
      darkMode: ['selector', '[data-theme="dark"]']
    }
  </script>

• ✅ Replaced CSS overrides with Tailwind’s dark: classes, e.g.:

  • bg-white → dark:bg-gray-900
  • text-gray-900 → dark:text-white
  • text-gray-600 → dark:text-gray-300
  • border-gray-200 → dark:border-gray-700

• All cards, texts, and backgrounds now respond automatically to the selected theme.

⚙️ 3. JavaScript Improvements

• Moved inline dark mode logic from HTML to a new file: js/theme-toggle.js.
• Added try/catch around localStorage calls to prevent runtime errors in browsers with restricted storage.
• Theme state now syncs automatically with the data-theme attribute and persists across reloads.

🎨 4. UI and UX Enhancements

• Unified color usage (primary and golden accents).
• Added consistent transition-transform and hover:shadow-2xl for all cards.
• Improved responsiveness — grid adapts for mobile and desktop seamlessly.
• Adjusted spacing (p-6, mb-3, gap-8) for balanced visual hierarchy.

---

Related Issue

Fixes #13 — Dark mode conflicts and inconsistency.

---

Type of Change

• Bug fix
• New feature (native dark mode support)
• Style/UI update
• Code cleanup

---

Testing Done

• Tested in desktop browser
• Tested on mobile viewport (375px width)
• Verified theme toggle persistence using localStorage
• No console errors
• Verified Tailwind dark: utilities render correctly

---

Screenshots

Before (Broken Layout + Manual CSS Dark Mode):

• Inconsistent colors across sections
• !important overrides caused style conflicts
• Extra closing tags broke grid alignment

After (Tailwind Dark Mode + Fixed Layout):
✅ Clean structure
✅ Smooth theme switching
✅ Unified hover animations
✅ Consistent card spacing

---

✅ Ready to merge — all checks passed! 🇲🇷💻
This PR aligns the project fully with TailwindCSS best practices and eliminates manual CSS maintenance overhead.

[vercel]

@Sidali-Djeghbal is attempting to deploy a commit to the ahmedabdat's projects Team on Vercel.

A member of the Team first needs to authorize it.

[ahmed-abdat]

Hi @Sidali-Djeghbal! 👋

Your implementation is excellent and ready to merge! However, there are merge conflicts because several PRs (#22, #23, #24, #25) were merged to
main after you opened this PR.

How to Fix

Easy Way (Recommended):

1. Go to your fork: https://github.com/Sidali-Djeghbal/demo-repository
2. Click the "Sync fork" button
3. Click "Update branch"
4. GitHub will automatically update your main branch
5. The conflicts should resolve automatically

If conflicts remain:

Let me know and I'll help you resolve them! You can also:

• Reply here if you need guidance

No rush - take your time. This is a great learning opportunity!
Once updated, this PR will be merged immediately