Mörkt tema

Appen har stöd för mörkt app tema, så kallat "dark mode", där gränssnittet visas med en mörk app-bakgrund och ljusare komponenter ovanpå.


Struktur

Det mörka temat är baserat på ett statiskt tema som är densamma för alla kunder. För att skapa igenkännande av de individuella apparna kommer dock ett antal färger att plockas från det ljusa temat och visas upp i det mörka. Dessa färger behöver då ha bra kontrast mot både det ljusa och det mörka temat, men består till stor del av hela komponenter som endast har inbördes krav på kontrast och därför fungerar i båda teman.

De färger från temat i Bridge som används i både det ljusa och mörka temat är:

  • Graffärgerna i spotprisvyn
  • Graffärgerna i detaljerad historik
  • Knappfärg
  • Färger för aktiva flikar i flik-komponenter
  • De aktiva, positiva och negativa favoriternas färger

Inställningar i appen

Användare kan välja mellan det mörka och ljusa inställningar på Utseende-sidan som ligger under Min profil. Under inställningarna finns även ett alternativ att följa telefonens systeminställningar. Detta beteende är även standardbeteendet som är inställt i appen om användaren inte gjort några andra val.


Webvyer

För att möjliggöra tematisk anpassning även i externa webbvyer använder vi en parameter som anger användarens aktuella tema.


URL-parameter

Vid öppning av webbvyer inkluderar vi, i tillämpliga fall, parametern userAppTheme={light|dark} i URL:en.

Exempel:

https://www.domain.se/new/article-id?userAppTheme=light&otherParam=value

För dynamiska moduler konfigurerade via Bright Bridge kommer denna parameter att automatiskt bifogas om alternativet “Enrich URL” är aktiverat.

Specifikationen för Bright-kit.

Observera att detta stöd inte gäller för RSS-flöden då dessa inte innehåller länkar som är en del av appen.


Färgsättning

Med hjälp av URL-parametern ovan kan webvyer få till samma känsla och färgsättning som resten av appen genom att använda nedföljande färger

  • Bakgrundsfärg: #0B0B0B
  • Bakgrundsfärg på ytor och boxar: #FFFFFF1A (Vit med 10% genomskinlighet)
  • Ikonbakgrund: #000000
  • Ikonfärg: #FFFFFF