particles colour fix in black and white mode #132
Conversation
WalkthroughAdds theme-aware particle coloring: particles now receive a color determined by the current theme (dark → white, light → black) via a hook in Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant ThemeProvider as next-themes
participant Hero as HeroSection
participant Part as ParticlesComponent
Browser->>ThemeProvider: user sets theme (light/dark)
ThemeProvider-->>Browser: current theme value
Browser->>Hero: render HeroSection
Hero->>Part: mount Particles (no hardcoded color)
Part->>ThemeProvider: read theme via useTheme
ThemeProvider-->>Part: theme ("dark" or "light")
Part->>Part: set particleColor (white if dark, black if light)
Part->>Part: apply particleColor to finalStyle
Part-->>Browser: render particles with computed color
Note right of Part: particleColor updates on theme change
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
components/ui/particles.tsx (1)
153-153: No current code passescolorvia thestyleprop toParticles. The verification found two component usages (incomponents/ui/sparkles.tsxandcomponents/sections/hero/index.tsx), neither of which attempts to pass astyleprop. However, the underlying API design concern remains valid: the component silently overrides anycolorin thestyleprop withparticleColor, which could confuse future developers. Consider documenting this constraint in the component's JSDoc or TypeScript interface to make the API contract explicit.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/sections/hero/index.tsx(1 hunks)components/ui/particles.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
components/sections/hero/index.tsx (1)
components/ui/particles.tsx (1)
Particles(125-257)
🔇 Additional comments (2)
components/ui/particles.tsx (1)
9-9: LGTM!The import of
useThemefrom next-themes is correct and enables theme-aware particle colors.components/sections/hero/index.tsx (1)
106-109: LGTM! Simplified usage by removing inline color styling.The removal of the inline
styleprop is appropriate, as particle color is now controlled centrally within the Particles component based on the active theme. This simplifies usage and ensures consistent theme-aware behavior.
components/ui/particles.tsx
Outdated
| const [isInitialized, setIsInitialized] = useState(false); | ||
| const { theme } = useTheme(); | ||
| const [particleColor, setParticleColor] = useState("#000000"); | ||
| useEffect(() => { | ||
| if (theme === "dark") { | ||
| setParticleColor("#FFFFFF"); // white for dark mode | ||
| } else { | ||
| setParticleColor("#000000"); // black for light mode | ||
| } | ||
| }, [theme]); |
There was a problem hiding this comment.
Use resolvedTheme and check mounted to handle system theme and prevent hydration issues.
The current implementation has two issues:
-
System theme not handled: When
theme === "system", the code falls through to the else branch and sets particles to black, even if the user's OS is in dark mode. You should useresolvedThemeinstead, which returns the actual active theme ("dark" or "light") regardless of whether the user selected "system". -
Hydration mismatch risk: The theme is not available during SSR, which can cause the initial server-rendered output to differ from the client-rendered output, triggering React hydration warnings. You should check the
mountedflag before rendering theme-dependent content.
Based on learnings.
Apply this diff to fix both issues:
- const [isInitialized, setIsInitialized] = useState(false);
- const { theme } = useTheme();
-const [particleColor, setParticleColor] = useState("#000000");
-useEffect(() => {
- if (theme === "dark") {
- setParticleColor("#FFFFFF"); // white for dark mode
- } else {
- setParticleColor("#000000"); // black for light mode
- }
-}, [theme]);
+ const [isInitialized, setIsInitialized] = useState(false);
+ const { resolvedTheme, theme } = useTheme();
+ const [particleColor, setParticleColor] = useState("#000000");
+
+ useEffect(() => {
+ const activeTheme = resolvedTheme || theme;
+ if (activeTheme === "dark") {
+ setParticleColor("#FFFFFF"); // white for dark mode
+ } else {
+ setParticleColor("#000000"); // black for light mode
+ }
+ }, [resolvedTheme, theme]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [isInitialized, setIsInitialized] = useState(false); | |
| const { theme } = useTheme(); | |
| const [particleColor, setParticleColor] = useState("#000000"); | |
| useEffect(() => { | |
| if (theme === "dark") { | |
| setParticleColor("#FFFFFF"); // white for dark mode | |
| } else { | |
| setParticleColor("#000000"); // black for light mode | |
| } | |
| }, [theme]); | |
| const [isInitialized, setIsInitialized] = useState(false); | |
| const { resolvedTheme, theme } = useTheme(); | |
| const [particleColor, setParticleColor] = useState("#000000"); | |
| useEffect(() => { | |
| const activeTheme = resolvedTheme || theme; | |
| if (activeTheme === "dark") { | |
| setParticleColor("#FFFFFF"); // white for dark mode | |
| } else { | |
| setParticleColor("#000000"); // black for light mode | |
| } | |
| }, [resolvedTheme, theme]); |
🤖 Prompt for AI Agents
In components/ui/particles.tsx around lines 132 to 141, the theme-dependent
particle color uses theme and runs during SSR which causes both incorrect
behavior for "system" theme and potential hydration mismatches; change to read
resolvedTheme from useTheme (which returns "dark" or "light" for system) and
guard the effect/render with a mounted check (or use the mounted flag from
useTheme) so you only derive and set particleColor on the client after mounted
is true and use resolvedTheme === "dark" to set white otherwise black.
|
@vaishnaviparabkar90 we will review it please wait |
2 participants
Closes #119
Screenshots/Videos
Summary by CodeRabbit
Style
Refactor