fix: resolve dark theme contrast, collapsed panel overlaps, and add g…#466
Open
vivekyadav-3 wants to merge 1 commit into
Open
fix: resolve dark theme contrast, collapsed panel overlaps, and add g…#466vivekyadav-3 wants to merge 1 commit into
vivekyadav-3 wants to merge 1 commit into
Conversation
…lobal header theme toggle
There was a problem hiding this comment.
Pull request overview
This PR addresses several UI/UX issues by improving dark-theme readability, preventing collapsed right-panel content from overlapping, and introducing a global theme toggle in the header to complement the existing settings modal.
Changes:
- Added a header theme toggle button and wired it to the existing theme preference logic.
- Adjusted theme preference handling to apply changes immediately (and persist dark mode).
- Added CSS overrides for dark-theme summary box contrast and for hiding summary content when the right panel is collapsed.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
index.html |
Adds the header theme toggle and updates preference persistence / event handling for dark mode + compact view. |
css/index.css |
Introduces styling for the new theme toggle, improves dark theme contrast for the summary box, and hides the summary box when the right panel is collapsed. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+391
to
+398
| if (settingsSave) { | ||
| settingsSave.addEventListener('click', () => { | ||
| localStorage.setItem('studyplan_dark_mode', darkModeToggle.checked); | ||
| localStorage.setItem('studyplan_compact_view', compactViewToggle.checked); | ||
| loadPreferences(); | ||
| settingsModal.style.display = 'none'; | ||
| }); | ||
| } |
Comment on lines
+416
to
+423
| if (compactViewToggle) { | ||
| compactViewToggle.addEventListener('change', (e) => { | ||
| if (e.target.checked) { | ||
| document.body.classList.add('compact-view'); | ||
| } else { | ||
| document.body.classList.remove('compact-view'); | ||
| } | ||
| }); |
Comment on lines
+50
to
+53
| <button id="header-dark-mode-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode" title="Toggle Theme"> | ||
| <svg class="sun-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg> | ||
| <svg class="moon-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg> | ||
| </button> |
Comment on lines
+2193
to
+2205
| /* Show/hide Sun and Moon icons based on data-theme */ | ||
| :root[data-theme="dark"] .theme-toggle-btn .sun-icon { | ||
| display: block; | ||
| } | ||
| :root[data-theme="dark"] .theme-toggle-btn .moon-icon { | ||
| display: none; | ||
| } | ||
| :root[data-theme="light"] .theme-toggle-btn .sun-icon { | ||
| display: none; | ||
| } | ||
| :root[data-theme="light"] .theme-toggle-btn .moon-icon { | ||
| display: block; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
(Optional: If you were assigned a specific issue, put
Closes #<issue_number>here. Otherwise, you can delete this section.)Summary
This PR fixes multiple UI/UX issues related to the dark theme, improves panel layout, and adds a global theme toggle. This is a contribution for GSSoC '26!
Changes Made
Testing
Screenshots
(Optional: If you have before/after screenshots, you can drag and drop them right here! It really helps the reviewers.)
Checklist