Dark/Light Theme Toggle Button Does Not Change Application Theme

[hetbharodiya]

Description

The application includes a Dark/Light theme toggle button in the navigation bar, but clicking the button does not switch the theme.

Current Behavior

• The theme toggle button is visible in the navbar.
• Clicking the button does not change the application's appearance.
• The theme state remains unchanged after interaction.

Expected Behavior

• Clicking the theme toggle button should switch between Light Mode and Dark Mode.
• The selected theme should be applied across the application.
• Theme preference should persist between page refreshes if supported.

Steps to Reproduce

1. Open the application.
2. Locate the theme toggle button in the navigation bar.
3. Click the toggle button.
4. Observe that the theme does not change.

Additional Notes

Inspection indicates that the theme state is not being updated when the toggle button is clicked, suggesting that the toggle functionality may not be properly connected to the theme-switching logic.

Impact

• Theme customization is unavailable.
• User experience is affected, especially for users who prefer dark mode.

[hetbharodiya]

/assign
Hi @triemerge ,

I was able to reproduce this issue and verified that the theme toggle button is not updating the application's theme state when clicked. I would like to investigate the implementation and work on a fix.

Kindly assign this issue to me. Thank you!

[coderabbitai]

⚠️ Possible Duplicate Issue(s)

• Light/Dark theme toggle does not work #2045

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[coderabbitai]

Coding Plan

Summary

• remove duplicate script load in landing.html to clean up initialization
• fix board.js attribute collision by changing first initThemeSwitcher to use data-board-theme instead of data-theme
• relocate toggle button in board.html from the hidden overlay to a persistent ui element

nice detective work on the exploration findings btw, the three bug breakdown made this straightforward to plan.

Implementation Steps

Phase 1: fix script loading and attribute collision

clean up the duplicate theme.js load and fix the board.js function that overwrites the app theme attribute with board color values.

Task 1: remove duplicate theme.js load in landing.html

the script is loaded twice which is wasteful and can cause ordering issues.

• remove the first <script src="theme.js"> at line 1199 in game/templates/game/landing.html
• keep only the end of body load at line 1875 with the version parameter

Task 2: fix first initThemeSwitcher in board.js to use correct attribute

the function at line 3959 reads and writes data-theme for board colors, conflicting with the app wide light/dark theme.

• in game/static/game/js/board.js, locate the first initThemeSwitcher function around line 3959
• change all references from data-theme to data-board-theme to match the corrected version at line 4294
• update the fallback default from 'classic' logic to read from data-board-theme attribute
• alternatively if the second initThemeSwitcher at line 4294 is the correct one, remove the first broken version entirely and ensure only the correct one is called

🤖 Prompt for AI agents

fix two bugs in landing.html and board.js that break the theme toggle system.

**task 1: `game/templates/game/landing.html`**
- find the `<script src="theme.js">` tag at line 1199 and remove it
- the only theme.js load that should remain is the one near the end of body at
line 1875 (has a version parameter)

**task 2: `game/static/game/js/board.js`**
- find the first `initThemeSwitcher` function around line 3959
- this function incorrectly reads/writes `data-theme` for board color values,
which stomps on the app-wide light/dark theme attribute
- change all `data-theme` references inside this function to `data-board-theme`
- update any fallback/default logic to also read from `data-board-theme`
- if the second `initThemeSwitcher` at line 4294 is already correct, consider
removing the first broken version entirely and making sure only the correct one
is invoked

Phase 2: fix toggle button accessibility on board page

the toggle is inside the welcome overlay which gets hidden after game start. need to make it accessible during gameplay.

move theme toggle to persistent location in board.html

currently the button lives inside #welcomeOverlay and disappears when the game starts.

• in game/templates/game/board.html, move the #themeToggle button from inside #welcomeOverlay (around line 114) to a persistent ui element
• add it to the main game header/toolbar area that stays visible during gameplay
• keep the same id, class, and attributes so theme.js continues to bind correctly
• match the styling approach used in landing.html for consistency

🤖 Prompt for AI agents

move the theme toggle button in board.html out of the hidden overlay so it stays
accessible during gameplay.

- in `game/templates/game/board.html`, find the `#themeToggle` button inside
`#welcomeOverlay` around line 114 and cut it
- paste it into the main game header/toolbar area that remains visible after the
overlay closes
- keep the same `id`, `class`, and all other attributes unchanged so `theme.js`
binds to it correctly
- check landing.html for how the toggle is styled/placed in the navbar and match
that approach for consistency

Research

django app with standalone html templates (no shared base template). theme system uses css custom properties on data-theme attribute on the html root element. theme.js handles toggle logic and localStorage persistence. board.js has a separate board color theme system that should use data-board-theme but one function incorrectly uses data-theme. toggle button is duplicated in landing.html navbar and board.html welcome overlay.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

fix two bugs in landing.html and board.js that break the theme toggle system.

**task 1: `game/templates/game/landing.html`**
- find the `<script src="theme.js">` tag at line 1199 and remove it
- the only theme.js load that should remain is the one near the end of body at
line 1875 (has a version parameter)

**task 2: `game/static/game/js/board.js`**
- find the first `initThemeSwitcher` function around line 3959
- this function incorrectly reads/writes `data-theme` for board color values,
which stomps on the app-wide light/dark theme attribute
- change all `data-theme` references inside this function to `data-board-theme`
- update any fallback/default logic to also read from `data-board-theme`
- if the second `initThemeSwitcher` at line 4294 is already correct, consider
removing the first broken version entirely and making sure only the correct one
is invoked
===============================================================================

Task: 2

move the theme toggle button in board.html out of the hidden overlay so it stays
accessible during gameplay.

- in `game/templates/game/board.html`, find the `#themeToggle` button inside
`#welcomeOverlay` around line 114 and cut it
- paste it into the main game header/toolbar area that remains visible after the
overlay closes
- keep the same `id`, `class`, and all other attributes unchanged so `theme.js`
binds to it correctly
- check landing.html for how the toggle is styled/placed in the navbar and match
that approach for consistency

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!