De meeste moderne webbrowsers ondersteunen de mogelijkheid om websites in donkere of lichte modus te draaien. Blocs heeft een reeks ingebouwde functies die zijn ontworpen om te helpen bij het toevoegen van ondersteuning voor donkere en lichte thema's aan de sites die u maakt.
Hoe werkt het
Wanneer een Blocs site wordt bekeken op een apparaat waarop het besturingssysteem in de donkere modus draait, de klasse donker-thema wordt toegevoegd aan de body-tag van de pagina. Dit is handig omdat het het gemakkelijk maakt om elk element te stylen met behulp van een klasse, met name in de donkere modus.
Als u bijvoorbeeld een knop heeft waarop een klasse is toegepast .mijn-knop, om de knop een ander uiterlijk te geven in de donkere modus, hoeft u alleen maar een nieuwe klasse toe te voegen met behulp van de Klasse Manager en noem het .donker-thema .mijn-knop. Alle stijlwaarden die aan deze speciale variant van de klasse worden toegevoegd, worden alleen van kracht wanneer de site wordt bekeken op een apparaat dat in de donkere modus draait.
Donkere thema lessen
Om een donkere themaversie van een klas te maken, klikt u gewoon met de rechtermuisknop op de klas in de Klasse Manager en selecteer in het contextmenu Versie met donker thema maken. Hiermee wordt een klasse met de juiste naam gemaakt, zodat de stijlwaarden alleen van kracht worden als de site in de donkere modus wordt bekeken.
Voorbeeld donkere modus
Als u een voorbeeld wilt zien van de stijl van het donkere thema van uw sites, kunt u de donkere modus van het besturingssysteem simuleren met behulp van de optie voor de donkere sitemodus in de canvas instellingen.
Houd er rekening mee dat de canvasoptie voor de donkere sitemodus ook van invloed is op de voorbeeldmodus in de app en het hoofdontwerpcanvas.
Snel voorbeeld
Hieronder is een snel voorbeeld dat het proces van het instellen van de achtergrondkleur van a . beschrijft Bloc specifiek voor de donkere modus, met behulp van alle technieken die in dit bericht worden genoemd.
