Skip to content

Upgrade to Bootstrap v5 and add dark mode support#343

Open
Amdrel wants to merge 10 commits intomasterfrom
refactor/bootstrap-upgrade
Open

Upgrade to Bootstrap v5 and add dark mode support#343
Amdrel wants to merge 10 commits intomasterfrom
refactor/bootstrap-upgrade

Conversation

@Amdrel
Copy link
Collaborator

@Amdrel Amdrel commented Mar 24, 2026

Affected Components: frontend, socket.io

Description

Resolves #331

This patch migrates the frontend to Bootstrap v5 and upgrades all other dependencies to the maximum versions possible taking compatibility into account. I've tested this patch a bit (including RTL) in both light and dark mode.

The application looks a bit more "modern" since Bootstrap 5 has different base styles than 3, however everything is still positioned in the same places as before.

Library Version Changes

  • Frontend library upgrades
    • Add Bootstrap Icons 1.13.1 (replacing Glyphicons bundled with Bootstrap 3)
    • Upgrade Bootstrap from 3.3.6 to 5.3.8
    • Upgrade jQuery from 2.2.0 to 3.7.1
    • Upgrade GitHub Fork Ribbon CSS from 0.1.1 to 0.2.3
  • Frontend build library upgrades
    • Upgrade Biome from 2.3.13 to ^2.4.8
    • Upgrade gulp-htmlmin from >3.0.0 to ^5.0.1
    • Upgrade gulp-nunjucks from >3.1.1 to ^6.1.0
    • Upgrade gulp-rename from >1.4.0 to ^2.1.0
    • Upgrade gulp-uglify from >2.1.2 to ^3.0.2
  • Socket.io app library upgrades
    • Upgrade Express from ^4.21.1 to ^5.2.1
    • Upgrade Redis (Node.js) from ^4.6.12 to ^5.11.0
    • Upgrade Socket.io from ^4.8.0 to ^4.8.3
  • Python library upgrades
    • Upgrade Ruff from 0.14.14 to 0.15.7

Code Changes

  • Added dark mode toggle to the site header when logged in
    • Defaults to the system theme
    • The user's preference is saved to localstorage
  • Refactored classes exclusive to Bootstrap 3 & 4 to Bootstrap 5 variants
  • Made a path fix to the socket.io app since Express broke glob * (why?)

Screenshots

Task list with dark mode applied

Screenshot 2026-03-23 at 4 43 30 PM

Add task dialog with dark mode applied

Screenshot 2026-03-23 at 4 43 40 PM

Target page with dark mode applied (labels have more bottom margin in final version)

Screenshot 2026-03-23 at 4 43 55 PM

Screenshot demonstrating that light mode still works

Screenshot 2026-03-24 at 11 36 09 AM

RTL support still working in Bootstrap 5 with Hebrew

Screenshot 2026-03-24 at 11 39 25 AM

Playlist dialog with updated styles

Screenshot 2026-03-24 at 11 40 50 AM

@Amdrel Amdrel requested a review from don-vip March 24, 2026 18:42
@don-vip
Copy link
Collaborator

don-vip commented Mar 24, 2026

@Amdrel very nice! I see CI/Biome raised two warnings in video2commons.js, is it possible to resolve them?

@Amdrel
Copy link
Collaborator Author

Amdrel commented Mar 24, 2026

Done. I also modified the workflow to clean up broken symlinks before the lint check. Those are needed by the application but biome seems to dislike them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

Dark mode add

2 participants