Hallo,
leider wurde das Thema "Wie erreicht man Farbänderungen der Module im Light/Dark Mode" (
www.joomlaplates.de/forum/uikit-3-module...light-dark-mode.html
) bereits auf gelöst gesetzt. Deshalb hier noch 2 Tipps:
1. Anpassungen über die custom.css
Die "Lösung" in anderen Thread
Code:
@media (prefers-color-scheme: dark) {
...
}
hat nur unzuverlässig funktioniert. Zuverlässig funktioniert das, wenn man vor jede css-Anpassung das Präfix
Code:
[data-bs-theme="light"]
bzw.
Code:
[data-bs-theme="dark"]
setzt - je nachdem, für welches Farbprofil die Anpassung wirksam sein soll. Also z.B.
Code:
[data-bs-theme="light"] .uk-accordion-title {
text-decoration: none !important;
background-color: #efefef !important;
padding: 5px 5px 5px 5px !important;
}
2. Module mit Wahl eines hellen oder dunklen Styles
Manche Module, insbesondere auch die UIkit-Module hier von Joomlaplates, haben eine Style-Option (none, white, white shadow, dark). In dem Fall kann man das Modul duplizieren und über eine css-Klasse des Moduls dieses je nach Light/Dark-Mode ein- oder ausblenden.
- Im Backend unter "Modul - Reiter Erweitert - CSS-Klasse Modul" eine css-Klasse eintragen, z.B.
.
- Dann das Modul duplizieren, den Style und die css-Klasse anpassen, bei letzterer z.B.
Code:
only-for-light-mode
.
- In der custom.css folgende Einträge machen:
Code:
[data-bs-theme="light"] .only-for-dark-mode {
display: none !important;
}
[data-bs-theme="light"] .only-for-light-mode {
display: block; /* ggf. block, flex, grid … je nach Layout */
}
[data-bs-theme="dark"] .only-for-light-mode {
display: none !important;
}
[data-bs-theme="dark"] .only-for-dark-mode {
display: block !important; /* ggf. block, flex, grid … je nach Layout */
}
Autor
