Implement dark/light mode theme toggle for WHO FHIR IG template

[Copilot]

• Implement dark/light mode theme toggle with CSS variables
• Create theme toggle button in navbar next to language selector
• Add persistent theme preference using localStorage
• Extend CSS variables system for comprehensive theming
• Handle image backgrounds properly in dark mode
• Refactor JavaScript to separate file following repository conventions

Key Features Completed

• Light mode as default: Template loads in light mode with no additional configuration
• Theme toggle button: Clean button design with moon/sun icons positioned next to language selector
• Persistent theme preference: User's theme choice saved in localStorage and restored on page reload
• CSS variables-based theming: Comprehensive theming system using CSS custom properties
• Image background handling: Transparent images get white backgrounds in dark mode for visibility
• Clean JavaScript architecture: Theme toggle functionality moved to separate theme-toggle.js file following repository conventions and style guidelines

Implementation Details

The solution uses CSS custom properties for theming and follows existing JavaScript patterns:

• Light theme (default): Uses existing color scheme with new CSS variables
• Dark theme: Activated via [data-theme="dark"] attribute on document root
• JavaScript functionality: Handles theme switching, localStorage persistence, and UI updates in dedicated file
• Repository conventions: Follows same coding style as existing JS files like feedback.js

All functionality maintains backwards compatibility while providing a clean, maintainable architecture.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

@litlfred 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

[litlfred]

please put js in its own file and call it as is done with this:

<script src="assets/js/feedback.js"></script>

ensure the javascript is using same javascript conventions/style. keep it as lightweight as possible and use minimial or no external libraries.

@copilot

[Copilot]

please put js in its own file and call it as is done with this:

<script src="assets/js/feedback.js"></script>

...

I've moved the JavaScript to its own file following the repository conventions. The theme toggle functionality is now in content/assets/js/theme-toggle.js and follows the same coding style and patterns as existing JavaScript files like feedback.js. The implementation uses minimal external dependencies (none) and maintains the lightweight approach. The functionality remains exactly the same - users can still toggle between dark and light themes with persistent localStorage support.

Changes made in commit cd4e45d:

• Created theme-toggle.js with proper event handling using document.addEventListener("DOMContentLoaded", ...)
• Updated fragment-pageend.html to include the external JS file instead of inline script
• Maintained all existing functionality while following repository JavaScript conventions