Feature/dark mode support

[ishwarthecodddr]

Addressed Issues:

Fixes #35

Screenshots/Recordings:

Additional Notes:

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions.
• If applicable, I have made corresponding changes or additions to the documentation.
• If applicable, I have made corresponding changes or additions to tests.
• My changes generate no new warnings or errors.
• I have joined the Stability Nexus's Discord server and I will share a link to this PR with the project maintainers there.
• I have read the Contribution Guidelines.
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.

Summary by CodeRabbit

• New Features

  • Added dark mode toggle accessible from the header.
  • Dark mode automatically detects system color preferences and persists across sessions.

• Style

  • Optimized styling for light and dark themes throughout the application.
  • Updated icons to automatically adjust colors based on the active theme.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR implements dark mode support by introducing a ModeToggle component that toggles theme via localStorage and DOM manipulation, adds dark-mode Tailwind variants across components and pages, establishes automatic OS preference detection through a root-level script, and updates styling for consistent light/dark appearance.

Changes

Cohort / File(s)	Summary
Dark Mode Infrastructure components/mode-toggle.tsx, app/layout.tsx, app/globals.css	Introduces ModeToggle component for theme switching with localStorage persistence, injects theme detection script in layout root, and adds base body styling with light/dark color defaults and transitions.
Component Styling Updates components/card.tsx, components/footer.tsx, components/header.tsx	Adds dark mode variant classes (dark:border-zinc-700, dark:bg-gray-800/50, dark:text-gray-100) to card and research components, replaces hard-coded SVG fill colors with currentColor in footer, and integrates ModeToggle into header navigation.
Page Styling Updates app/research/page.tsx	Applies dark mode variants to page headings, card containers, and text elements for consistent dark appearance.
Minor Component Updates app/blockchains/page.tsx	Removes unused index prop from Card component usage.

Sequence Diagram

sequenceDiagram
    participant User as User/Browser
    participant Layout as Root Layout Script
    participant LocalStorage as localStorage
    participant OS as OS Preferences
    participant DOM as Document DOM
    participant Toggle as ModeToggle Component
    participant App as Application UI

    User->>Layout: Page Load
    activate Layout
    Layout->>LocalStorage: Read 'theme' value
    LocalStorage-->>Layout: theme (or null)
    Layout->>OS: Check prefers-color-scheme
    OS-->>Layout: 'dark' or 'light'
    Layout->>DOM: Apply/remove 'dark' class
    deactivate Layout
    DOM-->>App: Render with theme
    
    User->>Toggle: Click theme toggle button
    activate Toggle
    Toggle->>DOM: Get current 'dark' class state
    DOM-->>Toggle: class info
    Toggle->>Toggle: Flip theme state
    Toggle->>DOM: Add/remove 'dark' class
    Toggle->>LocalStorage: Persist theme choice
    deactivate Toggle
    DOM-->>App: Re-render with new theme

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• Zahnentferner

Poem

🌙 A toggle was born, with Sun and Moon so bright,
Dark corners now glow, from day into night,
localStorage whispers what users prefer,
OS and localStorage in harmony stir,
Dark mode blooms forth—the UI's delight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The PR implements dark mode with a theme toggle and styling updates, but does not use next-themes as proposed in issue #35, instead using manual localStorage and classList management.	Clarify whether the custom implementation meets requirements or if next-themes integration is still expected per issue #35.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Feature/dark mode support' clearly and concisely describes the main change in the pull request: implementing dark mode support.
Out of Scope Changes check	✅ Passed	All changes directly support dark mode implementation: theme toggle component, CSS styling updates, dark color variants, and localStorage persistence are all within scope of issue #35.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

components/card.tsx (1)

31-36: Trailing <br /> after the last description line creates unnecessary bottom whitespace.

Every <span> gets a <br /> appended, including the last item. Consider conditionally rendering it.

♻️ Proposed fix

-              return (
-                <span key={idx}>
-                  {item}
-                  <br />
-                </span>
-                )
+              return (
+                <span key={idx}>
+                  {item}
+                  {idx < description.split("\n").length - 1 && <br />}
+                </span>
+                )

Or more cleanly, split once and pass the array:

{description.split("\n").map((item, idx, arr) => (
  <span key={idx}>
    {item}
    {idx < arr.length - 1 && <br />}
  </span>
))}

app/research/page.tsx (1)

261-261: Minor: double space in className.

"text-2xl font-semibold" has an extra space.

Proposed fix

-                <h3 className="text-2xl  font-semibold leading-6 tracking-tight text-gray-800 dark:text-gray-100">
+                <h3 className="text-2xl font-semibold leading-6 tracking-tight text-gray-800 dark:text-gray-100">

components/mode-toggle.tsx (1)

6-47: Solid implementation of a lightweight theme toggle.

The component correctly handles hydration mismatch with the mounted guard and syncs with the layout script's initial class state. A couple of optional enhancements to consider:

1. No cross-tab sync: If the user toggles theme in one tab, other open tabs won't reflect the change. A storage event listener could address this.
2. No OS preference change listener: If the user changes their OS color scheme while the page is open (and has no explicit localStorage preference), the toggle won't react.

Neither is critical for an initial dark mode implementation.

components/header.tsx (1)

108-127: The large-screen nav container has bg-white without a dark: variant.

Line 110: The dropdown div includes bg-white but no corresponding dark:bg-gray-900 (or similar). While on large screens this is overridden by lg:bg-transparent, if this div is ever made visible on smaller screens (e.g., via future changes), it would show a white background in dark mode. Consider adding a dark variant for defensive styling.

♻️ Proposed fix

-            className="invisible absolute left-0 top-full z-20 w-full origin-top-right translate-y-1 scale-90 flex-col justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 dark:border-gray-700 dark:shadow-none lg:visible lg:relative lg:flex lg:w-auto lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none"
+            className="invisible absolute left-0 top-full z-20 w-full origin-top-right translate-y-1 scale-90 flex-col justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 dark:border-gray-700 dark:bg-gray-900 dark:shadow-none lg:visible lg:relative lg:flex lg:w-auto lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none"

app/layout.tsx (2)

39-58: Good approach for preventing dark mode flash (FOUC).

The inline blocking script in <head> correctly prevents the flash of wrong theme on page load. The suppressHydrationWarning on <html> is necessary since the script modifies the element's classList before React hydrates. The dangerouslySetInnerHTML flagged by static analysis is safe here — the script content is a hardcoded string with no user input.

One consideration: next-themes (mentioned in the linked issue #35) handles all of this out of the box — theme persistence, OS preference detection, FOUC prevention, and cross-tab sync. It would eliminate the need for both this inline script and the custom ModeToggle component. If the scope of this PR is intentionally minimal, the current approach works, but adopting next-themes could simplify maintenance.

---

53-53: Silent error swallowing in the catch block.

The empty catch (e) {} silently swallows all errors. While this is defensive (e.g., for environments where localStorage is disabled), consider at minimum logging to console in development.

♻️ Proposed fix

-                } catch (e) {}
+                } catch (e) { if (typeof console !== 'undefined') console.warn('Theme init failed:', e); }

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[ishwarthecodddr]

@Zahnentferner plz review this and i am not able to message in stability nexus channel , kindly resolve the issue.