Skip to content

Dark mode support#3877

Open
thatbudakguy wants to merge 2 commits into
mainfrom
dark-mode
Open

Dark mode support#3877
thatbudakguy wants to merge 2 commits into
mainfrom
dark-mode

Conversation

@thatbudakguy

@thatbudakguy thatbudakguy commented Jun 23, 2026

Copy link
Copy Markdown
Member
  • Add dark mode theme switcher
    This adds a new component to the main navbar for switching between
    themes, based on Bootstrap's docs and provided example for how
    to implement a dark mode toggle.

    Also adds related JavaScript for detecting and saving the user's
    preference in localStorage, and updating the switcher to indicate
    which theme is active.

  • Update styles for dark mode compatibility
    This tweaks the existing styles to handle cases where colors
    were not set up to handle dark mode.

    Also replaces the logo image with two SVG versions; one light
    and one dark.

@thatbudakguy thatbudakguy changed the title dark mode Dark mode support Jun 23, 2026
@thatbudakguy thatbudakguy marked this pull request as draft June 23, 2026 03:27
@jcoyne

jcoyne commented Jun 23, 2026

Copy link
Copy Markdown
Member

can we just do this:

@media (prefers-color-scheme: dark) {
    :root {
        --bs-body-color: white;
        --bs-body-bg: darkgray;
        /* etc. etc. */
    }
  }
}

And not have a switcher?

@thatbudakguy

Copy link
Copy Markdown
Member Author

That's what the "auto" mode in the switcher does – we could also make that the default instead of light?

In general I think the approach of just detecting the user's browser/OS preference is fine, but I've heard that it doesn't work for everyone – some people want to be able to control that preference on a per-app basis, because the main content of the app affects how they read (is it a long page of text? are there lots of fiddly UI elements? etc).

Enabling it without a switcher could also lead to confusion if someone gets the dark theme but doesn't know why and can't opt back into the light theme.

This adds a new component to the main navbar for switching between
themes, based on Bootstrap's docs and provided example for how
to implement a dark mode toggle.

Also adds related JavaScript for detecting and saving the user's
preference in localStorage, and updating the switcher to indicate
which theme is active.
This tweaks the existing styles to handle cases where colors
were not set up to handle dark mode.

Also replaces the logo image with two SVG versions; one light
and one dark.
@thatbudakguy thatbudakguy marked this pull request as ready for review June 23, 2026 15:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants