Use current dark/light mode for btns in labelauty

[BryceStevenWilley]

Otherwise, the buttons stand out and don't match the rest of the requested theme. To avoid DOM XSS issues, we check if data-bs-theme is dark, and use the string "dark" if it is. Otherwise (if for some reason there isn't a data-bs-theme on the document, or it's some string we don't recognize), we default to light mode.

This, along with #717 fixes some issues with trying to make a dark mode theme.

Some images of the differences here:

• Pre-PR radio buttons and checkboxes in dark mode:

  

• Post-PR radio buttons and checkboxes in dark mode:

  

[github-advanced-security]

CodeQL found more than 10 potential problems in the proposed changes. Check the Files changed tab for more details.

[jhpyle]

I am not sure that JavaScript should be used to change CSS classes based on light/dark mode. The user needs to be able to change the light/dark mode and see the changes immediately without having to reload the screen or retrigger JavaScript. The JavaScript solution might not work for labelauty lists that appear on the initial page the user sees, because of the way the mode gets activated by JavaScript code. There could be other issues as well that arise from using JavaScript to do CSS's job.

The underlying problem is that Bootstrap is missing a feature, but the feature is apparently on its way:
twbs/bootstrap#38748

In the meantime there is a CSS workaround that users can implement easily themselves (copying and pasting the .btn-dark CSS):

[data-bs-theme=dark] .btn-light.dalabelauty {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424649;
  --bs-btn-hover-border-color: #373b3e;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d5154;
  --bs-btn-active-border-color: #373b3e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

[BryceStevenWilley]

I am not sure that JavaScript should be used to change CSS classes based on light/dark mode. The user needs to be able to change the light/dark mode and see the changes immediately without having to reload the screen or retrigger JavaScript.

I agree that it should be a CSS thing, but that's not how changing the theme works at the moment. If you change the browser theme / appearance, you have to refresh the DA page for it to take affect. I see what you mean though, changing the theme in multiple places vs having everything be dependent on data-bs-theme. The workaround solves the issue for now.