diff --git a/src/ocamlorg_frontend/layouts/layout.eml b/src/ocamlorg_frontend/layouts/layout.eml
index 26140ae342..a33b309357 100644
--- a/src/ocamlorg_frontend/layouts/layout.eml
+++ b/src/ocamlorg_frontend/layouts/layout.eml
@@ -10,7 +10,7 @@ let base
 ?(footer_html = "")
 inner =
   <!DOCTYPE html>
-  <html lang="en">
+  <html lang="en" x-data="{ dark_mode: false }" :class="dark_mode ? 'dark' : 'light'">
     <head id="htmx-head">
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -56,7 +56,7 @@ inner =
       <title><%s title %></title>
     </head>
 
-    <body class="light">
+    <body>
       <% if banner then ( %>
       <div class="relative bg-legacy-contrast">
         <div class="mx-auto py-3 px-6 sm:px-16 max-w-6xl sm:text-center">
@@ -84,6 +84,8 @@ inner =
 
       <%s! footer_html %>
       
+      <button class="btn" @click="dark_mode = !dark_mode">toggle dark mode</button>
+
       <script>
           function scrollToTop() {
             window.scrollTo(0, 0);
