Transform app styling to pastel purple theme with NYT-inspired design (#16)

- Add custom Tailwind configuration with purple color palette
- Integrate Google Fonts (Playfair Display, Crimson Text, Source Sans 3)
- Replace all blue UI elements with purple equivalents
- Implement dark mode support with toggle in user dropdown
- Add paper-colored background for classic article aesthetic
- Update typography for NYT-inspired article presentation
- Enhance blog post views with improved readability
- Fix Tailwind build issues by removing \!important declarations
- Add dark mode variants throughout the application

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: jhash

app/assets/stylesheets/actiontext.css

@@ -377,11 +377,11 @@ trix-editor blockquote::before,
   @apply inline-block relative max-w-full;
 }
 .trix-content .attachment a {
-  @apply text-inherit no-underline !important;
+  @apply text-inherit no-underline;
 }
 .trix-content .attachment a:hover, 
 .trix-content .attachment a:visited:hover {
-  @apply text-inherit !important;
+  @apply text-inherit;
 }
 .trix-content .attachment__caption {
   @apply text-center;
@@ -425,8 +425,8 @@ trix-editor blockquote::before,
 }
 
 .trix-content action-text-attachment .attachment {
-  padding: 0 !important;
-  max-width: 100% !important;
+  padding: 0;
+  max-width: 100%;
 }
 
 /* Custom heading styles for Trix editor - matching public view */

app/components/admin/page_header_component.html.erb

@@ -1,14 +1,14 @@
-<div class="px-6 py-4 border-b border-gray-200">
+<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
   <div class="flex items-center justify-between">
     <div>
-      <h1 class="text-2xl font-semibold text-gray-900"><%= title %></h1>
+      <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100"><%= title %></h1>
       <% if description.present? %>
-        <p class="mt-1 text-sm text-gray-600"><%= description %></p>
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400"><%= description %></p>
       <% end %>
     </div>
     <% if action_text.present? && action_path.present? %>
       <%= link_to action_text, action_path, 
-          class: "bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors" %>
+          class: "bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-md transition-colors" %>
     <% end %>
   </div>
 </div>

app/components/navbar_component.html.erb

@@ -1,10 +1,10 @@
-<nav class="bg-gray-900 text-white shadow-lg">
+<nav class="bg-purple-900 text-white shadow-lg dark:bg-purple-950">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex justify-between h-16">
       <div class="flex items-center">
         <% if current_user %>
           <button type="button" 
-                  class="mr-3 p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 lg:hidden"
+                  class="mr-3 p-2 rounded-md text-purple-200 hover:text-white hover:bg-purple-800 lg:hidden"
                   aria-haspopup="true"
                   aria-expanded="false"
                   aria-controls="sidebar-menu"
@@ -15,7 +15,7 @@
             </svg>
           </button>
         <% end %>
-        <%= link_to "Eight", root_path, class: "text-xl font-bold hover:text-gray-300 transition-colors" %>
+        <%= link_to "Eight", root_path, class: "text-xl font-display font-bold hover:text-purple-200 transition-colors" %>
       </div>
 
       <div class="flex items-center space-x-4">
@@ -25,38 +25,48 @@
         <% if current_user %>
           <div class="relative" data-controller="dropdown">
             <button type="button" 
-                    class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-white transition-colors"
+                    class="flex items-center justify-center w-10 h-10 rounded-full bg-purple-700 hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-300 transition-colors"
                     data-action="click->dropdown#toggle click@window->dropdown#hide"
                     aria-expanded="false"
                     aria-haspopup="true">
               <span class="text-sm font-medium"><%= user_initials %></span>
             </button>
 
-            <div class="dropdown-menu absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
+            <div class="dropdown-menu absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5"
                  data-dropdown-target="menu"
                  role="menu"
                  aria-orientation="vertical"
                  aria-labelledby="user-menu">
-              <div class="px-4 py-2 border-b border-gray-200">
-                <p class="text-sm font-medium text-gray-900"><%= current_user.name %></p>
-                <p class="text-xs text-gray-500"><%= current_user.email %></p>
+              <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+                <p class="text-sm font-medium text-gray-900 dark:text-gray-100"><%= current_user.name %></p>
+                <p class="text-xs text-gray-500 dark:text-gray-400"><%= current_user.email %></p>
               </div>
 
               <%= link_to "Settings", settings_path, 
-                  class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
+                  class: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700",
                   role: "menuitem" %>
 
-              <div class="border-t border-gray-200">
+              <form action="#" method="POST" data-turbo="false" class="px-4 py-2">
+                <label class="flex items-center justify-between cursor-pointer">
+                  <span class="text-sm text-gray-700 dark:text-gray-200">Dark Mode</span>
+                  <input type="checkbox" name="dark_mode" 
+                         class="sr-only peer"
+                         onchange="document.documentElement.classList.toggle('dark'); localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'))">
+                  <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
+                </label>
+              </form>
+              
+              <div class="border-t border-gray-200 dark:border-gray-700">
                 <%= button_to "Sign Out", logout_path, method: :delete,
-                    class: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
+                    class: "block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700",
                     data: { turbo: false },
                     role: "menuitem" %>
               </div>
             </div>
           </div>
         <% else %>
           <%= link_to "Sign in", sign_in_path,
-              class: "bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm transition-colors" %>
+              class: "bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded text-sm transition-colors" %>
         <% end %>
       </div>
     </div>

app/components/sidebar_component.html.erb

@@ -1,10 +1,10 @@
-<aside id="sidebar-menu" class="bg-gray-800 text-white min-h-screen flex flex-col fixed lg:static inset-y-0 left-0 z-40 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out" role="menu" aria-label="Main navigation">
+<aside id="sidebar-menu" class="bg-purple-800 dark:bg-purple-950 text-white min-h-screen flex flex-col fixed lg:static inset-y-0 left-0 z-40 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out" role="menu" aria-label="Main navigation">
   <div class="px-4 py-6">
     <nav class="space-y-1" role="tree">
       <% nav_items.each_with_index do |item, index| %>
         <% if item[:children] %>
           <details class="group" <%= "open" if any_child_active?(item[:children]) %>>
-            <summary class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors cursor-pointer hover:bg-gray-700 list-none"
+            <summary class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors cursor-pointer hover:bg-purple-700 dark:hover:bg-purple-800 list-none"
                      role="treeitem"
                      aria-expanded="<%= any_child_active?(item[:children]) ? 'true' : 'false' %>"
                      tabindex="0">
@@ -37,7 +37,7 @@
   </div>
 
   <% if sidebar_filters.present? %>
-    <div class="px-4 py-6 border-t border-gray-700">
+    <div class="px-4 py-6 border-t border-purple-700 dark:border-purple-800">
       <%= sidebar_filters %>
     </div>
   <% end %>

app/components/sidebar_component.rb

@@ -45,9 +45,9 @@ def any_child_active?(children)
   def item_classes(item)
     base = "flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors"
     if is_active?(item[:path])
-      "#{base} bg-gray-900 text-white"
+      "#{base} bg-purple-900 dark:bg-purple-800 text-white"
     else
-      "#{base} text-gray-300 hover:bg-gray-700 hover:text-white"
+      "#{base} text-purple-100 hover:bg-purple-700 dark:hover:bg-purple-800 hover:text-white"
     end
   end
 

app/views/admin/blog_posts/_form.html.erb

@@ -1,10 +1,10 @@
 <%= form_with(model: [:admin, blog_post]) do |form| %>
   <% if blog_post.errors.any? %>
-    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
-      <h3 class="text-sm font-medium text-red-800 mb-2">
+    <div class="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+      <h3 class="text-sm font-medium text-red-800 dark:text-red-200 mb-2">
         <%= pluralize(blog_post.errors.count, "error") %> prohibited this blog post from being saved:
       </h3>
-      <ul class="list-disc list-inside text-sm text-red-700">
+      <ul class="list-disc list-inside text-sm text-red-700 dark:text-red-300">
         <% blog_post.errors.full_messages.each do |message| %>
           <li><%= message %></li>
         <% end %>
@@ -15,81 +15,81 @@
   <div class="space-y-6">
     <div class="grid grid-cols-1 gap-6">
       <div>
-        <%= form.label :title, class: "block text-sm font-medium text-gray-700" %>
+        <%= form.label :title, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
         <%= form.text_field :title, 
-            class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+            class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
       </div>
 
       <div>
-        <%= form.label :slug, class: "block text-sm font-medium text-gray-700" %>
+        <%= form.label :slug, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
         <%= form.text_field :slug, 
-            class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
+            class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
             placeholder: "leave-blank-to-auto-generate" %>
-        <p class="mt-1 text-sm text-gray-500">Leave blank to auto-generate from title</p>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Leave blank to auto-generate from title</p>
       </div>
 
       <div>
-        <%= form.label :excerpt, class: "block text-sm font-medium text-gray-700" %>
+        <%= form.label :excerpt, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
         <%= form.text_area :excerpt, rows: 3,
-            class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+            class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
       </div>
 
       <div data-controller="trix-heading">
-        <%= form.label :content, class: "block text-sm font-medium text-gray-700" %>
+        <%= form.label :content, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
         <%= form.rich_text_area :content,
-            class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+            class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
       </div>
 
       <div class="grid grid-cols-2 gap-6">
         <div>
-          <%= form.label :status, class: "block text-sm font-medium text-gray-700" %>
+          <%= form.label :status, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
           <%= form.select :status, options_for_select(BlogPost.statuses.map {|key, value| [key.humanize, key]}, blog_post.status),
-              {}, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+              {}, class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
         </div>
 
         <div>
-          <%= form.label :published_at, class: "block text-sm font-medium text-gray-700" %>
+          <%= form.label :published_at, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
           <%= form.datetime_field :published_at, 
-              class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+              class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
         </div>
       </div>
 
       <div>
-        <%= form.label :tag_list, "Tags", class: "block text-sm font-medium text-gray-700" %>
+        <%= form.label :tag_list, "Tags", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
         <%= form.text_field :tag_list, value: blog_post.tag_list,
-            class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
+            class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
             placeholder: "ruby, rails, web development" %>
-        <p class="mt-1 text-sm text-gray-500">Separate tags with commas</p>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Separate tags with commas</p>
       </div>
 
       <div>
-        <%= form.label :featured_image_url, class: "block text-sm font-medium text-gray-700" %>
+        <%= form.label :featured_image_url, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
         <%= form.text_field :featured_image_url, 
-            class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+            class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
       </div>
 
-      <div class="border-t pt-6">
-        <h3 class="text-lg font-medium text-gray-900 mb-4">SEO Metadata</h3>
+      <div class="border-t dark:border-gray-700 pt-6">
+        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">SEO Metadata</h3>
 
         <div class="space-y-4">
           <div>
-            <%= form.label :meta_title, class: "block text-sm font-medium text-gray-700" %>
+            <%= form.label :meta_title, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
             <%= form.text_field :meta_title, 
-                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+                class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
           </div>
 
           <div>
-            <%= form.label :meta_description, class: "block text-sm font-medium text-gray-700" %>
+            <%= form.label :meta_description, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
             <%= form.text_area :meta_description, rows: 2,
-                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
+                class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" %>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="flex items-center justify-end space-x-3 pt-6 border-t">
-      <%= link_to "Cancel", admin_blog_posts_path, class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
-      <%= form.submit class: "bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors" %>
+    <div class="flex items-center justify-end space-x-3 pt-6 border-t dark:border-gray-700">
+      <%= link_to "Cancel", admin_blog_posts_path, class: "bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" %>
+      <%= form.submit class: "bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-md transition-colors" %>
     </div>
   </div>
 <% end %>