feat: implement dark mode support by camilleislasse · Pull Request #353 · Sylius/Stack

camilleislasse · 2026-03-14T10:50:29Z

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

bartek-sek · 2026-03-27T09:07:08Z

src/BootstrapAdminUi/templates/security/common/logo/image.html.twig

@@ -1 +1,2 @@
-<img src="{{ asset('bundles/syliusbootstrapadminui/images/sylius-logo-dark-text.png') }}" alt="Sylius" class="sylius navbar-brand-image">
+<img src="{{ asset('bundles/syliusbootstrapadminui/images/sylius-logo-dark-text.png') }}" alt="Sylius" class="sylius navbar-brand-image" data-theme-switch="dark">


You are using two different file formats for the logo. Is this intentional? It would be better to standardize them (preferably both as SVG).

What about using SVG instead ? It will be smaller and better when resized for mobile for example.

It can also be colored via CSS but the one available on sylius.com is available in dark and light version:

<symbol fill="none" viewBox="0 0 167 49" id="logo--dark" xmlns="http://www.w3.org/2000/svg"><path d="M60.944 33.595s2.899 3.422 7.127 3.422c2.658 0 4.871-1.61 4.871-4.228 0-5.958-13.73-5.032-13.73-13.89 0-4.27 3.752-7.611 9.1-7.611 3.021 0 8.096 1.37 8.096 5.235v2.334h-3.706V17.53c0-1.491-2.135-2.577-4.39-2.577-3.06 0-4.993 1.69-4.993 3.823 0 5.758 13.692 4.47 13.692 13.812 0 4.344-3.383 8.096-9.02 8.096a12.712 12.712 0 01-9.423-4.226l2.376-2.863zM83.45 45.272c1.58 0 2.818-1.128 3.585-2.939l.926-2.215-6.967-16.146c-.28-.646-.644-.806-1.288-.806h-.484v-3.341h2.295c1.651 0 2.255.442 2.899 2.053l4.63 11.474c.29.804.532 1.624.726 2.457h.079c.171-.834.4-1.655.685-2.457l4.228-11.473c.604-1.612 1.329-2.054 2.98-2.054h2.336v3.341h-.525c-.642 0-1.005.16-1.288.806l-8.053 19.89c-1.248 3.14-3.705 4.792-6.562 4.792a6.75 6.75 0 01-4.791-2.014l1.61-2.818c0 .04 1.248 1.45 2.98 1.45zm20.532-29.267c0-.604-.322-.886-.884-.886h-1.651V11.77h3.864c1.811 0 2.568.765 2.568 2.578V35.97c0 .604.321.886.886.886h1.649V40.2h-3.855c-1.811 0-2.567-.767-2.567-2.578l-.01-21.616zm12.191 8.048c0-.605-.322-.887-.887-.887h-1.651v-3.341h3.827c1.811 0 2.567.764 2.567 2.567V35.97c0 .604.322.886.887.886h1.651V40.2h-3.817c-1.813 0-2.568-.767-2.568-2.578l-.009-13.568zm.081-12.282h3.501v4.067h-3.501v-4.066zm11.267 12.282c0-.605-.321-.887-.886-.887h-1.651v-3.341h3.825c1.852 0 2.617.764 2.617 2.496v9.662c0 2.82.564 5.074 3.785 5.074 4.189 0 6.643-3.664 6.643-7.69v-9.542h3.907V35.97c0 .604.321.886.886.886h1.649V40.2h-3.752c-1.73 0-2.577-.806-2.577-2.256v-.764c0-.646.041-1.167.041-1.167h-.08c-.838 2.012-3.454 4.678-7.481 4.678-4.591 0-6.926-2.415-6.926-7.81v-8.827zm25.319 10.429s2.415 3.019 6.162 3.019c1.891 0 3.542-.847 3.542-2.619 0-3.663-11.112-3.26-11.112-9.822 0-3.906 3.421-5.727 7.57-5.727 2.456 0 6.682.845 6.682 3.95v1.93h-3.503v-1.006c0-1.209-1.811-1.732-3.059-1.732-2.295 0-3.786.808-3.786 2.417 0 3.865 11.114 3.02 11.114 9.825 0 3.623-3.22 5.958-7.49 5.958-5.434 0-8.132-3.583-8.132-3.583l2.012-2.61z" fill="#fff"></path><path d="M6.797 28.69l9.793 19.585 18.075.03 4.374-6.157L6.797 28.689z" fill="#30BA9D"></path><path d="M0 30.84l13.166 18.073 21.5.036 4.373-6.762L0 30.84zM15.787 8.823l6.408 4.97 5.794-11.117-1.97-1.26-10.232 7.407z" fill="#1A9F83"></path><path d="M34.665 48.949L15.787 8.823 19.825 5.9l21.967 32.027-7.127 11.022zM24.203 2.731L36.5 12.664 27.87 0l-3.667 2.731z" fill="#30BA9D"></path></symbol> <symbol fill="none" viewBox="0 0 167 49" id="logo--light" xmlns="http://www.w3.org/2000/svg"><path d="M60.944 33.595s2.898 3.422 7.126 3.422c2.659 0 4.872-1.61 4.872-4.228 0-5.958-13.73-5.032-13.73-13.89 0-4.27 3.752-7.611 9.1-7.611 3.02 0 8.096 1.37 8.096 5.235v2.334h-3.707V17.53c0-1.491-2.134-2.577-4.39-2.577-3.059 0-4.992 1.69-4.992 3.823 0 5.758 13.691 4.47 13.691 13.812 0 4.344-3.382 8.096-9.019 8.096a12.712 12.712 0 01-9.423-4.226l2.376-2.863zM83.45 45.272c1.58 0 2.818-1.128 3.584-2.939l.927-2.215-6.967-16.146c-.28-.646-.644-.806-1.288-.806h-.484v-3.341h2.295c1.65 0 2.255.442 2.899 2.053l4.63 11.474c.29.804.532 1.624.725 2.457h.08c.171-.834.4-1.655.685-2.457l4.228-11.473c.604-1.612 1.329-2.054 2.98-2.054h2.336v3.341h-.525c-.642 0-1.006.16-1.288.806l-8.053 19.89c-1.248 3.14-3.705 4.792-6.562 4.792a6.75 6.75 0 01-4.791-2.014l1.61-2.818c0 .04 1.247 1.45 2.98 1.45zm20.532-29.267c0-.604-.322-.886-.885-.886h-1.65V11.77h3.864c1.811 0 2.567.765 2.567 2.578V35.97c0 .604.322.886.887.886h1.649V40.2h-3.855c-1.811 0-2.567-.767-2.567-2.578l-.01-21.616zm12.19 8.048c0-.605-.322-.887-.886-.887h-1.651v-3.341h3.827c1.811 0 2.567.764 2.567 2.567V35.97c0 .604.322.886.887.886h1.651V40.2h-3.818c-1.812 0-2.567-.767-2.567-2.578l-.01-13.568zm.081-12.282h3.502v4.067h-3.502v-4.066zm11.268 12.282c0-.605-.322-.887-.886-.887h-1.651v-3.341h3.825c1.852 0 2.616.764 2.616 2.496v9.662c0 2.82.565 5.074 3.786 5.074 4.189 0 6.643-3.664 6.643-7.69v-9.542h3.906V35.97c0 .604.322.886.887.886h1.649V40.2h-3.752c-1.73 0-2.577-.806-2.577-2.256v-.764c0-.646.041-1.167.041-1.167h-.081c-.837 2.012-3.454 4.678-7.48 4.678-4.592 0-6.926-2.415-6.926-7.81v-8.827zm25.319 10.429s2.416 3.019 6.162 3.019c1.892 0 3.543-.847 3.543-2.619 0-3.663-11.113-3.26-11.113-9.822 0-3.906 3.421-5.727 7.57-5.727 2.456 0 6.682.845 6.682 3.95v1.93h-3.503v-1.006c0-1.209-1.811-1.732-3.059-1.732-2.294 0-3.785.808-3.785 2.417 0 3.865 11.114 3.02 11.114 9.825 0 3.623-3.221 5.958-7.491 5.958-5.434 0-8.132-3.583-8.132-3.583l2.012-2.61z" fill="#131718"></path><path d="M6.797 28.69l9.793 19.585 18.075.03 4.374-6.157L6.797 28.689z" fill="#30BA9D"></path><path d="M0 30.84l13.166 18.073 21.5.036 4.373-6.762L0 30.84zM15.786 8.823l6.409 4.97 5.794-11.117-1.97-1.26-10.233 7.407z" fill="#1A9F83"></path><path d="M34.665 48.949L15.786 8.823 19.825 5.9l21.967 32.027-7.127 11.022zM24.203 2.731L36.5 12.664 27.87 0l-3.667 2.731z" fill="#30BA9D"></path></symbol>

@Prometee is that good for you?

Symbols are not meant to be use like that normally but if it works we can keep it

camilleislasse · 2026-03-27T16:46:27Z

Following @diimpp feedback: dark blue background instead of grey

Compile assets from merged PR #353

feat: implement dark mode support

fa97197

camilleislasse force-pushed the feature/dark-mode branch 2 times, most recently from 2e45372 to 26edbad Compare March 26, 2026 07:51

feat: migrate theme switcher to Stimulus controller

61178aa

camilleislasse force-pushed the feature/dark-mode branch from 26edbad to 61178aa Compare March 26, 2026 07:56

bartek-sek reviewed Mar 27, 2026

View reviewed changes

camilleislasse added 2 commits March 27, 2026 12:30

feat: use SVG logos for dark/light theme switching

7540c89

feat: use inline SVG symbols for dark/light theme logo

84fe118

camilleislasse force-pushed the feature/dark-mode branch from dcd068e to 84fe118 Compare March 27, 2026 12:15

Prometee approved these changes Mar 27, 2026

View reviewed changes

feat: set dark blue background color for dark mode

02fa52d

loic425 merged commit 51f75a3 into Sylius:main Mar 27, 2026
6 checks passed

camilleislasse mentioned this pull request Mar 27, 2026

feat: compile dark mode assets and update reference #361

Merged

loic425 added a commit that referenced this pull request Mar 27, 2026

feat: compile dark mode assets and update reference (#361)

347a676

Compile assets from merged PR #353

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implement dark mode support#353

feat: implement dark mode support#353
loic425 merged 5 commits intoSylius:mainfrom
camilleislasse:feature/dark-mode

camilleislasse commented Mar 14, 2026

Uh oh!

bartek-sek Mar 27, 2026

Uh oh!

camilleislasse Mar 27, 2026

Uh oh!

Prometee Mar 27, 2026

Uh oh!

Prometee Mar 27, 2026 •

edited

Loading

Uh oh!

camilleislasse Mar 27, 2026

Uh oh!

loic425 Mar 27, 2026

Uh oh!

Prometee Mar 27, 2026 •

edited

Loading

Uh oh!

camilleislasse commented Mar 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -1 +1,2 @@
		<img src="{{ asset('bundles/syliusbootstrapadminui/images/sylius-logo-dark-text.png') }}" alt="Sylius" class="sylius navbar-brand-image">
		<img src="{{ asset('bundles/syliusbootstrapadminui/images/sylius-logo-dark-text.png') }}" alt="Sylius" class="sylius navbar-brand-image" data-theme-switch="dark">

Conversation

camilleislasse commented Mar 14, 2026

Summary

Features

Changes

Uh oh!

bartek-sek Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

camilleislasse Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Prometee Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Prometee Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

camilleislasse Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

loic425 Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Prometee Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

camilleislasse commented Mar 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Prometee Mar 27, 2026 •

edited

Loading

Prometee Mar 27, 2026 •

edited

Loading