Merge pull request #73 from substancelab/koppen/lookbook-dark-mode

koppen · web-flow · commit c89bc21a8f9d · 2026-01-31T17:07:32.000+01:00
Add dark mode to Lookbook
diff --git a/demo/app/views/layouts/preview.html.erb b/demo/app/views/layouts/preview.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="<%= params.dig(:lookbook, :display, :theme) %>">
   <head>
     <title><%= content_for(:title) || "Demo" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -13,7 +13,7 @@
     <%= stylesheet_link_tag :app %>
   </head>
 
-  <body>
+  <body class="bg-neutral-primary text-body">
     <% if params[:lookbook_embed] %>
       <main class="flex p-5">
         <%= yield %>
diff --git a/demo/config/initializers/lookbook.rb b/demo/config/initializers/lookbook.rb
@@ -1,3 +1,7 @@
 Rails.application.configure do
   config.view_component.previews.default_layout = "preview"
+
+  config.lookbook.preview_display_options = {
+    theme: %w[light dark]
+  }
 end
