zoglo
commented
7 months ago @aschempp
- I implemented the suggested changes from the contao community regarding the toggle icon
- your suggested changes regarding the border radius
- fixed another package icon bug
- made sure that the newly introduced custom properties for the svg icons can be imported in the contao-manager as well
- considering discover-package__actions (for contao-manager styles)
This is ready to merge now
aschempp
Description
This PR implements Dark-Mode (and necessary layout changes due to design issues) for the package-list: https://extensions.contao.org/
It also addresses https://github.com/contao/contao-manager/issues/681 and sets the groundwork for implementing dark-mode into the Contao Manager.
Preview
Can be temporarily accessed through the following link: ...
Mobile:
Desktop:
Features
Dark-Mode for the package list
Dark-Mode toggle in the footer
Gets user-preference / saves state into local storage
Adjusted all icons to match the color mode (currentColor did not work in SVG :) )
Layout-Changes
Package Icons
As the extensions do not provide icons for light and dark mode, the package icons are delivered on a light background. This means that layout changes have been made to properly introduce the dark mode and still keep the corporate identity intact.
Icons are also aligned centered and have a fixed size (fixing the issue of icons being vertically higher, thus leading to layout breaks)
Icons are now always shown throughout the display sizes due to style changes.
Dropdown menu (Language Switch)
The layout of dropdown menus has been slightly modified for better UX and visibility on dark mode (cursor pointer, hover effects)
Popup
The package icons within the popup follow the same layout as the overview: