fix:dark mode across virtual labs#835
Conversation
There was a problem hiding this comment.
Pull request overview
Fixes dark mode styling on the Virtual Lab landing page by adding missing Tailwind dark: variants so the main page content reflects the global dark mode toggle (consistent with the rest of the site).
Changes:
- Added
dark:Tailwind variants to Virtual Lab layout wrapper/header/footer elements. - Added
dark:Tailwind variants to Virtual Lab home page card layout and typography. - Minor template cleanup (explicit
{% endblock <name> %}and copyright symbol).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| web/virtual_lab/templates/virtual_lab/layout.html | Adds dark-mode background/text/border variants to the Virtual Lab shell layout. |
| web/virtual_lab/templates/virtual_lab/home.html | Adds dark-mode variants to the Virtual Lab home page content/cards. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughApplies Tailwind dark-mode classes across the Virtual Lab layout and home templates and renames anonymous endblock tags to explicit names ( Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/virtual_lab/templates/virtual_lab/home.html (1)
1-49:⚠️ Potential issue | 🟡 MinorFix djlint formatting to pass CI.
The pipeline reports
djlint-django: Linting failed; file reformatted. Runpre-commit run djlint-django --all-files(or justpre-commit run --all-files) locally and commit the reformatted output. This is blocking the pipeline.
🤖 Fix all issues with AI agents
In `@web/virtual_lab/templates/virtual_lab/layout.html`:
- Around line 1-51: The template
web/virtual_lab/templates/virtual_lab/layout.html is failing djlint formatting
(CI) — run the formatter locally (e.g., pre-commit run --all-files or djlint) to
reformat the Django template around the top-level "{% block content %}" and
nested "{% block virtual_lab_content %}" / "{% block extra_scripts %}" sections
(the header/nav/footer HTML structure) and commit the reformatted file so the
linter passes.
- Line 44: The footer uses the non-existent template variable "{{ now.year }}",
so update the layout.html template to use Django's built-in now template tag
instead of the missing now variable: locate the line containing "{{ now.year }}"
in virtual_lab layout.html and replace it with a {% now "Y" %} expression so the
current year renders correctly without adding view context or processors.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@web/virtual_lab/templates/virtual_lab/layout.html`:
- Around line 19-30: The dropdown only opens on hover and removes the focus
ring; update the button/dropdown group so keyboard users can open the menu by
focus: add Tailwind variants that mirror the hover behavior using
group-focus-within (e.g., replace/augment group-hover:opacity-100 and
group-hover:pointer-events-auto with group-hover:... plus group-focus-within:...
on the dropdown panel) and remove the blanket focus:outline-none on the button
(or replace it with a visible custom focus style like focus:ring /
focus:ring-offset classes) so the button has a clear focus indicator; target the
existing elements using the "group" wrapper, the button element with class
"focus:outline-none", and the dropdown panel with
"group-hover:opacity-100"/"group-hover:pointer-events-auto" to make these
changes.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@web/virtual_lab/templates/virtual_lab/layout.html`:
- Line 44: The HTML has inconsistent indentation between the comment node "<!--
Footer -->" and the following "<footer>" element; locate the comment and the
footer tag in virtual_lab/layout.html and align their leading whitespace to the
same indentation level (e.g., change the comment to match the footer's 4-space
indent or vice versa) so both are consistently indented and djlint won't
complain.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@web/virtual_lab/templates/virtual_lab/layout.html`:
- Around line 19-30: The dropdown anchor items inside the Physics menu lack the
Tailwind "transition" class causing abrupt hover changes; update each anchor
element (the <a> tags linking to virtual_lab:physics_pendulum,
virtual_lab:physics_projectile, virtual_lab:physics_inclined) to include
"transition" alongside their existing classes so their background-color hover
states animate consistently with the top-level nav buttons and satisfy the
hover/focus interactive element guideline.
- Around line 24-29: The three dropdown link labels for the physics pages are
hardcoded and not internationalized; update the anchor text for the links
pointing to the URL names virtual_lab:physics_pendulum,
virtual_lab:physics_projectile, and virtual_lab:physics_inclined to wrap the
visible strings in the Django translation tag (i.e., replace the literal
"Pendulum", "Projectile", and "Inclined Plane" with {% trans "Pendulum" %}, {%
trans "Projectile" %}, and {% trans "Inclined Plane" %} respectively) so they
match the other nav items and become translatable.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@web/virtual_lab/templates/virtual_lab/layout.html`:
- Around line 19-31: The dropdown currently relies only on CSS hover/focus and
lacks ARIA/menu semantics; update the button element (the "Physics" button) to
include aria-haspopup="true" and a dynamic aria-expanded attribute that toggles
when the menu is opened/closed, give the dropdown container role="menu" and each
anchor role="menuitem", and implement minimal keyboard handling on the button
and menu (toggle open/close on Enter/Space, close on Escape, and manage focus
into the first/last menuitem with ArrowUp/ArrowDown) so screen readers and
keyboard users receive proper menu semantics and can operate the menu without a
mouse.
Related issues
Fixes #834
Checklist
Description
Fix dark mode not applying to Virtual Lab landing page (home.html) content and layout wrapper while working correctly on navbar and footer.
Note: Individual physics/chemistry lab pages will be updated in a separate PR.
Problem
The Virtual Lab page (
/en/virtual_lab) dark mode toggle only affected the navbar and footer, leaving the main page content in light mode regardless of the dark mode setting.The Virtual Lab templates (layout.html and home.html) were missing
dark:Tailwind CSS variants on all color-related classes. While dark mode was functioning correctly (thedarkclass was being added to the<html>element by the main site JavaScript), these templates had hardcoded light-mode colors without dark mode alternatives.Solution
Added
dark:Tailwind CSS variants to all color classes throughout the Virtual Lab templates:Files Changed
web/virtual_lab/templates/virtual_lab/layout.htmlweb/virtual_lab/templates/virtual_lab/home.htmlScreenshots
Screen.Recording.2026-02-07.234457.mp4
Summary by CodeRabbit
Style
Refactor