feat(header): simplify Dark/Light toggle in non-demo mode

[Innocent-Akim]

• Add iconOnly prop to ThemeToggler component to display only sun/moon icon
• Update NavigationControls to use iconOnly in non-demo mode
• Keep combobox with text in demo mode (unchanged behavior)
• Footer remains unaffected and keeps the combobox

Summary

Related Issues

Description

Changes Made

• [ ]
• [ ]
• [ ]

Screenshots / Videos

Type of Change

• 🐛 Bug fix (non-breaking change addressing an issue)
• ✨ New feature (non-breaking change adding functionality)
• 💥 Breaking change (fix or feature causing existing functionality to change)
• 📝 Documentation update
• 🔧 Configuration change
• 🧪 Test addition or modification
• 🛠️ CI/CD infrastructure improvement
• ♻️ Refactoring (no functional changes)
• 🎨 Code style/formatting update
• 🚀 Performance improvement

Implementation Details

Testing Instructions

Deployment Notes

Checklist

• I have performed a self-review of my code
• I have added/updated tests that prove my fix is effective or my feature works
• I have updated relevant documentation
• My changes generate no new warnings or errors
• I have verified my changes in multiple browsers/environments (if applicable)
• New and existing unit tests pass locally with my changes
• I have made corresponding changes to the documentation
• My code follows the established code style of the project
• I have commented my code, particularly in hard-to-understand areas

Additional Context

---

Summary by cubic

Simplifies the header theme toggle in non-demo mode by replacing the combobox with an icon-only button. Demo mode keeps the combobox; the footer is unchanged.

• New Features
  • Added iconOnly prop to ThemeToggler to render only the sun/moon icon.
  • NavigationControls enables iconOnly when not in demo mode.
  • No behavior change in demo header or footer (combobox stays).

^{Written for commit cfd7b08. Summary will update on new commits.}

---

Note

Introduces an icon-only variant of the theme switcher and wires it into the header based on demo mode.

• Adds iconOnly prop to ThemeToggler; when true, renders a single Sun/Moon button that toggles light/dark directly
• Updates NavigationControls to pass iconOnly={!isDemo} so non-demo uses the icon-only toggle; demo keeps the dropdown
• Preserves existing compact and dropdown behaviors (no other UI affected)

^{Written by Cursor Bugbot for commit cfd7b08. This will update automatically on new commits. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
ever-works-website-template	Building	Preview, Comment	Jan 1, 2026 10:41am

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

📥 Commits

Reviewing files that changed from the base of the PR and between 5677af7 and cfd7b08.

📒 Files selected for processing (2)

• components/navigation-controls.tsx
• components/theme-toggler.tsx

 __________________
< X marks the bug. >
 ------------------
  \
   \   (\__/)
       (•ㅅ•)
       / 　 づ

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure languagetool in your project's settings in CodeRabbit enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/simplify-theme-toggle-header

---

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.}

[greptile-apps]

Greptile Summary

Simplified theme toggle UI in non-demo mode by adding an iconOnly prop to ThemeToggler that displays a simple icon button (sun/moon) instead of the full dropdown combobox. In demo mode, the component retains the original combobox behavior with text labels. The footer remains unchanged and continues using the dropdown variant.

• Added iconOnly boolean prop to ThemeToggler component with appropriate JSDoc
• Implemented icon-only rendering mode with direct toggle functionality (lines 62-76 in theme-toggler.tsx)
• Updated NavigationControls to conditionally enable icon-only mode based on isDemoMode() utility
• Maintained accessibility with proper aria-label attributes
• Footer usage unaffected, continues using dropdown with openUp prop

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-contained, follow existing patterns in the codebase, maintain backward compatibility, include proper accessibility attributes, and don't introduce any logical errors or security issues
• No files require special attention

Important Files Changed

Filename	Overview
components/theme-toggler.tsx	Added iconOnly prop to render simple toggle button without dropdown in non-demo mode
components/navigation-controls.tsx	Imported isDemoMode utility and passed iconOnly={!isDemo} to ThemeToggler

Sequence Diagram

sequenceDiagram
    participant User
    participant NavigationControls
    participant isDemoMode
    participant ThemeToggler
    participant useTheme
    
    User->>NavigationControls: Load header
    NavigationControls->>isDemoMode: Check demo mode
    isDemoMode-->>NavigationControls: return isDemo (true/false)
    
    alt Demo Mode (isDemo = true)
        NavigationControls->>ThemeToggler: render with iconOnly=false
        ThemeToggler->>useTheme: Get current theme
        ThemeToggler-->>User: Display dropdown combobox with text
        User->>ThemeToggler: Click theme dropdown
        ThemeToggler-->>User: Show Light/Dark options
        User->>ThemeToggler: Select theme option
        ThemeToggler->>useTheme: setTheme(selected)
    else Non-Demo Mode (isDemo = false)
        NavigationControls->>ThemeToggler: render with iconOnly=true
        ThemeToggler->>useTheme: Get current theme
        ThemeToggler-->>User: Display icon button (Sun/Moon)
        User->>ThemeToggler: Click icon button
        ThemeToggler->>useTheme: setTheme(toggle dark/light)
    end

Loading

[cubic-dev-ai]

No issues found across 2 files