-
Notifications
You must be signed in to change notification settings - Fork 897
Adding Dark Mode to the Website #4429
Description
Description
Add dark mode support to the Agones website to improve user experience and reduce eye strain for visitors who prefer dark themes.
Background
The Agones website uses the Docsy theme, which has built-in support for light/dark color modes through Bootstrap's color modes feature.
According to the Docsy documentation on light/dark color modes, Docsy ships with dark mode support by default, including:
- Complete CSS styles for both light and dark modes
- Automatic switching based on system settings or user preference
- Prevention of flashes of unstyled content (FOUC)
What Needs to Be Done
1. Enable the Dark Mode Menu
Add the following configuration to site/config.toml:
[params.ui]
showLightDarkModeMenu = true2. Add Dark Mode Toggle to Custom Navigation
This is the main challenge: The Agones website uses a custom navigation bar (see site/layouts/partials/navbar.html) that replaces the default Docsy navbar. The standard Docsy light/dark mode toggle won't automatically appear in our custom navigation.
Where to look:
- Our custom navbar:
site/layouts/partials/navbar.html - Docsy's default navbar with dark mode toggle: Docsy navbar.html
- Docsy's dark mode menu implementation: Look for the light/dark mode menu section in Docsy's navbar that can be adapted for our custom navbar
Possible approaches:
- Reference Docsy's navbar implementation and adapt the dark mode toggle markup to work with our custom navigation structure
- Create a custom dark mode toggle button/dropdown that can be inserted into our navbar at an appropriate location (probably near the search input or after the Release dropdown)
- Use Bootstrap's
data-bs-theme-valueattribute and associated JavaScript to toggle between light/dark modes
3. Test Dark Mode Styling
Once the toggle is implemented:
- Test the dark mode styling across different pages (docs, blog, home)
- Verify code syntax highlighting works in dark mode (see Docsy's light/dark code styles)
- Ensure good color contrast for any custom theme colors
Local Testing
To test the website locally, run the following command from the build directory:
make site-serverAdditional Resources
Acceptance Criteria
- Dark mode toggle is visible and accessible in the website navigation
- Users can switch between light and dark modes
- The selected mode persists across page navigation
- All pages render correctly in both light and dark modes
- Code blocks have appropriate syntax highlighting in dark mode