add prose_options to the config to change theme and colors of the Pro…

…se::Component

app/components/lookbook/prose/component.html.erb

@@ -1,3 +1,8 @@
-<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link" do %>
+<%= render_component_tag class: [
+  "prose #{theme_classname} #{size_class} text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link",
+  {
+    '!prose-invert': @invert_colors # use ! as important to fix tailwindcss bug
+  }
+] do %>
   <%== rendered_content %>
 <% end %>

app/components/lookbook/prose/component.rb

@@ -2,16 +2,22 @@ module Lookbook
   class Prose::Component < Lookbook::BaseComponent
     include Lookbook::OutputHelper
 
-    def initialize(size: :md, markdown: true, **html_attrs)
+    def initialize(size: :md, markdown: true, theme: nil, invert_colors: false, **html_attrs)
       @size = size
       @markdown = markdown
+      @theme = theme
+      @invert_colors = invert_colors
       super(**html_attrs)
     end
 
     def rendered_content
       @markdown ? markdown(content.strip_heredoc) : helpers.raw(content)
     end
 
+    def theme_classname
+      "prose-#{@theme}"
+    end
+
     def size_class
       case @size
       when :sm
@@ -22,5 +28,10 @@ def size_class
         ""
       end
     end
+
+    def before_render
+      @theme ||= (config.prose_options && config.prose_options[:theme]&.to_sym) || :gray
+      @invert_colors ||= ActiveModel::Type::Boolean.new.cast((config.prose_options && config.prose_options[:invert_colors]) || false)
+    end
   end
 end

app/views/lookbook/pages/show.html.erb

@@ -1,9 +1,9 @@
 <div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
   <div class="w-full max-w-screen-lg mx-auto h-full flex flex-col">
     <% if @page.header? %>
-      <header id="page-header" class="mb-8 prose max-w-none flex-none">
+      <%= lookbook_render :prose, tag: :header, id: "page-header", markdown: false, class: "mb-8 prose max-w-none flex-none" do %>
         <h1><%= @page.title %></h1>
-      </header>
+      <% end %>
     <% end %>
 
     <%= lookbook_render :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>

config/app.yml

@@ -20,6 +20,9 @@ shared:
   highlighter_options:
     theme: github
     dark: false
+  prose_options:
+    theme: gray
+    invert_colors: false
   sort_examples: false
   preview_paths: []
   preview_display_options: {}

docs/src/_data/config_options.yml

@@ -147,6 +147,20 @@
     config.lookbook.highlighter_options.dark = true
   description: Code syntax highlighting options. Note that `:github` is the only theme that is currently supported.
 
+- name: prose_options
+  group: ui
+  type: Hash
+  default: "{ theme: :gray, invert_colors: false }"
+  example: |
+    config.lookbook.prose_options = {
+      theme: :gray,
+      invert_colors: true
+    }
+
+    # or
+    config.lookbook.prose_options.invert_colors = true
+  description: Prose options. Available themes are :gray, :slate, :zinc, :neutral and :stone
+
 - name: auto_refresh
   group: ui
   type: Boolean

lib/lookbook/stores/config_store.rb

@@ -39,6 +39,10 @@ def listen_extensions=(extensions = nil)
       store[:listen_extensions].push(*extensions.to_a).uniq!
     end
 
+    def prose_options=(options = nil)
+      store[:prose_options].merge!(options.to_h)
+    end
+
     def markdown_options=(options = nil)
       store[:markdown_options].merge!(options.to_h)
     end