Currently, I am exploring the most effective way to structure my SCSS dark theme for optimal maintainability. Bootstrap 5 offers the option of setting the data-bs-theme='dark' attribute on the HTML body tag to switch between light and dark themes effortlessly.
While this method works adequately, it necessitates the inclusion of numerous color classes directly into the HTML elements, such as
<nav class="bg-body">The challenge arises from the duplication of code that occurs, like in the following example:
nav {
background-color: $body-bg;
}
@include color-mode(dark) {
nav {
background-color: $body-bg-dark;
}
}
In an effort to streamline this process, I considered creating a separate file containing variable overrides specifically for the dark theme:
// Variable overrides for dark theme
@include color-mode(dark) {
$body-bg: #1a1a1a;
}
Regrettably, this approach did not yield the desired results, likely due to issues concerning lexical scoping. Is there a feasible solution to accomplish what I have envisioned? While my immediate requirement is only for a dark mode, I aim to establish a system where defining light mode colors in a centralized location will facilitate seamless transitioning in the future.
If anyone can offer guidance on how best to structure my CSS for improved organization, I would greatly appreciate it!