Verslag JUG Eindhoven 21 januari 2025
Een frisse dinsdagavond, maar wij zitten lekker binnen. Geen programma, wel vragen uit de comments van de aankondiging.
Light / Dark mode van website
Vanuit de comments van de aankondiging van deze bijeenkomst is de vraag gesteld wie er ervaring heeft met een dark mode maken van je website. Hieronder staat de basis toegelicht hoe het principe werkt.
De dark mode van je website is een design keuze waarbij de achtergrondkleur van de website donker is ipv wit. Niet alleen kan dit chic ogen, maar is, vooral in de avond en nacht, een heel stuk rustiger voor de ogen. Daarnaast gebruikt een donkere website minder energie dan een lichte website.
Joomla Administrator template Atum is voorbereid op dark/light mode. De versie die je krijgt is afhankelijk van de configuratie. Ingelogd in het administratief gedeelte van de website kun je rechtsboven bij je profiel switchten tussen light en dark mode. Vanuit de instellingen van je profiel kun je ook aangeven dat het naar de instellingen van je besturingssysteem moet kijken. Bij de Mac OS kan die instelling zijn light, dark of auto. Bij de laatste setting zal de computer zelf op een gegeven moment omschakelen van light naar dark mode en terug. De randen van je programma's worden dan in ene donker. De website gaat mee, mits deze voorbereid is op dark / light mode.
Joomla Frontend template Cassiopeia is, op moment van schrijven, nog niet voorbereid op dark / light mode.
In principe is het doorvoeren van dark mode eenvoudig. Al zal de werkelijke implementatie best wel wat uren tijd vergen.
Er zijn twee manieren om de browser user agent aan te geven welke style de voorkeur heeft:
1. via meta tag in je template
<meta name="color-scheme" content="dark light">2. via de css van je template
:root {
color-scheme: light dark;
}De volgorde light / dark of dark / light maakt niet uit. Het enige wat het doet is aangeven dat er een light en dark mode color scheme aanwezig is.
CSS
:root {
--white: #FFFFFF;
--black: #000000;
--green: #00FF00;
--red: #FF0000;
--text: var(--black);
--background: var(--white);
--headingColor: var(--green);
color-scheme: dark light;
}
@media (prefers-color-scheme: dark) {
:root {
--text: var(--white);
--background: var(--black);
--headingColor: var(--red);
}
}
/* :root:has([data-theme="waterfiets"]) {
--text: #ff0000;
} */
body {
font-family: system-ui;
font-size: 1.5rem;
color: var(--text);
background: var(--background);
}
h1 {
color: var(--headingColor, var(--text));
}Zoals je in de CSS hierboven kunt zien wordt er geen directe kleur geplaatst bij de attributen color en background, maar wordt gewerkt met custom properties. Deze custom properties worden gedefinieerd in de :root element van de site. En aldaar kijken de custom properties ook nog eens naar de gedefinieerde kleuren, zodat men maar op één plek kleuren hoeft te definiëren.
Daarna volgt een media query die kijkt naar de settings prefers-color-scheme. Als die ingesteld is op dark, zal die in werking treden. Ingestelde custom properties worden dan toegewezen aan andere kleuren. Het gevolg is dat bij dark theme de site er anders uit zal zien dan bij light theme.
Bovenstaand voorbeeld is uitgewerkt in Codepen: https://codepen.io/hans2103/pen/YPKOMqm
Dit is in de basis de werking van dark / light mode. Het werken met custom properties maakt het omzetten een stuk makkelijker. Het omzetten van je css naar gebruik van custom properties is een andere verhaal... :-)
Kevin Powell geeft op 24 januari 18:00 uur een demo op YouTube over hoe een website om te zetten naar dark mode.
url: https://www.youtube.com/watch?v=7ijxVDWIE_8
Agenda Actueel en Agenda Archief
De agenda op de website van Oeteldonk (https://www.oeteldonk.org/activiteiten/agenda) toont alle komende activiteiten. Google Analytics liet zien dat de dag na een activiteit de pagina het meest bezocht wordt... echter... voorheen kwam men op een 404 pagina terecht. De site was namelijk dusdanig ingericht dat de dag na de activiteit het item niet meer in de agenda staat. Het item was dan automatisch gedepubliceerd. De datum "stop publiceren" stond ingesteld op de dag na de activiteit.
De website is aangepast en sinds een tijdje hebben we aldaar ook een agenda archief (https://www.oeteldonk.org/activiteiten/agenda/archief). Tot zes maanden na de activiteit zal deze nog getoond worden op de website.
Sinds enige tijd kent Joomla bij het bewerken van een artikel op tabblad Publiceren ook het veld "Einde Speciaal". Door die te vullen met de datum na de activiteit zal het vinkje bij Speciaal de dag na de activiteit wijzigen van JA naar NEE. Gebruik dit in de configuratie van de menu items "agenda actueel" en "agenda archief".
Menu structuur:
- Agenda => /agenda => template override van Article Category Blog. Toont alle gepubliceerde agenda items, die status Speciaal = JA hebben
- Actueel => /agenda/actueel => alias naar /agenda
- Archief => /agenda/archief => template override van Article Category Blog. Toont alle gepubliceerde agenda items, die status Speciaal = NEE hebben
Met deze opzet zullen de individuele artikelen de url /agenda/alias-van-item behouden. Ook al zit het item in het archief. Oftewel... geen 404 hit vanuit de zoekmachines.
Volgende keer
De volgende JUG Eindhoven is op de dinsdag 18 februari. Het onderwerp van deze meeting en de mogelijkheid tot aanmelden is terug te vinden op https://joomlacommunity.nl/agenda/overige/event/801-jug040-bijeenkomst-eindhoven
Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.