Das Thema "darkmode" wurde glaube ich im Gitter-Chat schon mal diskutiert. Hier möchte ich einmal meinen Lösungsansatz zum Testen, Anpassen, Weiterentwickeln, ... vorstellen.
Ich habe auf Basis vom "darkblue"-Design ein "lightdarkblue"-Design erstellt. Der Dark-Mode entspricht weitestgehend dem Darkblue-Design und der Light-Mode
ist an das Ice-Design angelehnt.
Das Ganze habe ich mit smartVISU v3.3.1 unter Windows und Android getestet. (Apple-Endgeräte habe ich nicht.)
Zur Funktion:
Über die CSS Media Query "prefers-color-scheme" wird je nach Einstellung für Light- oder Dark-Mode des Endgeräts das entsprechende Farbschema gesetzt.
Im Stylesheet werden für die Farben CSS-Variablen verwendet. Die Farbschemata in der CSS-Datei kann aber auch jeder selbst nach Bedarf anpassen.
Die Darkmode-Funktion lässt sich weitgehend mittels CSS umsetzen, aber ein wenig Javascript ist nötig, um die in smartVISU genutzten "jquery.mobile.icons", die
als schwarze oder weiße Versionen vorliegen, dynamisch zu wechseln. Auch das Wechseln der Farben für die Widgets "basic.roundslider" und "device.rtrslider" läuft über Javascript.
Damit die Icons in den eigenen Menüs ebenfalls gändert werden, muss das neue Icon-Handling benutzt werden.
Das "rooms_menu.html" Beispiel im Ordner "_template"
muss folgendermaßen abgewandelt werden:
(Damit bei mir die Icons richtig positioniert werden, musste ich für <li> die Klasse "ui-li-has-thumb" angeben.)
Dank des neuen Icon-Handling werden auch diese Icons jetzt beim Wechsel in den Dark-Mode und umgekehrt neu eingefärbt.
In der angehängten zip-Datei sind alle nötigen Dateien zu finden (Ordnerstruktur ist wie bei smartVISU), die ausgetauscht bzw. ergänzt werden müssen (z.B. SVG-Icons für das Github-Logo), damit der Farbwechsel auch im Konfigurations- und Dokumentations-Menü funktioniert.
Gruß
raman
Ich habe auf Basis vom "darkblue"-Design ein "lightdarkblue"-Design erstellt. Der Dark-Mode entspricht weitestgehend dem Darkblue-Design und der Light-Mode
ist an das Ice-Design angelehnt.
Das Ganze habe ich mit smartVISU v3.3.1 unter Windows und Android getestet. (Apple-Endgeräte habe ich nicht.)
Zur Funktion:
Über die CSS Media Query "prefers-color-scheme" wird je nach Einstellung für Light- oder Dark-Mode des Endgeräts das entsprechende Farbschema gesetzt.
Im Stylesheet werden für die Farben CSS-Variablen verwendet. Die Farbschemata in der CSS-Datei kann aber auch jeder selbst nach Bedarf anpassen.
Die Darkmode-Funktion lässt sich weitgehend mittels CSS umsetzen, aber ein wenig Javascript ist nötig, um die in smartVISU genutzten "jquery.mobile.icons", die
als schwarze oder weiße Versionen vorliegen, dynamisch zu wechseln. Auch das Wechseln der Farben für die Widgets "basic.roundslider" und "device.rtrslider" läuft über Javascript.
Damit die Icons in den eigenen Menüs ebenfalls gändert werden, muss das neue Icon-Handling benutzt werden.
Das "rooms_menu.html" Beispiel im Ordner "_template"
Code:
<li data-icon="false">
<a href="index.php?page=room_sleeping">
<img class="icon"' src='{{ icon0 }}scene_sleeping_alternat.svg' alt = "Sleeping"/><h3>Sleeping</h3>
<div class="ui-li-aside"></div>
</a>
</li>
Code:
<li class="ui-li-has-thumb" data-icon="false">
<a href="index.php?page=room_sleeping">
{{ lib.svgimg ('', 'scene_sleeping_alternat.svg', 'icon0', '') }}<h3>Sleeping</h3>
<div class="ui-li-aside"></div>
</a>
</li>
Dank des neuen Icon-Handling werden auch diese Icons jetzt beim Wechsel in den Dark-Mode und umgekehrt neu eingefärbt.
In der angehängten zip-Datei sind alle nötigen Dateien zu finden (Ordnerstruktur ist wie bei smartVISU), die ausgetauscht bzw. ergänzt werden müssen (z.B. SVG-Icons für das Github-Logo), damit der Farbwechsel auch im Konfigurations- und Dokumentations-Menü funktioniert.
Gruß
raman
Kommentar