Feature/dark mode toggle

[delia-qodo]

PR Type

Enhancement

---

Description

• Add dark mode toggle button with moon icon
• Implement persistent dark mode preference using localStorage
• Create comprehensive dark theme styles for all components
• Add IDE configuration files for development setup

---

Changes walkthrough 📝

	Relevant files
Enhancement	2 files index.html Add dark mode toggle button and JavaScript logic                  +25/-0    master.css Implement comprehensive dark theme styles                                +104/-0
Configuration changes	5 files profiles_settings.xml Add IDE inspection profile settings                                            +6/-0      misc.xml Configure Python SDK settings                                                        +4/-0      modules.xml Define project module structure                                                    +8/-0      product-workshop.iml Set up Python module configuration                                              +8/-0      vcs.xml Configure version control mappings                                              +7/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-code-review]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Inline Styles The dark mode toggle button uses inline styles instead of CSS classes, which goes against best practices for maintainability and consistency with the rest of the codebase. <button id="darkModeToggle" title="Toggle dark mode" style="background:none;border:none;cursor:pointer;font-size:20px;margin-right:15px;"> <i class="fa-regular fa-moon"></i> </button> CSS Specificity Extensive use of !important declarations in dark mode styles could lead to maintenance issues and make future style overrides difficult. background-color: #23272a !important; color: #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .dark-mode .bg-eee, .dark-mode .btn-shape.bg-eee, .dark-mode .projects thead td { background-color: #2c2f33 !important; color: #e0e0e0 !important; } .dark-mode .c-black { color: #e0e0e0 !important; } .dark-mode .c-grey { color: #b0b0b0 !important; } .dark-mode .border, .dark-mode .welcome .body, .dark-mode .tasks .task-row:not(:last-of-type), .dark-mode .latest-news .news-row:not(:last-of-type), .dark-mode .latest-uploads ul li:not(:last-child), .dark-mode .projects tbody td, .dark-mode .projects table img, .dark-mode .profile-page .info-box .box, .dark-mode .profile-page .skills-card ul li:not(:last-child) { border-color: #333 !important; } .dark-mode .projects tbody tr:hover td { background-color: #23272a !important; } .dark-mode .toggle-switch { background-color: #444; } .dark-mode .toggle-switch::before { background-color: #23272a; color: #aaa; } .dark-mode .toggle-checkbox:checked+.toggle-switch { background-color: var(--blue-color); } .dark-mode .toggle-checkbox:checked+.toggle-switch::before { color: var(--blue-color); } .dark-mode .message { background: #23272a; color: #e0e0e0; } .dark-mode .message.notice { background: var(--green-color); } .dark-mode .message.error { background: var(--red-color); } .dark-mode .message .close { color: #e0e0e0; }

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Update toggle button icon state The dark mode preference loading should also update the toggle button icon to reflect the current state. Without this, the button will always show the moon icon even when dark mode is active. index.html [594-597] // Load preference if (localStorage.getItem('darkMode') === 'enabled') { body.classList.add('dark-mode'); + toggleBtn.innerHTML = '<i class="fa-regular fa-sun"></i>'; } Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that when dark mode is enabled from localStorage on page load, the toggle button's icon is not updated. This creates a UI inconsistency. The proposed change fixes this by setting the correct icon, improving the user experience.	Medium
	Add icon toggle functionality The toggle button should change its icon when clicked to provide visual feedback. Currently it always shows the same moon icon regardless of the current mode state. index.html [601-608] toggleBtn.addEventListener('click', function() { body.classList.toggle('dark-mode'); if (body.classList.contains('dark-mode')) { localStorage.setItem('darkMode', 'enabled'); + toggleBtn.innerHTML = '<i class="fa-regular fa-sun"></i>'; } else { localStorage.setItem('darkMode', 'disabled'); + toggleBtn.innerHTML = '<i class="fa-regular fa-moon"></i>'; } }); Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly points out that the dark mode toggle button lacks visual feedback upon being clicked. The icon should change to reflect the current state (sun for dark mode, moon for light mode). The proposed code correctly implements this essential UI/UX feature.	Medium
Update