DO NOT MERGE - Update Bootstrap and add auto support for dark mode

[bgrins]

#816 is probably easier, but this is an example that just bumps the version in npm to the latest boostrap, and includes their docs color-modes.js file as per https://github.com/orgs/twbs/discussions/37727 to allow the root element to get [data-bs-theme="auto"] for auto theme detection.

Issues:

• This could be done more simply with CSS only by updating the corresponding CSS variables when in dark mode.
• There appears to be a text color issue on "Showing 1 to 152 of 152 entries" and perhaps other UI bugs (I haven't looked closely)

[nschonni]

FYI, you would just flip this to draft instead of the "DO NOT MERGE"

[zcorpan]

Setting dark mode with JS at the end of body seems like it would cause a "flash of light mode". Moving the script to head should work, right? But doesn't work for no-JS users, so I'm not convinced this is better.

[bgrins]

Setting dark mode with JS at the end of body seems like it would cause a "flash of light mode". Moving the script to head should work, right? But doesn't work for no-JS users, so I'm not convinced this is better.

Agreed on both points. I think we could get 90% of the way there without JS by copying a CSS rule from https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.css into a @media (prefers-color-scheme: dark) block:

@media (prefers-color-scheme: dark) {
:root {
  color-scheme: dark;
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(173, 181, 189, 0.75);
  --bs-secondary-color-rgb: 173, 181, 189;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(173, 181, 189, 0.5);
  --bs-tertiary-color-rgb: 173, 181, 189;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}
}

although looking through that file there are other rules using the [data-bs-theme=dark] attribute. Though I guess depending on if any of those are in use those rules could also be copied into the block.

[bgrins]

I've pushed a change to do the above comment. The main issue I see is that the glyphicons are missing in the latest version. Could migrate to these SVG icons if we do want to move forward here https://github.com/tabler/tabler-icons

[zcorpan]

Nice. Switching to SVG icons SGTM

[martinthomson]

This looks like a good direction. Finding SVG for icons seems like a good plan. ▶►▼▷▸ or other unicode symbols might work in some ways.