Implemented Light Mode #58
Conversation
|
@asr1325 is attempting to deploy a commit to the notshrirang's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Hey! I've finally implemented light mode for your open-source project after trying hard, but few color schemes have changed from the previous version. Although the light mode works flawlessly. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
NotShrirang
added
enhancement
There was a problem hiding this comment.
Pull Request Overview
This PR implements a comprehensive light mode feature for the hackerblog-frontend application. The implementation introduces a theme context system that allows users to toggle between light and dark modes, with CSS custom properties (CSS variables) used throughout the application for consistent theming.
Key Changes:
- Added a ThemeContext with localStorage persistence for theme preferences
- Introduced CSS custom properties in
theme.cssfor light and dark color schemes - Updated all UI components to use CSS variables instead of hardcoded colors
- Added a theme toggle button in the navigation bar
Reviewed Changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/style/theme.css | Defines CSS custom properties for light and dark themes |
| src/context/ThemeContext.jsx | Provides theme context with toggle functionality and localStorage persistence |
| src/App.jsx | Wraps application with ThemeProvider and imports theme styles |
| src/components/TopBar.jsx | Adds theme toggle button to navigation |
| src/components/TopBar.css | Updates styles to use CSS variables |
| src/pages/AuthPages.css | Converts hardcoded colors to CSS variables |
| src/layout/Layout.css | Updates background to use CSS variables |
| src/components/ui/*.jsx | Updates all UI components to use CSS variables for theming |
| src/components/Footer.jsx | Converts footer styling to use CSS variables |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| --brand-hover-color: rgb(140,120,255); | ||
| --danger-color: #ff7b7b; | ||
| --danger-hover-color: #ff4d4d; | ||
| --card-bg: #ffffff; |
There was a problem hiding this comment.
The light theme is missing CSS custom properties that are used elsewhere in the codebase (--text-muted, --card-bg-light, --card-gradient, --card-border). These should be defined to prevent fallback to undefined values.
| --card-bg: #ffffff; | |
| --card-bg: #ffffff; | |
| --text-muted: #6c6c80; | |
| --card-bg-light: #f8f8ff; | |
| --card-gradient: linear-gradient(135deg, #e9e8fc 0%, #f7f6ff 100%); | |
| --card-border: 1px solid #e0e0f0; |
Copilot uses AI. Check for mistakes.
| </h3> | ||
| <p | ||
| className="font-google-code text-sm leading-relaxed text-center" | ||
| style={{ color: "var(--text-muted)" }} |
There was a problem hiding this comment.
The CSS custom property '--text-muted' is used but not defined in the theme.css file. This will result in no color being applied.
Copilot uses AI. Check for mistakes.
| rel="noopener noreferrer" | ||
| className="flex items-center justify-center w-10 h-10 rounded-lg text-xl transition-all duration-300 hover:-translate-y-0.5" | ||
| style={{ | ||
| backgroundColor: "var(--card-bg-light)", |
There was a problem hiding this comment.
The CSS custom properties '--card-bg-light' and '--text-muted' are used but not defined in the theme.css file. These will result in no styling being applied.
Copilot uses AI. Check for mistakes.
| e.currentTarget.style.boxShadow = "0 4px 12px rgba(160,160,255,0.3)"; | ||
| }} | ||
| onMouseLeave={(e) => { | ||
| e.currentTarget.style.backgroundColor = "var(--card-bg-light)"; |
There was a problem hiding this comment.
The CSS custom properties '--card-bg-light' and '--text-muted' are used but not defined in the theme.css file. These will result in no styling being applied.
Copilot uses AI. Check for mistakes.
| <span | ||
| key={subIndex} | ||
| className="text-sm cursor-not-allowed" | ||
| style={{ color: "var(--text-muted)" }} |
There was a problem hiding this comment.
The CSS custom properties '--card-bg-light' and '--text-muted' are used but not defined in the theme.css file. These will result in no styling being applied.
Copilot uses AI. Check for mistakes.
| key={item.title} | ||
| className="flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium" | ||
| style={{ | ||
| backgroundColor: "var(--card-bg-light)", |
There was a problem hiding this comment.
The CSS custom properties '--card-bg-light' and '--text-muted' are used but not defined in the theme.css file. These will result in no styling being applied.
Copilot uses AI. Check for mistakes.
| background: "var(--card-gradient)", | ||
| borderColor: "var(--card-border)", |
There was a problem hiding this comment.
The CSS custom properties '--card-gradient' and '--card-border' are used but not defined in the theme.css file. This will result in no styling being applied.
Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
@asr1325 Can you fix these suggestions? |
Ref. #12
Description
Implemented light mode for hackerblog-frontend.