Das Thema Dark Mode ist zur Zeit aktuell. So hat zum Beispiel Apple den Dark Mode in seine Betriebssysteme integriert. Windows und Google haben das gleiche getan. Der Dark Mode ist in Mode. Und nicht nur das. Er bietet Vorteile. Ob dunklere Displays gut für die Augen sind, ist umstritten. Klar ist hingegen, dass bei weniger Licht Energie gespart wird.
Für Ungeduldige: Sieh dir den geänderten Programmcode in der Diff-Ansicht[^codeberg.org/astrid/j4examplecode/compare/t39...t40] an und übernimm diese Änderungen in deine Entwicklungsversion.
Schritt für Schritt
In diesem Abschnitt integrieren wir die Möglichkeit des Umschaltens in einen Dark Mode ins Tempalte Facile. Dies tun wir mithilfe einer eigens dafür erstellten CSS-Datei. Welcher Modus aktiv ist, fragen wir über die Eigenschaft prefers-color-scheme ab. Diese erkennt, welche Variante der Benutzer im Betriebssystem als gewünscht eingestellt hat.
Das nachfolgende Schnippet nutze ich, um mir im Vorfeld die Angaben in der Konsole des Browsers ausgeben zu lassen. So bin ich sicher, dass die Eigenschaft prefers-color-scheme unterstützt wird und wie sie gesetzt ist.
<script>
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('Dark mode is supported');
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
console.log('Dark mode');
} else {
console.log('Light mode');
}
</script>Fragst du dich, was window.matchMedia bedeutet? window.PLACEHOLDER bedeutet allgemein, dass die Variable PLACEHOLDER im globalen Bereich deklariert ist. Das bedeutet, dass jeder JavaScript-Code Zugriff auf diese Variable hat. Die Verwendung von window ist nicht zwingend erforderlich. window[^developer.mozilla.org/de/docs/web/api/window] wird aber häufig als Konvention verwendet, um zu kennzeichnen, dass eine Variable global ist. Globale Variablen gilt es zu vermeiden. Die Verwendung ist kein guter Programmierstil. Sicherer ist es, wenn möglich, eigene Variablen zu definieren.
Wenn man einen Dark Mode umsetzen möchte, gibt es eine unkomplizierte Lösung: Man stellt einfach alles in Schwarzweiß dar. Der Eintrag
@media (prefers-color-scheme: dark) { body { background: #333!important; color: white !important; }}in der CSS-Datei würde dies bewirken. Ein passendes Farbschema ist qualitativ besser.
Neue Dateien
Hinzugekommen ist die CSS-Datei templates/assets/css/main.dark.css. Dieses Stylesheet enthält die Regeln für den dunklen Modus. Es unterscheidet sich von templates/assets/css/main.css lediglich in Bezug auf Farbcodes.
Die Systemnachrichten erscheinen im Dark Mode auffällig hell. Diese haben wir bisher unverändert übernommen. Im Dark Mode passe ich diese nun an. Es handelt sich um die Webkomponente
joomla-alert. Das Erscheinungsbild ist viajoomla-alert { ..}in der CSS-Datei änderbar.
Geänderte Dateien
templates/facile/index.php
Die Datei templates/facile/index.php lädt jetzt die CSS-Datei in Abhängigkeit vom bevorzugten Farbschema. Zusätzlich integriert sie in der linken oberen Ecke einen Schieberegler, der den Modus ebenfalls umschaltet. Die hierzu notwendigen Änderungen findest du im nachfolgenden Codebeispiel.
$templatePath = 'templates/' . $this->template;
$wa = $this->getWebAssetManager();
$wa->registerAndUseStyle('main', $templatePath . '/assets/css/main.css');
$wa->registerAndUseStyle('main_dark', $templatePath . '/assets/css/main.dark.css', [], ['media' => '(prefers-color-scheme: dark)']);
$wa->registerAndUseStyle('main_light', $templatePath . '/assets/css/main.css', [], ['media' => '(prefers-color-scheme: no-preference), (prefers-color-scheme: light)']);
HTMLHelper::_('jquery.framework');
$wa->registerAndUseScript('dropotron', $templatePath . '/assets/js/jquery.dropotron.min.js', [], ['defer' => true], []);
$wa->registerAndUseScript('scrolly', $templatePath . '/assets/js/jquery.scrolly.min.js', [], ['defer' => true], []);
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="styles" />
<jdoc:include type="scripts" />
<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
</head>
<body class="homepage is-preload">
<div id="page-wrapper">
<dark-mode-toggle></dark-mode-toggle>
<?php if ($this->countModules('menu', true)) : ?>
<nav id="nav">
<jdoc:include type="modules" name="menu" />
class="button scrolly"><?php echo htmlspecialchars($this->params->get('bannerBut
<jdoc:include type="modules" name="debug" />
</div>
</body>
<script>
/*
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('Dark mode is supported');
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
console.log('Dark mode');
} else {
console.log('Light mode');
}
*/
</script>
</body>
</html>Exkurs: Dark Mode abhängig vom Sonnenstand
Eine interessante Idee ist es, den Dark Mode abhängig vom Sonnenstand beim Betrachters umzuschalten: Sobald bei dem Betrachter die Sonne untergeht soll der Dark Mode anspringen. Es spielt nicht nur Zeit und Datum eine Rolle, sondern auch die Geoposition. Eine mögliche Umsetzung fand ich auf Codepen.
Zunächst werden CSS-Variablen gesetzt.
html {
--text-color: #2f2f2f;
--bg-color: #fff;
}
html[data-theme='dark'] {
--text-color: #fff;
--bg-color: #2f2f2f;
}
body {
color: var(--text-color);
background: var(--bg-color);
}Diese CSS-Variablen werden via JavaScript, welches die Zeitzone abfragt, ein- und ausgeschaltet.
// Get Current ClientTime
let clientTimes = new Date()
let currentTime = clientTimes.getHours() + clientTimes.getMinutes() / 100
let options = {
enableHighAccuracy: true,
timeout: 3000,
maximumAge: 30000,
}
let success = (pos) => {
// Get Location
let lat = pos.coords.latitude
let long = pos.coords.longitude
// Get Sunset && Sunrise Time for Location based on SunsetCalc (https://github.com/mourner/suncalc)
let sunTimes = SunCalc.getTimes(new Date(), lat, long)
let sunsetTime =
sunTimes.sunset.getHours() + sunTimes.sunset.getMinutes() / 100
let sunriseTime =
sunTimes.sunrise.getHours() + sunTimes.sunrise.getMinutes() / 100
// Add Data-Attribut to HTMl if sunsetTime < curentTime
if (currentTime > sunsetTime || currentTime < sunriseTime) {
document.querySelector('html').dataset.theme = 'dark'
}
}
let error = (err) => {
if (currentTime > 20) {
// Set Fallback if GeoLocation is not supported
document.querySelector('html').dataset.theme = 'dark'
}
}
navigator.geolocation.getCurrentPosition(success, error, options)Teste dein Joomla-Template
- Installiere dein Template in Joomla Version 4, um es zu testen:
Kopiere die Dateien im templates Ordner in den templates Ordner deiner Joomla 4 Installation.
Eine neue Installation ist nicht erforderlich. Verwende die aus dem vorhergehenden Teil weiter. Deine Website sollte nun den Dark Mode unterstützen. Im linken oberen Bereich sollte sich ein Schalter zum Umschalten des Modus befinden.
Links
prefers-color-scheme[^web.dev/prefers-color-scheme]
dark-mode-toggle-Element[^github.com/googlechromelabs/dark-mode-toggle]
Webmentions