Howto: custom.css für den Astroid Light/Dark-Mode

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  hat nur unzuverlässig funktioniert. Zuverlässig funktioniert das, wenn man vor jede css-Anpassung das Präfix bzw. setzt - je nachdem, für welches Farbprofil die Anpassung wirksam sein soll. Also z.B.
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.
  Code:

  only-for-dark-mode
  .
• 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 */ }