benjaminkott / benjaminkott/bootstrap_package
Make color scheme support more flexible (or update docs?)
- Dominant language
- PHP
- Stars
- 355
- Forks
- 212
- Avg merge
- 1h 4m
- Merged PRs (30d)
- 31
Description
# Feature Request
## Is your feature request related to a problem? Please describe
_Note: This concerns the navigation bar but other components might also be affected._
The docs describe [two acceptable settings](https://docs.typo3.org/p/bk2k/bootstrap-package/main/en-us/Configuration/TypoScript/Index.html) for `page.theme.navigation.style`. These are `default` and `inverse`.
However, this raises the problem, that the color scheme update mechanism [provided by Bootstrap](https://getbootstrap.com/docs/5.3/customize/color-modes/), which works by either using a `data-bs-theme`-attribute on the `` tag or by simply setting the preferred color scheme in the operating system or in the browser, doesn't work.
In the files [Resources/Public/Scss/components/navbar/_style.scss](https://github.com/benjaminkott/bootstrap_package/blob/6f3e3c2b95fa82171be970268626dbda79bbea81/Resources/Public/Scss/components/navbar/_style.scss) and [Resources/Private/Partials/Page/Navigation/Main.html](https://github.com/benjaminkott/bootstrap_package/blob/6f3e3c2b95fa82171be970268626dbda79bbea81/Resources/Private/Partials/Page/Navigation/Main.html#L3) one can see the _either-or-approach_ of Bootstrap Package.
## Workaround
By setting the constant `page.theme.navigation.style` to `undefined` (for instance) in your site package, you're able to break out of this behavior and it works like intended.
## Describe the solution you'd like
Bootstrap Package should aim to flawlessly support light and dark mode taking into account [the web standard](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) and the recent developments regarding color modes in the Bootstrap project.
As a quick fix it might be enough to update the docs and allow for a third value (e.g. `undefined`) and then do not print any additional class into the navigation template.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with Resources/Public/Scss/components/navbar/_style.scss and Resources/Private/Partials/Page/Navigation/Main.html, then review the linked Bootstrap color-modes guidance and current documentation for page.theme.navigation.style. Decide whether the change should support the standard light/dark behavior or only document the undefined workaround; done means the navigation and its documentation consistently support the chosen behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, html, scss
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100