feat: implement dark mode support - #353
Merged
Merged
Conversation
camilleislasse
force-pushed
the
feature/dark-mode
branch
2 times, most recently
from
March 26, 2026 07:51
2e45372 to
26edbad
Compare
camilleislasse
force-pushed
the
feature/dark-mode
branch
from
March 26, 2026 07:56
26edbad to
61178aa
Compare
bartek-sek
reviewed
Mar 27, 2026
| @@ -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"> | |||
Contributor
There was a problem hiding this comment.
You are using two different file formats for the logo. Is this intentional? It would be better to standardize them (preferably both as SVG).
Contributor
There was a problem hiding this comment.
What about using SVG instead ? It will be smaller and better when resized for mobile for example.
Contributor
There was a problem hiding this comment.
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>
Contributor
There was a problem hiding this comment.
Symbols are not meant to be use like that normally but if it works we can keep it
camilleislasse
force-pushed
the
feature/dark-mode
branch
from
March 27, 2026 12:15
dcd068e to
84fe118
Compare
Prometee
approved these changes
Mar 27, 2026
Contributor
Author
|
Following @diimpp feedback: dark blue background instead of grey 
|
loic425
added a commit
that referenced
this pull request
Mar 27, 2026
Compile assets from merged PR #353
GSadee
added a commit
to Sylius/Sylius
that referenced
this pull request
Jul 29, 2026
| Q | A |-----------------|----- | Branch? | 2.3 | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | License | MIT ## Description Adds dark mode support to the admin panel, following the approach of Sylius/Stack#353 - New Stimulus `ThemeSwitcherController` toggles between `light` and `dark` on `data-bs-theme` and persists the choice in `localStorage` (`sylius-admin-theme`). - New `theme.html.twig` inline script applied early to avoid flash of unstyled content, falling back to `prefers-color-scheme` when no preference is stored. - New `theme_switcher.html.twig` navbar item, registered via Twig hooks (`sylius_admin.base` and navbar component). - SCSS variables and partials (`_body`, `_navbar`, `_sidebar`, `_avatar`, `_tom-select`, `_infinite-tree`, etc.) updated to support both color modes through Bootstrap 5 `data-bs-theme`. - Statistics chart colors adapted to the active theme. - Added `Toggle theme` translation key. <img width="1470" height="761" alt="Capture d’écran 2026-04-17 à 18 59 36" src="https://github.com/user-attachments/assets/cbaa7564-2b79-44c8-9589-cfd13b697ba4" /> Sylius/Stack#353. <img width="1469" height="766" alt="Capture d’écran 2026-04-17 à 18 58 47" src="https://github.com/user-attachments/assets/a54486af-bd32-4c49-a3f5-29f01bda1fb6" /> <img width="1470" height="765" alt="Capture d’écran 2026-04-17 à 18 59 01" src="https://github.com/user-attachments/assets/8bb722c3-8023-46cf-80e2-18f0114fbd9f" /> <img width="1468" height="766" alt="Capture d’écran 2026-04-17 à 18 59 15" src="https://github.com/user-attachments/assets/d5121933-c567-4876-b573-deda6db6ba31" /> <img width="1470" height="761" alt="Capture d’écran 2026-04-17 à 18 59 36" src="https://github.com/user-attachments/assets/b5837aa8-ac13-47ff-b383-177101077df4" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Theme switcher button added to navbar for toggling between light and dark modes * Automatic system theme preference detection with persistent user preference storage * **Style** * Enhanced dark mode styling across the admin interface * Updated component colors to use theme-aware design tokens * Improved visual consistency and readability in both light and dark modes * Statistics charts now adapt dynamically to theme changes <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/Sylius/Sylius/pull/18981?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
](https://app.coderabbit.ai/change-stack/Sylius/Sylius/pull/18981?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack){kind=link}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add dark mode support to the BootstrapAdminUi bundle using Bootstrap 5.3 color modes.
Features
Changes