Repository navigation
Dark mode - #1154
Merged
Merged
Dark mode#1154
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Thank you for submitting your pull request! We'll review it as soon as possible. For further communication, join our discord server https://discord.gg/tSqtvHUJzE. |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements dark mode support throughout the frontend by introducing a ThemeContext and a ThemeToggle component, as well as updating various UI components to adapt to light and dark themes. Key changes include:
- Integration of a ThemeProvider in main.jsx and creation of ThemeContext for handling theme state.
- Updates to UI components (UserAuthForm, Navbar, InPageNavigation) to include dark mode compatible CSS classes.
- Addition of a new ThemeToggle component for user-controlled theme switching.
Reviewed Changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/pages/UserAuthForm.jsx | Updated sign-in/up elements to adjust for dark mode styling. |
| frontend/src/main.jsx | Wrapped the App with ThemeProvider. |
| frontend/src/context/ThemeContext.jsx | Created a theme context to persist and manage theme state. |
| frontend/src/components/ThemeToggle.jsx | New component implemented to toggle between themes. |
| frontend/src/components/Navbar.jsx | Modified Navbar UI to support dark mode elements and themes. |
| frontend/src/components/InPageNavigation.jsx | Updated navigation styling with dark mode conditional classes. |
Files not reviewed (1)
- frontend/src/index.css: Language not supported
Comments suppressed due to low confidence (1)
frontend/src/context/ThemeContext.jsx:16
- [nitpick] To improve clarity, consider consolidating the theme and isDarkMode state updates into a single effect, as the relationship between them is interdependent.
const [isDarkMode, setIsDarkMode] = useState(() => { if (theme === 'system') { return window.matchMedia('(prefers-color-scheme: dark)').matches } return theme === 'dark'; });
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces dark mode support across the frontend by updating styling and adding a theme toggle along with a ThemeProvider context. Key changes include:
- Wrapping the main app component with a ThemeProvider for theme management.
- Updating component styles (navbar, buttons, modals, etc.) to support light, dark, and system modes.
- Adding a new ThemeToggle component to allow users to switch themes.
Reviewed Changes
Copilot reviewed 24 out of 25 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/main.jsx | Wrapped App with ThemeProvider for theme switching. |
| frontend/src/context/ThemeContext.jsx | Added ThemeContext to manage theme state and update dark mode classes. |
| frontend/src/components/UserNavigationPanel.jsx | Updated dark mode styles and button hover effects. |
| frontend/src/components/ThemeToggle.jsx | New component for toggling between light, dark, and system themes. |
| frontend/src/components/Tags.jsx | Adjusted styles to support dark mode for tag elements. |
| frontend/src/components/SubscribeModal.jsx | Revised styles for dark mode in modal and button transitions. |
| frontend/src/components/SideNavBar.jsx | Updated sidebar styling for consistent dark mode appearance. |
| frontend/src/components/PublishForm.jsx | Modified form styles and button structure with dark mode support. |
| frontend/src/components/ProjectInteraction.jsx | Updated styles for interaction buttons in dark mode. |
| frontend/src/components/ProjectEditor.jsx | Added dark mode support in header elements. |
| frontend/src/components/NotificationCard.jsx | Revised link and background styling for dark mode. |
| frontend/src/components/NoData.jsx | Adjusted no-data message colors for dark theme. |
| frontend/src/components/Navbar.jsx | Integrated ThemeToggle and updated navbar styling for dark mode. |
| frontend/src/components/LoadMoreData.jsx | Updated loading button styles to include dark mode colors. |
| frontend/src/components/InPageNavigation.jsx | Updated navigation styling for dark background consistency. |
| frontend/src/components/Comments.jsx | Tweaked comments container classes for dark mode. |
| frontend/src/components/CommentField.jsx | Updated button classes to support dark mode variations. |
| frontend/src/components/CommentCard.jsx | Revised reply and delete button styles for dark mode. |
| frontend/src/components/AboutUser.jsx | Updated icon and text colors to improve dark mode appearance. |
Files not reviewed (1)
- frontend/src/index.css: Language not supported
Comments suppressed due to low confidence (2)
frontend/src/components/PublishForm.jsx:165
- It appears 'publichProject' is misspelled; consider renaming it to 'publishProject' for clarity and consistency.
onClick={publichProject}
frontend/src/components/UserNavigationPanel.jsx:44
- [nitpick] The class 'mg-1' might be a typo; consider using a valid margin utility class such as 'm-1'.
<h1 className="font-bold text-xl mg-1">Sign Out</h1>
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces dark mode theme support across the frontend along with some UI style updates and minor bug fixes.
- Implements a theme toggle using a new ThemeContext provider.
- Applies dark mode class variants throughout multiple components.
- Fixes a naming typo in the PublishForm component.
Reviewed Changes
Copilot reviewed 24 out of 25 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/main.jsx | Wraps the app with ThemeProvider |
| frontend/src/context/ThemeContext.jsx | Provides dark mode functionality with system and manual modes |
| frontend/src/components/UserNavigationPanel.jsx | Updates UI with dark mode styles; contains a potential class typo |
| frontend/src/components/ThemeToggle.jsx | Introduces a theme toggle button with dark mode icons and transitions |
| frontend/src/components/Tags.jsx | Adds dark mode variants and accessibility improvements |
| frontend/src/components/SubscribeModal.jsx | Updates modal styles to support dark mode |
| frontend/src/components/SideNavBar.jsx | Applies dark mode class tweaks for improved styling |
| frontend/src/components/PublishForm.jsx | Renames a function for clarity and updates dark mode styling |
| frontend/src/components/ProjectInteraction.jsx | Updates like and comment button styles for dark mode support |
| frontend/src/components/ProjectEditor.jsx | Adds dark mode adjustments to logo and title styles |
| frontend/src/components/NotificationCard.jsx | Enhances dark mode styles in notification links and cards |
| frontend/src/components/NoData.jsx | Adds dark mode styling to the no-data message |
| frontend/src/components/Navbar.jsx | Integrates ThemeToggle and updates search and logo elements for dark mode |
| frontend/src/components/LoadMoreData.jsx | Tweaks button styles to adapt to dark mode |
| frontend/src/components/InPageNavigation.jsx | Updates tab navigation with dark mode color variants |
| frontend/src/components/Comments.jsx | Adds dark mode backdrop and text color adjustments for comments |
| frontend/src/components/CommentField.jsx | Updates button styling for dark mode |
| frontend/src/components/CommentCard.jsx | Adjusts dark mode styles for reply and delete actions |
| frontend/src/components/AboutUser.jsx | Improves icon styling with dark mode variants |
Files not reviewed (1)
- frontend/src/index.css: Language not supported
Comments suppressed due to low confidence (1)
frontend/src/components/UserNavigationPanel.jsx:41
- [nitpick] The utility class 'mg-1' does not appear to be a standard Tailwind CSS class. Consider verifying if it is intentional or if it should be replaced with a standard margin class such as 'm-1'.
<h1 className="font-bold text-xl mg-1">Sign Out</h1>
This branch was previously deployed
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.
Closes: #985
Describe the add-ons or changes you've made 📃
Type of change ☑️
What sort of change have you made: