Command Palette bypasses NavbarContext, causing theme state to become inconsistent

[aayan-rashid]

Bug description

The "Toggle Theme" action in the Command Palette updates the application theme by directly manipulating localStorage and the document root instead of using the shared NavbarContext.

As a result, the application's theme context is not updated, which can leave UI components that rely on NavbarContext (such as the ThemeToggle component) out of sync with the actual theme applied to the page.

---

Steps to reproduce

1. Launch the application.
2. Open the Command Palette.
3. Execute Toggle Theme.
4. Observe the theme state displayed by the navbar theme toggle (or any component consuming NavbarContext).

---

Actual behavior

The page theme changes, but components relying on NavbarContext may continue to reflect the previous theme because the context state is not updated.

---

Expected behavior

All theme changes should go through the shared NavbarContext so that:

• the page theme,
• context state,
• ThemeToggle,
• and any other consumers

remain synchronized.

---

Root cause

ThemeToggle changes the theme via:

const { theme, setTheme } = useNavbar();

setTheme(...)

whereas the Command Palette action directly performs:

• localStorage.setItem(...)
• document.documentElement.classList...
• document.documentElement.setAttribute(...)

without calling setTheme.

This creates two independent sources of truth for the application's theme.

---

Proposed solution

Reuse the existing theme management provided by NavbarContext.

Instead of manually updating localStorage and the DOM, the Command Palette should obtain theme and setTheme from useNavbar() and update the theme through the shared context. This keeps all theme-related state synchronized and avoids duplicate theme-management logic.

---

[aayan-rashid]

Hi @abhishek-nexgen-dev , I would like to contribute to this issue under GSSoC.

Please assign it to me.

labels: gssoc, gssoc:approved, level:beginner