filoor 6940103255 feat(webapp): implementeer centraal kleurenschema en automatische dhikr wissel

Een nieuw centraal kleurensysteem is geïntroduceerd via colors.css, waardoor het eenvoudiger wordt om het kleurenschema van de Adhan-app te beheren en aan te passen. Dit verbetert de consistentie en onderhoudbaarheid van de stijlen in verschillende componenten van de app.

Daarnaast is een functie toegevoegd voor automatische dhikr-wisseling in adzkaar.html, die elke 30 seconden naar de volgende dhikr schakelt. Hierdoor verbetert de gebruikerservaring door een soepele en intuïtieve navigatie tussen de dhikr-items mogelijk te maken.

2025-05-28 07:28:02 +02:00

3.6 KiB

Raw Blame History

Kleurenschema Adhan App

Overzicht

Alle kleuren in de Adhan app worden nu centraal beheerd via het bestand colors.css. Dit maakt het gemakkelijk om het hele kleurenschema van de app aan te passen door slechts één bestand te wijzigen.

Hoofdkleuren

De app gebruikt vier hoofdkleuren die je kunt aanpassen:

1. Blauw (Primair)

--primary-blue: #1e3c72 - Donkerblauw voor achtergronden
--secondary-blue: #2a5298 - Lichterblauw voor gradiënten
--accent-blue: #2563eb - Helderblauw voor accenten

2. Goud

--gold: #d4af37 - Goudkleur voor speciale accenten

3. Basis kleuren

--white: #ffffff - Wit
--black: #000000 - Zwart
--dark-gray: #111111 - Donkergrijs
--light-gray: #f7fafc - Lichtgrijs

Hoe kleuren aanpassen?

Stap 1: Open colors.css

Bewerk het bestand: adhan-webapp/static/colors.css

Stap 2: Wijzig de hoofdkleuren

Verander de waarden in de :root sectie:

:root {
  /* Hoofdkleuren - PAS DEZE AAN */
  --primary-blue: #1e3c72;      /* Verander naar jouw donkere kleur */
  --secondary-blue: #2a5298;    /* Verander naar jouw lichte kleur */
  --accent-blue: #2563eb;       /* Verander naar jouw accent kleur */
  --gold: #d4af37;              /* Verander naar jouw goud/accent kleur */
  
  /* Basis kleuren - meestal niet nodig om aan te passen */
  --white: #ffffff;
  --black: #000000;
  --dark-gray: #111111;
  --light-gray: #f7fafc;
}

Stap 3: Sla op en herlaad

Na het opslaan van colors.css worden alle kleuren automatisch bijgewerkt in:

Hoofdpagina (index.html)
Adzkaar pagina (adzkaar.html)
Quran speler (quran.html)
Instellingen (settings.html)
Debug pagina (debug.html)

Voorbeelden van kleurenschema's

Groen thema

--primary-blue: #1e4d3c;
--secondary-blue: #2a8052;
--accent-blue: #25eb63;
--gold: #d4af37;

Paars thema

--primary-blue: #4c1e72;
--secondary-blue: #6a2a98;
--accent-blue: #8b25eb;
--gold: #d4af37;

Rood thema

--primary-blue: #721e1e;
--secondary-blue: #982a2a;
--accent-blue: #eb2525;
--gold: #d4af37;

Geavanceerde aanpassingen

Transparante varianten

De app gebruikt automatisch transparante versies van de kleuren. Deze worden automatisch gegenereerd, maar je kunt ze ook handmatig aanpassen:

--white-10: rgba(255, 255, 255, 0.1);   /* 10% transparant wit */
--white-20: rgba(255, 255, 255, 0.2);   /* 20% transparant wit */
--black-30: rgba(0, 0, 0, 0.3);         /* 30% transparant zwart */

Gradiënten

De hoofdgradiënt wordt automatisch gegenereerd uit de primaire kleuren:

--primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);

Bestanden die het kleurenschema gebruiken

colors.css - Centraal kleurenbestand (HOOFDBESTAND OM AAN TE PASSEN)
style.css - Importeert colors.css en gebruikt de variabelen
quran.css - Importeert colors.css voor Quran specifieke styling
adzkaar.html - Gebruikt de kleurvariabelen in inline CSS

Tips

Test altijd beide thema's: Controleer zowel de lichte als donkere modus na wijzigingen
Gebruik kleurcontrast tools: Zorg ervoor dat tekst goed leesbaar blijft
Maak een backup: Kopieer colors.css voordat je grote wijzigingen maakt
Consistentie: Gebruik dezelfde kleurfamilie voor een professionele uitstraling

Problemen oplossen

Als kleuren niet worden bijgewerkt:

Controleer of colors.css correct wordt geïmporteerd
Ververs de browser cache (Ctrl+F5 of Cmd+Shift+R)
Controleer de browser console voor CSS fouten
Zorg ervoor dat CSS variabelen correct zijn geschreven (met -- prefix)

3.6 KiB Raw Blame History