Houd me bezig met het implementeren van een thema-wisselaar voor mijn Svelte-toepassing.
description
Door een thema-wisselaar te implementeren, verhoog je de betrokkenheid en tevredenheid van gebruikers, waardoor je toepassing toegankelijker en visueel aantrekkelijker wordt.
prompt
try_prompt
Beschrijf hoe ik een dynamische thema-wisselaar kan maken in mijn Svelte-toepassing, waarmee gebruikers kunnen schakelen tussen lichte en donkere modi. Voeg stappen toe over het ... more
generate_helper
...
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Hier is een stapsgewijze gids om een dynamische thema-wisselaar te maken in je Svelte-app "Mijn Svelte-app" waarmee gebruikers kunnen schakelen tussen licht en donker:
1. Creëer een store voor het thema:
Maak een nieuwe Svelte store om de huidige thema-stand bij te houden, bijvoorbeeld in `src/stores/theme.js`:
```js
import { writable } from 'svelte/store';
export const theme = writable('licht'); // standaard op licht
```
2. Stel CSS-variabelen in:
Voeg in je globale CSS (bijvoorbeeld in `src/global.css` of in een `<style>` block in je `App.svelte`) variabelen toe die afhankelijk zijn van het thema:
```css
:root {
--background-color: #ffffff;
--text-color: #000000;
}
[data-thema="donker"] {
--background-color: #121212;
--text-color: #ffffff;
}
```
3. Koppel de store aan de HTML:
In je hoofd component (`App.svelte`) gebruik je de store en pas je het `data-thema` attribuut toe op het `<body>` of een andere container:
```svelte
<script>
import { theme } from './stores/theme.js';
import { onMount } from 'svelte';
let huidigThema;
theme.subscribe(value => {
huidigThema = value;
document.documentElement.setAttribute('data-thema', value);
});
function wisselThema() {
theme.update(current => current === 'licht' ? 'donker' : 'licht');
}
</script>
<button on:click={wisselThema}>
Wissel naar {huidigThema === 'licht' ? 'donker' : 'licht'} thema
</button>
```
4. Gebruik CSS-variabelen in je stijlen:
In je componenten of globale CSS:
```css
body {
background-color: var(--background-color);
color: var(--text-color);
}
```
5. Optioneel: behoud het thema in localStorage:
Om de voorkeur van de gebruiker te onthouden, kun je de store uitbreiden:
```js
import { writable } from 'svelte/store';
const opgeslagenThema = localStorage.getItem('thema') || 'licht';
export const theme = writable(opgeslagenThema);
theme.subscribe(value => {
localStorage.setItem('thema', value);
document.documentElement.setAttribute('data-thema', value);
});
```
Door deze stappen te volgen, kun je in je Svelte-app een dynamische thema-wisselaar implementeren die CSS-variabelen gebruikt om het uiterlijk aan te passen en de gebruiker kan schakelen tussen licht en donker.
provider: deepseek
model: deepseek-chat
Hier is een stapsgewijze handleiding voor het maken van een dynamische thema-wisselaar in je Svelte-applicatie:
## 1. CSS Variabelen instellen
Maak een CSS-bestand (`src/app.css`) met thema-variabelen:
```css
:root {
/* Licht thema (standaard) */
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #3b82f6;
--secondary-color: #6b7280;
--border-color: #e5e7eb;
}
[data-theme="dark"] {
/* Donker thema */
--bg-color: #1f2937;
--text-color: #f9fafb;
--primary-color: #60a5fa;
--secondary-color: #9ca3af;
--border-color: #374151;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
background-color: var(--bg-color);
color: var(--text-color);
}
.button-primary {
background-color: var(--primary-color);
color: white;
}
```
## 2. Thema Store aanmaken
Maak een Svelte store (`src/stores/theme.js`):
```javascript
import { writable } from 'svelte/store';
// Haal opgeslagen thema op uit localStorage, of gebruik 'light' als standaard
const storedTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') : 'light';
export const theme = writable(storedTheme || 'light');
// Luister naar wijzigingen en sla op in localStorage
if (typeof window !== 'undefined') {
theme.subscribe(value => {
localStorage.setItem('theme', value);
document.documentElement.setAttribute('data-theme', value);
});
}
```
## 3. Hoofd App Component aanpassen
Pas je `src/App.svelte` aan:
```svelte
<script>
import { onMount } from 'svelte';
import { theme } from './stores/theme.js';
// Importeer de CSS
import './app.css';
let currentTheme;
const unsubscribe = theme.subscribe(value => {
currentTheme = value;
});
onMount(() => {
// Stel het thema in bij het laden
document.documentElement.setAttribute('data-theme', currentTheme);
return () => unsubscribe();
});
</script>
<main class="container">
<h1>Mijn Svelte App</h1>
<ThemaWisselaar />
<!-- Je andere componenten hier -->
<div class="content">
<p>Welkom bij mijn applicatie met thema-ondersteuning!</p>
</div>
</main>
<style>
.container {
padding: 2rem;
min-height: 100vh;
}
.content {
margin-top: 2rem;
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
}
</style>
```
## 4. Thema Wisselaar Component
Maak `src/components/ThemaWisselaar.svelte`:
```svelte
<script>
import { theme } from '../stores/theme.js';
function toggleTheme() {
theme.update(current => current === 'light' ? 'dark' : 'light');
}
</script>
<div class="theme-switcher">
<button
class="theme-button"
on:click={toggleTheme}
aria-label="Wissel thema"
>
{#if $theme === 'light'}
<span class="icon">🌙</span> Donker thema
{:else}
<span class="icon">☀️</span> Licht thema
{/if}
</button>
<div class="theme-status">
Huidig thema: <strong>{$theme === 'light' ? 'Licht' : 'Donker'}</strong>
</div>
</div>
<style>
.theme-switcher {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.theme-button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: opacity 0.2s ease;
}
.theme-button:hover {
opacity: 0.9;
}
.theme-status {
font-size: 0.9rem;
color: var(--secondary-color);
}
.icon {
font-size: 1.2rem;
}
</style>
```
## 5. App.svelte bijwerken
Importeer de thema-wisselaar in je hoofdcomponent:
```svelte
<script>
import { onMount } from 'svelte';
import { theme } from './stores/theme.js';
import ThemaWisselaar from './components/ThemaWisselaar.svelte';
import './app.css';
let currentTheme;
const unsubscribe = theme.subscribe(value => {
currentTheme = value;
});
onMount(() => {
document.documentElement.setAttribute('data-theme', currentTheme);
return () => unsubscribe();
});
</script>
<main class="container">
<header>
<h1>Mijn Svelte App</h1>
<ThemaWisselaar />
</header>
<div class="content">
<slot />
</div>
</main>
<style>
.container {
padding: 2rem;
min-height: 100vh;
transition: all 0.3s ease;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}
.content {
padding: 1rem 0;
}
</style>
```
## 6. Gebruik in andere componenten
In elk component kun je nu de CSS variabelen gebruiken:
```svelte
<div class="my-component">
<h2>Mijn Component</h2>
<p>Deze tekst past zich automatisch aan aan het geselecteerde thema.</p>
</div>
<style>
.my-component {
background-color: var(--bg-color);
color: var(--text-color);
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
}
</style>
```
## Belangrijke punten:
- **LocalStorage**: Het thema wordt opgeslagen en blijft behouden tussen sessies
- **Systeemvoorkeur**: Je kunt dit uitbreiden om het systeemthema te detecteren met `prefers-color-scheme`
- **Toegankelijkheid**: De knop heeft een aria-label voor screen readers
- **Gladde overgangen**: CSS transitions zorgen voor vloeiende thema-wisselingen
De thema-wisselaar is nu volledig functioneel en gebruikers kunnen naadloos schakelen tussen lichte en donkere modi!