fix: resolve dark mode icon timing issue and fix mobile nav Surveys label by Tanisha127 · Pull Request #1054 · alphaonelabs/website

Tanisha127 · 2026-05-07T06:47:35Z

Problem

Two bugs were found in web/templates/base.html:

Bug 1 — Dark mode icon not found warning
The updateDarkModeIcon() function was called before the DOM finished loading, causing this console warning on every page load : Warning: Dark mode icon element not found
This happened because initializeDarkMode() was called immediately in the script, before the icon element existed in the DOM.

Bug 2 — Mobile nav showed "Learning Requests" instead of "Surveys"
The Surveys link in the mobile COMMUNITY section was incorrectly labeled as "Learning Requests", causing user confusion.

Fix

Separated dark class application (runs immediately to prevent flash) from icon update (runs only after DOMContentLoaded)
Updated updateDarkModeIcon() to also sync the mobile icon (darkModeIconMobile)
Fixed mobile nav label from "Learning Requests" to "Surveys"
Set DEBUG = false to suppress development logs in production

Testing

Verified no console warnings on page load
Dark mode toggle works correctly on both desktop and mobile
Mobile nav Community section now shows correct labels

Summary

This PR resolves two dark mode and mobile navigation issues in the base template:

Issues Fixed

Dark Mode Icon Timing Issue: Separated the application of the dark class (runs immediately in the <head> to prevent flash) from the icon update logic (deferred until DOMContentLoaded). This eliminates the console warning "Warning: Dark mode icon element not found" that previously occurred when updateDarkModeIcon() was called before the DOM finished loading.
Mobile Navigation Label Bug: Fixed the Surveys link in the mobile COMMUNITY section, which was incorrectly labeled as "Learning Requests".

Key Changes

Debug Mode: Set DEBUG constant to false to suppress development logs in production.
Enhanced Icon Updates: Expanded updateDarkModeIcon() function to sync both desktop (darkModeIcon) and mobile (darkModeIconMobile) dark mode toggle icons.
Improved Initialization Flow: Implemented two-phase dark mode initialization:
- Inline class application on page load to prevent visual flash
- Deferred icon updates that execute only after the DOM is ready via DOMContentLoaded event listener
Corrected Mobile Navigation: Updated mobile nav COMMUNITY section label to display "Surveys" for the surveys link.

Verification

Dark mode toggle now works correctly on both desktop and mobile without console warnings, and mobile navigation labels are accurate.

github-actions · 2026-05-07T06:47:44Z

👀 Peer Review Required

Hi @Tanisha127! This pull request does not yet have a peer review.

Before this PR can be merged, please request a review from one of your peers:

Go to the PR page and click "Reviewers" on the right sidebar.
Select a team member or contributor to review your changes.
Once they approve, this reminder will be automatically removed.

Thank you for contributing! 🎉

coderabbitai · 2026-05-07T06:47:50Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: alphaonelabs/coderabbit/.coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: fe1b7d42-59ea-45fc-9a0c-2b844e864ef7

📥 Commits

Reviewing files that changed from the base of the PR and between 7a682c2 and e1d7939.

📒 Files selected for processing (1)

web/templates/base.html

Walkthrough

Dark mode JavaScript logic is refactored to eliminate theme flash on page load by applying stored theme immediately, support both desktop and mobile theme toggle icons, and disable debug logging. The flow initializes theme before DOM loads, then updates icon elements after DOM is ready.

Changes

Dark Mode Flash Prevention and Icon Management

Layer / File(s)	Summary
Early Theme Application and Flash Prevention `web/templates/base.html`	Pre-DOM inline script applies stored dark theme class from `localStorage` immediately on page load to prevent visual flash, with remaining initialization deferred until `DOMContentLoaded`.
Icon Update Logic `web/templates/base.html`	`updateDarkModeIcon()` function expanded to update both desktop (`darkModeIcon`) and mobile (`darkModeIconMobile`) icon elements, ensuring theme toggle visual consistency across responsive views.
Debug Configuration `web/templates/base.html`	Debug flag (`DEBUG`) switched from `true` to `false` to disable console logging.

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~8 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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

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

github-actions · 2026-05-07T06:47:53Z

🚚 This Repository Is Moving

Hi @Tanisha127, thank you for your contribution!

We are in the process of migrating most of the logic from this repository to our new repository: alphaonelabs/learn.

What this means for your PR

Please do not merge or continue work here. Instead:

Review the alphaonelabs/learn repository and familiarize yourself with its tech stack.
Adapt your changes to work with that codebase.
Open a new Pull Request in alphaonelabs/learn.

This PR has been automatically closed. Once you have opened your PR in the new repository, feel free to reference it here.

Thank you for your understanding and continued support! 🙏

fix: resolve dark mode icon timing issue and sync mobile icon

e1d7939

github-actions Bot added the files-changed: 1 PR changes 1 file label May 7, 2026

github-actions Bot closed this May 7, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: resolve dark mode icon timing issue and fix mobile nav Surveys label#1054

fix: resolve dark mode icon timing issue and fix mobile nav Surveys label#1054
Tanisha127 wants to merge 1 commit intoalphaonelabs:mainfrom
Tanisha127:fix/darkmode-icon-timing-and-mobile-nav-label

Tanisha127 commented May 7, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

coderabbitai Bot commented May 7, 2026 •

edited

Loading

Review failed

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

Tanisha127 commented May 7, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Fix

Testing

Summary

Issues Fixed

Key Changes

Verification

Uh oh!

github-actions Bot commented May 7, 2026

👀 Peer Review Required

Uh oh!

coderabbitai Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated Code Review Effort

Uh oh!

github-actions Bot commented May 7, 2026

🚚 This Repository Is Moving

What this means for your PR

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Tanisha127 commented May 7, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 7, 2026 •

edited

Loading