Fix/theme toggle UI

[Ritikyadav2004]

Description

This PR resolves the issue where the theme toggle button only updated the logo/assets and failed to trigger a global UI color scheme transition (dark mode) for the rest of the application.

Root Cause:
Tailwind CSS v3 automatically wraps CSS variables defined in strings (like var(--bg-primary)) in rgb(var(...) / opacity) to support opacity modifiers, assuming the CSS variables contain raw RGB values. Since our CSS variables in index.css are defined as hex colors (e.g. #0a0b0d), this resulted in invalid CSS (e.g. rgb(#0a0b0d / 1)) being generated, causing the browser to ignore the background and text color declarations.

Solution:
Modified frontend/tailwind.config.js to define color mappings using standard CSS color-mix strings (e.g., color-mix(in srgb, var(--bg-primary) 100%, transparent)). This prevents Tailwind's default rgb(...) wrapping, and outputs valid, browser-compatible CSS variables.

Related Issues

Closes #2353

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How Has This Been Tested?

• Unit Tests: Ran the Vitest test suite (npm run test), validating all 566 tests successfully.
• E2E Tests: Ran Playwright E2E tests (npx playwright test), passing all core theme toggling and settings persistence tests.
• Build verification: Successfully built the application using Vite (npm run build).

Checklist

• My code follows the code style of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.