benjaminkott / benjaminkott/bootstrap_package

Make color scheme support more flexible (or update docs?)

Open
#1,446 0 comments 2 reactions 0 assignees View on GitHub
feature
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.