Skip to content

Conversation

@pgiraud
Copy link
Member

@pgiraud pgiraud commented Jan 16, 2026

This PR goal is to improve CSS. It also integrates the good work done by @Alain-L in #854

pgiraud and others added 21 commits January 16, 2026 08:15
This div is only used to display the workers as stack. Setting a color
for the text has no impact on the rendering.
Instead use the `text-body-tertiary` class (which is dark mode safe).

We also get rid of now unused $text-color-light variable.
It was only influencing the color of the node name in the diagram. Let's
use the default color.
Along the way, useless classes are removed in HTML.
We get rid of unused $padding-sm variable along the way.
Prefer boostrap classes over our own css rules.
Will be useful when adding a dark mode switcher.
This doesn't play well with a dark theme.
Replace hardcoded SCSS color variables with Bootstrap CSS variables
to enable theme customization (dark mode, high contrast, branding, etc.)

- Use semantic classes (bg-body, text-body-secondary, etc.)
- Update hatched background pattern to use --bs-tertiary-bg
- Add splitpanes theme overrides
- Replace btn-light with btn-outline-secondary in PlanNode
Add theme switcher button in navbar with system preference detection.
Theme preference is persisted in localStorage.
Import stackoverflow-dark theme for highlight.js when dark mode is active,
scoped to [data-bs-theme="dark"] selector.
Don't use btn class, but provide a dedicated class.
We create our own tippy theme using bootstrap css variables.
@pgiraud pgiraud merged commit 01d5410 into master Jan 16, 2026
2 checks passed
@pgiraud pgiraud deleted the css_refactoring branch January 16, 2026 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants