billisdead/la-voix-du-peuple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark mode FOUC with blocking inline script in index.html

Browse Source 
Apply a11y classes (dark, dyslexia, high-contrast, large-text) from
localStorage synchronously before any paint, eliminating the visible
flash on initial load. Also fix lang="en" → lang="fr".

The useEffect in AccessibilityProvider continues to handle subsequent
toggles — the inline script only covers the initial page load.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
billisdead
2026-06-24 10:12:14 +02:00
parent 41556d3ea2
commit 55629a8f22
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/voix-du-peuple/index.html
+17 -1
View File
@@ -1,10 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="fr">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<title>La Voix du Peuple</title> <title>La Voix du Peuple</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Script bloquant : applique les classes d'accessibilité avant le premier paint
pour éviter le flash (FOUC) lors du chargement depuis localStorage. -->
<script>
(function () {
var d = document.documentElement;
try {
var dark = localStorage.getItem('a11y-dark');
if (dark === 'true' || (dark === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
d.classList.add('dark');
}
if (localStorage.getItem('a11y-dyslexia') === 'true') d.classList.add('dyslexia');
if (localStorage.getItem('a11y-contrast') === 'true') d.classList.add('high-contrast');
if (localStorage.getItem('a11y-large') === 'true') d.classList.add('large-text');
} catch (e) {}
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">