Skip to content

feat: implement dark mode support#353

Open
camilleislasse wants to merge 1 commit intoSylius:mainfrom
camilleislasse:feature/dark-mode
Open

feat: implement dark mode support#353
camilleislasse wants to merge 1 commit intoSylius:mainfrom
camilleislasse:feature/dark-mode

Conversation

@camilleislasse
Copy link
Contributor

Summary

Add dark mode support to the BootstrapAdminUi bundle using Bootstrap 5.3 color modes.

Features

  • Theme toggle button (sun/moon) in the navbar
  • Persistent preference via localStorage with prefers-color-scheme fallback
  • Anti-flash inline script applied before page paint
  • Login page logo adapts to active theme
  • SCSS refactored to use CSS custom properties (--tblr-*) throughout
  • ApexCharts re-renders on theme change via MutationObserver

Changes

  • Add theme-switcher.js script
  • Add theme.html.twig anti-flash hookable in #stylesheets (priority 200)
  • Add theme_switcher.html.twig navbar button hookable
  • Refactor _body.scss, _sidebar.scss, _tom-select.scss with include color-mode() mixin
  • Replace hardcoded colors in _accordion.scss, _filters.scss, _form.scss, _loader.scss, _navbar.scss
  • Update statistics_chart.js to use CSS vars and re-render on theme change
  • Update login logo template to support both light/dark variants

Enregistrementdelecran2026-03-14a11 36 42-ezgif com-video-to-gif-converter

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.

1 participant