# 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:

```css
: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
```css
--primary-blue: #1e4d3c;
--secondary-blue: #2a8052;
--accent-blue: #25eb63;
--gold: #d4af37;
```

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

### Rood thema
```css
--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:

```css
--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:

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

## Bestanden die het kleurenschema gebruiken

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

## Tips

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

## Problemen oplossen

Als kleuren niet worden bijgewerkt:
1. Controleer of `colors.css` correct wordt geïmporteerd
2. Ververs de browser cache (Ctrl+F5 of Cmd+Shift+R)
3. Controleer de browser console voor CSS fouten
4. Zorg ervoor dat CSS variabelen correct zijn geschreven (met `--` prefix)