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