Skip to content

Adding Dark Mode to the Website #4429

@markmandel

Description

@markmandel

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 = true

2. 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:

  1. Reference Docsy's navbar implementation and adapt the dark mode toggle markup to work with our custom navigation structure
  2. 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)
  3. Use Bootstrap's data-bs-theme-value attribute 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-server

Additional 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

Metadata

Metadata

Labels

good first issueThese are great first issues. If you are looking for a place to start, start here!help wantedWe would love help on these issues. Please come help us!kind/documentationDocumentation for Agones

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions