{
    "sourceFile": "adhan-webapp/static/README-KLEUREN.md",
    "activeCommit": 0,
    "commits": [
        {
            "activePatchIndex": 0,
            "patches": [
                {
                    "date": 1748410011936,
                    "content": "Index: \n===================================================================\n--- \n+++ \n"
                }
            ],
            "date": 1748410011936,
            "name": "Commit-0",
            "content": "# Kleurenschema Adhan App\n\n## Overzicht\nAlle 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.\n\n## Hoofdkleuren\nDe app gebruikt vier hoofdkleuren die je kunt aanpassen:\n\n### 1. Blauw (Primair)\n- `--primary-blue: #1e3c72` - Donkerblauw voor achtergronden\n- `--secondary-blue: #2a5298` - Lichterblauw voor gradiënten\n- `--accent-blue: #2563eb` - Helderblauw voor accenten\n\n### 2. Goud\n- `--gold: #d4af37` - Goudkleur voor speciale accenten\n\n### 3. Basis kleuren\n- `--white: #ffffff` - Wit\n- `--black: #000000` - Zwart\n- `--dark-gray: #111111` - Donkergrijs\n- `--light-gray: #f7fafc` - Lichtgrijs\n\n## Hoe kleuren aanpassen?\n\n### Stap 1: Open colors.css\nBewerk het bestand: `adhan-webapp/static/colors.css`\n\n### Stap 2: Wijzig de hoofdkleuren\nVerander de waarden in de `:root` sectie:\n\n```css\n:root {\n  /* Hoofdkleuren - PAS DEZE AAN */\n  --primary-blue: #1e3c72;      /* Verander naar jouw donkere kleur */\n  --secondary-blue: #2a5298;    /* Verander naar jouw lichte kleur */\n  --accent-blue: #2563eb;       /* Verander naar jouw accent kleur */\n  --gold: #d4af37;              /* Verander naar jouw goud/accent kleur */\n  \n  /* Basis kleuren - meestal niet nodig om aan te passen */\n  --white: #ffffff;\n  --black: #000000;\n  --dark-gray: #111111;\n  --light-gray: #f7fafc;\n}\n```\n\n### Stap 3: Sla op en herlaad\nNa het opslaan van `colors.css` worden alle kleuren automatisch bijgewerkt in:\n- Hoofdpagina (`index.html`)\n- Adzkaar pagina (`adzkaar.html`)\n- Quran speler (`quran.html`)\n- Instellingen (`settings.html`)\n- Debug pagina (`debug.html`)\n\n## Voorbeelden van kleurenschema's\n\n### Groen thema\n```css\n--primary-blue: #1e4d3c;\n--secondary-blue: #2a8052;\n--accent-blue: #25eb63;\n--gold: #d4af37;\n```\n\n### Paars thema\n```css\n--primary-blue: #4c1e72;\n--secondary-blue: #6a2a98;\n--accent-blue: #8b25eb;\n--gold: #d4af37;\n```\n\n### Rood thema\n```css\n--primary-blue: #721e1e;\n--secondary-blue: #982a2a;\n--accent-blue: #eb2525;\n--gold: #d4af37;\n```\n\n## Geavanceerde aanpassingen\n\n### Transparante varianten\nDe app gebruikt automatisch transparante versies van de kleuren. Deze worden automatisch gegenereerd, maar je kunt ze ook handmatig aanpassen:\n\n```css\n--white-10: rgba(255, 255, 255, 0.1);   /* 10% transparant wit */\n--white-20: rgba(255, 255, 255, 0.2);   /* 20% transparant wit */\n--black-30: rgba(0, 0, 0, 0.3);         /* 30% transparant zwart */\n```\n\n### Gradiënten\nDe hoofdgradiënt wordt automatisch gegenereerd uit de primaire kleuren:\n\n```css\n--primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);\n```\n\n## Bestanden die het kleurenschema gebruiken\n\n1. **colors.css** - Centraal kleurenbestand (HOOFDBESTAND OM AAN TE PASSEN)\n2. **style.css** - Importeert colors.css en gebruikt de variabelen\n3. **quran.css** - Importeert colors.css voor Quran specifieke styling\n4. **adzkaar.html** - Gebruikt de kleurvariabelen in inline CSS\n\n## Tips\n\n1. **Test altijd beide thema's**: Controleer zowel de lichte als donkere modus na wijzigingen\n2. **Gebruik kleurcontrast tools**: Zorg ervoor dat tekst goed leesbaar blijft\n3. **Maak een backup**: Kopieer `colors.css` voordat je grote wijzigingen maakt\n4. **Consistentie**: Gebruik dezelfde kleurfamilie voor een professionele uitstraling\n\n## Problemen oplossen\n\nAls kleuren niet worden bijgewerkt:\n1. Controleer of `colors.css` correct wordt geïmporteerd\n2. Ververs de browser cache (Ctrl+F5 of Cmd+Shift+R)\n3. Controleer de browser console voor CSS fouten\n4. Zorg ervoor dat CSS variabelen correct zijn geschreven (met `--` prefix) "
        }
    ]
}