Ontwerp een responsieve dark mode voor mijn website
description
Met deze prompt kan de gebruiker een moderne en toegankelijke dark mode implementeren die automatisch reageert op gebruikersvoorkeuren en apparaatinstellingen. Dit verbetert de gebruikerservaring en toegankelijkheid van de website aanzienlijk, en onderscheidt zich van standaard responsieve ontwerpen door focus op themawisselingen en kleurcontrast.
prompt
Help me een responsieve dark mode te ontwerpen die naadloos schakelt tussen licht en donker thema op verschillende apparaten. Mijn huidige CSS thema-instellingen zijn: <voer je huidige CSS thema c ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een advies om een responsieve dark mode te implementeren die naadloos schakelt tussen licht en donker thema op verschillende apparaten, inclusief gebruik van CSS-variabelen, media queries zoals prefers-color-scheme, en toegankelijkheid:
1. Gebruik CSS-variabelen voor thema's
-------------------------------
Definieer in :root je standaard licht thema en voeg een media query toe voor dark mode:
```css
:root {
--background: #ffffff;
--text: #000000;
}
/* Dark mode via media query */
@media (prefers-color-scheme: dark) {
:root {
--background: #121212; /* of een andere donkere kleur */
--text: #ffffff;
}
}
```
2. Zorg dat je CSS gebruikmaakt van de variabelen
-------------------------------
Voor je elementen, bijvoorbeeld body, header, footer, gebruik je de variabelen:
```css
body {
background-color: var(--background);
color: var(--text);
}
```
3. Handmatig schakelen (optioneel)
-------------------------------
Wil je gebruikers de mogelijkheid geven om zelf te switchen tussen thema's? Voeg bijvoorbeeld een knop toe die een class op body zet:
```css
body.light-mode {
--background: #ffffff;
--text: #000000;
}
body.dark-mode {
--background: #121212;
--text: #ffffff;
}
```
En met JavaScript kun je schakelen:
```javascript
const toggleButton = document.getElementById('toggle-theme');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
document.body.classList.toggle('light-mode');
});
```
4. Toegankelijkheid en kleurcontrast
-------------------------------
- Controleer dat het contrast tussen tekst en achtergrond minimaal voldoet aan WCAG AA (ratio minimaal 4.5:1 voor normale tekst).
- Gebruik tools zoals Contrast Checker om kleuren te evalueren.
- Vermijd kleuren die moeilijk te onderscheiden zijn voor kleurenblinden (bijvoorbeeld rood en groen).
- Overweeg het toevoegen van preferenties voor hoge contrasten:
```css
@media (prefers-contrast: high) {
:root {
--background: #000000;
--text: #ffffff;
}
}
```
5. Responsiviteit
-------------------------------
- Zorg dat je media queries gebruikt voor andere apparaten, bijvoorbeeld:
```css
@media (max-width: 600px) {
/* Aanpassingen voor kleine schermen */
}
```
Samenvatting:
- Gebruik CSS-variabelen voor licht/donker thema.
- Implementeer prefers-color-scheme voor automatische herkenning.
- Bied optioneel handmatige schakelmogelijkheid.
- Houd rekening met kleurcontrast en toegankelijkheid.
- Test op verschillende apparaten en schermen voor optimale werking.
Voor jouw website (https://mijnportfolio.nl), voeg bovenstaande CSS toe in je stylesheet en pas aan waar nodig. Mocht je hulp nodig hebben met specifieke code of implementatie, laat het gerust weten!
provider: deepseek
model: deepseek-chat
Zeker! Hier is een praktische handleiding voor een responsieve dark mode implementatie met CSS variabelen en toegankelijkheid.
## 1. Basis CSS Variabelen Setup
```css
:root {
/* Licht thema (standaard) */
--background: #ffffff;
--text: #000000;
--accent: #0066cc;
--surface: #f5f5f5;
--border: #e0e0e0;
}
[data-theme="dark"] {
/* Donker thema */
--background: #121212;
--text: #ffffff;
--accent: #4dabf7;
--surface: #1e1e1e;
--border: #333333;
}
```
## 2. Media Query voor Systeemvoorkeur
```css
@media (prefers-color-scheme: dark) {
:root {
--background: #121212;
--text: #ffffff;
--accent: #4dabf7;
--surface: #1e1e1e;
--border: #333333;
}
}
```
## 3. Toepassing in je Stylesheet
```css
body {
background-color: var(--background);
color: var(--text);
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
background-color: var(--surface);
border: 1px solid var(--border);
}
a {
color: var(--accent);
}
```
## 4. JavaScript voor Thema Schakeling
```javascript
class ThemeManager {
constructor() {
this.currentTheme = localStorage.getItem('theme') || 'auto';
this.init();
}
init() {
this.applyTheme();
this.createThemeToggle();
}
applyTheme() {
if (this.currentTheme === 'dark' ||
(this.currentTheme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.removeAttribute('data-theme');
}
}
createThemeToggle() {
const toggle = document.createElement('button');
toggle.innerHTML = '🌓 Thema';
toggle.setAttribute('aria-label', 'Wissel tussen licht en donker thema');
toggle.addEventListener('click', () => this.toggleTheme());
// Voeg toe aan je navigatie of header
document.querySelector('header')?.appendChild(toggle);
}
toggleTheme() {
this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', this.currentTheme);
this.applyTheme();
}
}
// Initialiseer bij het laden
new ThemeManager();
```
## 5. Toegankelijkheid & Contrast
```css
/* Minimale contrast ratios voor WCAG AA */
:root {
--text: #000000; /* Contrast ratio: 21:1 op wit */
--accent: #0056b3; /* Donkerder blauw voor beter contrast */
}
[data-theme="dark"] {
--text: #ffffff; /* Contrast ratio: 21:1 op zwart */
--accent: #4dabf7; /* Helder blauw voor donkere achtergrond */
}
/* Extra contrast checks */
@media (prefers-contrast: high) {
:root {
--text: #000000;
--background: #ffffff;
--border: #000000;
}
[data-theme="dark"] {
--text: #ffffff;
--background: #000000;
--border: #ffffff;
}
}
```
## 6. CSS Custom Properties Fallback
```css
.element {
color: var(--text, #000000); /* Fallback naar zwart */
background-color: var(--background, #ffffff); /* Fallback naar wit */
}
```
## 7. Performance Optimalisaties
```css
/* Hardware versnelling voor smooth transitions */
body {
will-change: background-color, color;
}
/* Reduce flash of unstyled content */
:root {
color-scheme: light dark;
}
```
## 8. HTML Meta Tag voor Kleurschema
```html
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
```
## Belangrijke Toegankelijkheidstips:
1. **Contrast Ratio**: Gebruik tools zoals Lighthouse of axe om contrast te testen
2. **Focus Indicators**: Zorg dat focus zichtbaar blijft in beide thema's
3. **Kleur niet als enige indicator**: Gebruik ook tekst of iconen
4. **Test met screenreaders**: Zorg dat de thema-wissel goed wordt aangekondigd
## Implementatie Volgorde:
1. Update je CSS variabelen
2. Voeg de media query toe
3. Implementeer de JavaScript schakelaar
4. Test contrast en toegankelijkheid
5. Optimaliseer performance
Deze aanpak zorgt voor een naadloze ervaring waarbij gebruikersinstellingen worden gerespecteerd en de website toegankelijk blijft voor iedereen.