CookieTractor med olika färgscheman

Vår cookie-banner går att visa i olika färgscheman som kan lyssna på besökarens förval i operativsystemet eller i webbläsaren. Populärt pratas det om Dark Mode som helt enkelt visar fönster och kompatibla webbplatser med mörkare färgtoner när besökaren efterfrågat det. Skälen till att anpassa färgerna kan vara många, inte minst när det kommer till ökad tillgänglighet och i vissa fall lägre klimatpåverkan. 

Välj färgschema

Inne i vårt verktyg under fliken Design finns möjlighet att välja ett av de tre färgscheman: Ljust, mörkt och adaptivt. De två tidigare lägena tvingar dialogen att visas ljust (som är standard), respektive mörkt. 

Det adaptiva färgschemat lyssnar på besökarens inställningar, och visar dialogen i det gällande schemat. 

Anpassa variabler

Det ljusa och det mörka schemat går att anpassa var och ett för sig. Det finns varsin uppsättning färger för primär och sekundär text- och bakgrundsfärg. Om de ljusa färgerna ändras, men inte de mörka så kommer de ljusa att ärvas in i de mörka. 

Tvinga in mörkt schema i ljust läge

Om det valda schemat är adaptivt så tillkommer möjligheten att prefixa de mörka anpassningarna i dialogen med en CSS-selektor. På så sätt kan ni manuellt växla in vårt mörka läge. Exempelvis om ni låter besökaren byta mellan ljust och mörkt läge på er webbplats - och sätter CSS-klassen darkmode på HTML-taggen så lägger ni till .darkmode i fältet Dark color scheme CSS prefix. Då kommer alla anpassningar för det mörka läget att tvingas in när .darkmode är renderat i koden. 

Om ni identifierar det mörka läget med något annat än en class så funkar det förstås bra också. Exempelvis om ni har ett attribut, ex: [data-colormode='dark'] eller använder ett id, ex: #darkmode osv.

Skriv egen CSS

För vardera färgläge kan ni lägga till egen CSS för ytterligare anpassningar i textrutan Custom CSS. Varje regel kommer att prefixas med våra selektorer för att tvinga förändringen att endast påverka vår dialog. Om ni satt något i fältet Dark color scheme CSS prefix så kommer även dess värde att läggas till innan respektive regel i det mörka läget. 

Relaterad information