Fix & Polish Dark Mode Styling for Docusaurus Docs Site (apps/mieweb-forms-doc)

[lattln]

Description

---

The documentation site under apps/mieweb-forms-doc is built with Docusaurus, which already provides built-in dark mode support. However, there are visual issues and inconsistencies when dark mode is enabled—primarily affecting:

• The custom landing page
• Custom CSS overrides
• Certain Docusaurus content styles (docs, layout elements)

This ticket focuses on fixing and refining dark mode styling where custom styles conflict with or override Docusaurus defaults.

Scope / Goals

---

• Ensure dark mode renders correctly and consistently across the docs site
• Fix visual issues caused by custom styles that do not adapt to Docusaurus dark mode
• Maintain full compatibility with Docusaurus’ native theme switching

In Scope

---

• Update custom landing page styles to properly support dark mode

• Adjust custom CSS overrides (e.g. globals, components, layout tweaks)

• Fix dark-mode-specific issues in:

  • Docs content
  • Code blocks
  • Tables
  • Callouts / admonitions
  • Navigation / sidebar (if affected by custom styles)

• Use Docusaurus theme variables / selectors where appropriate (e.g. [data-theme="dark"])

Out of Scope

---

• Replacing Docusaurus’ built-in theming system
• Migrating docs to shared Questionnaire Builder semantic theme variables
• Content changes or layout redesigns

Acceptance Criteria

---

• Dark mode works cleanly using Docusaurus’ native toggle
• No unreadable text, incorrect backgrounds, or contrast issues in dark mode
• Custom landing page looks visually consistent in both light and dark themes
• Light mode appearance remains unchanged
• Verified on multiple docs pages and the landing page

Notes

This task is strictly a Docusaurus dark mode compatibility and polish effort, focused on correcting custom styles—not implementing a new theming system.

---