From 10f5fae316230f54647d1e0c6250f5e0a95ea6d7 Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Mon, 20 Nov 2023 17:07:01 +0100
Subject: [PATCH] fix(theme): don't blink theme at render with dark theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On ne veut pas attendre la fin du render pour que le JS du DSFR
set le theme à partir du scheme, autrement on voit le thème clair
pendant le render.
---
 app/views/layouts/_setup_theme.html.haml      | 9 +++++++++
 app/views/layouts/application.html.haml       | 1 +
 app/views/layouts/component_preview.html.haml | 4 +++-
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 app/views/layouts/_setup_theme.html.haml

diff --git a/app/views/layouts/_setup_theme.html.haml b/app/views/layouts/_setup_theme.html.haml
new file mode 100644
index 000000000..57c08dd77
--- /dev/null
+++ b/app/views/layouts/_setup_theme.html.haml
@@ -0,0 +1,9 @@
+:javascript
+  function setDarkBeforeRender() {
+    const localScheme = localStorage.getItem('scheme')
+    if (localScheme == 'dark' || (localScheme == 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.setAttribute('data-fr-theme', 'dark');
+    }
+  }
+  setDarkBeforeRender();
+
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index e78873f70..21d1b23fb 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -35,6 +35,7 @@
     = stylesheet_link_tag 'application', media: 'all'
 
     = yield(:invisible_captcha_styles)
+    = render partial: 'layouts/setup_theme'
 
   %body{ { id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil, data: { controller: 'turbo number-input' } }.compact }
     = render partial: 'layouts/skiplinks'
diff --git a/app/views/layouts/component_preview.html.haml b/app/views/layouts/component_preview.html.haml
index 039d7b7f8..aefb14bdf 100644
--- a/app/views/layouts/component_preview.html.haml
+++ b/app/views/layouts/component_preview.html.haml
@@ -1,5 +1,5 @@
 !!! 5
-%html{ lang: html_lang, class: yield(:root_class) }
+%html{ lang: html_lang, data: { fr_scheme: 'system' }, class: yield(:root_class) }
   %head
     %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
     %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
@@ -23,6 +23,8 @@
     = vite_stylesheet_tag 'main', media: 'all'
     = stylesheet_link_tag 'application', media: 'all'
 
+    = render partial: 'layouts/setup_theme'
+
   %body{ class: browser.platform.ios? ? 'ios' : nil, data: { controller: 'turbo' } }
     .page-wrapper
       %main.m-6