filoor
6940103255
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.
119 lines
3.6 KiB
Markdown
119 lines
3.6 KiB
Markdown
# 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) |