diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 454ecdd..288b9ab 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -13,10 +13,3 @@
*= require_tree .
*= require_self
*/
-
-body {
- background: #fff;
- color: #333;
- margin: 0;
- padding: .5rem 1rem;
-}
\ No newline at end of file
diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index f1d8c73..c519fbd 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -1 +1,9 @@
@import "tailwindcss";
+
+@theme {
+ --color-dark-bg: oklch(15% 0 0);
+ --color-dark-card: oklch(20% 0 0);
+ --color-dark-border: oklch(30% 0 0);
+ --color-dark-text: oklch(90% 0 0);
+ --color-dark-text-secondary: oklch(70% 0 0);
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 3fadb48..49f3eca 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,6 +1,14 @@
-
+
+
<%=
if yield(:title).empty?
'blade.ruby-lang.org'
@@ -16,11 +24,11 @@
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head>
- <body class="bg-gray-50">
- <header class="bg-white shadow-sm border-b border-gray-200">
+ <body class="bg-gray-50 dark:bg-gray-900">
+ <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
<div class="container mx-auto px-4 py-4">
- <h1 class="text-2xl font-bold text-gray-900">
- <%= link_to "blade.ruby-lang.org", root_path, class: "hover:text-red-600 transition-colors" %>
+ <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
+ <%= link_to "blade.ruby-lang.org", root_path, class: "hover:text-red-600 dark:hover:text-red-400 transition-colors" %>
</h1>
</div>
</header>
diff --git a/app/views/messages/_message.html.erb b/app/views/messages/_message.html.erb
index 01c737a..09d923e 100644
--- a/app/views/messages/_message.html.erb
+++ b/app/views/messages/_message.html.erb
@@ -1,19 +1,19 @@
-<div class="bg-white rounded-lg shadow-md overflow-hidden" id="<%= dom_id message %>">
- <div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
- <h2 class="text-xl font-semibold text-gray-900 mb-3"><%= message.subject %></h2>
- <div class="space-y-1 text-sm text-gray-600">
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden" id="<%= dom_id message %>">
+ <div class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-6 py-4">
+ <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3"><%= message.subject %></h2>
+ <div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center gap-2">
- <span class="font-medium text-gray-700">From:</span>
+ <span class="font-medium text-gray-700 dark:text-gray-300">From:</span>
<span><%= message.from %></span>
</div>
<div class="flex items-center gap-2">
- <span class="font-medium text-gray-700">Date:</span>
+ <span class="font-medium text-gray-700 dark:text-gray-300">Date:</span>
<span><%= message.published_at&.strftime("%Y-%m-%d %H:%M:%S %Z") || "N/A" %></span>
</div>
<% if message.list %>
<div class="flex items-center gap-2">
- <span class="font-medium text-gray-700">List:</span>
- <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+ <span class="font-medium text-gray-700 dark:text-gray-300">List:</span>
+ <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">
<%= message.list.name %> #<%= message.list_seq %>
</span>
</div>
@@ -21,6 +21,6 @@
</div>
</div>
<div class="px-6 py-4">
- <pre class="whitespace-pre-wrap font-mono text-sm text-gray-800 leading-relaxed"><%= message.body %></pre>
+ <pre class="whitespace-pre-wrap font-mono text-sm text-gray-800 dark:text-gray-300 leading-relaxed"><%= message.body %></pre>
</div>
</div>
diff --git a/app/views/messages/_thread.html.erb b/app/views/messages/_thread.html.erb
index 9c1081d..e90e758 100644
--- a/app/views/messages/_thread.html.erb
+++ b/app/views/messages/_thread.html.erb
@@ -1,15 +1,15 @@
<div class="thread-message" style="margin-left: <%= depth * 6 %>px;">
<% if depth == 0 %>
- <div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-shadow">
<div class="p-5">
<div class="flex items-start justify-between gap-4">
<div class="flex-1 min-w-0">
- <h2 class="text-lg font-semibold text-gray-900 hover:text-red-600 transition-colors mb-2">
+ <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-400 transition-colors mb-2">
<span class="px-0.5">[#<%= message.list_seq %>]</span>
<%= link_to without_list_prefix(message.subject), "/#{list.name}/#{message.list_seq}" %>
- <span class="text-sm text-gray-500 font-normal ml-2">— <%= message.from %></span>
+ <span class="text-sm text-gray-500 dark:text-gray-400 font-normal ml-2">— <%= message.from %></span>
</h2>
- <div class="flex items-center gap-3 text-sm text-gray-600">
+ <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
@@ -22,16 +22,16 @@
</div>
</div>
<% else %>
- <div class="py-2 border-l-2 border-gray-200 pl-4 hover:border-red-400 transition-colors">
+ <div class="py-2 border-l-2 border-gray-200 dark:border-gray-700 pl-4 hover:border-red-400 dark:hover:border-red-500 transition-colors">
<div class="flex items-start gap-2 text-sm">
- <svg class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
</svg>
<div class="flex-1 min-w-0">
- <%= link_to "/#{list.name}/#{message.list_seq}", class: "text-gray-900 hover:text-red-600 transition-colors" do %>
+ <%= link_to "/#{list.name}/#{message.list_seq}", class: "text-gray-900 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-400 transition-colors" do %>
<span class="px-0.5">[#<%= message.list_seq %>] <%= without_list_prefix(message.subject) %></span>
<% end %>
- <span class="text-gray-500">— <%= message.from %></span>
+ <span class="text-gray-500 dark:text-gray-400">— <%= message.from %></span>
</div>
</div>
</div>
diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb
index 65d7f4d..d05f22f 100644
--- a/app/views/messages/index.html.erb
+++ b/app/views/messages/index.html.erb
@@ -1,14 +1,14 @@
<% content_for :title, @list.name %>
<% if notice %>
- <div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
+ <div class="mb-4 p-4 bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-lg">
<%= notice %>
</div>
<% end %>
<div class="mb-8">
- <h1 class="text-3xl font-bold text-gray-900"><%= @list.name %></h1>
- <p class="text-gray-600 mt-2">Mailing list archive</p>
+ <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100"><%= @list.name %></h1>
+ <p class="text-gray-600 dark:text-gray-400 mt-2">Mailing list archive</p>
</div>
<div class="space-y-6">
diff --git a/app/views/messages/show.html.erb b/app/views/messages/show.html.erb
index d778389..9001a04 100644
--- a/app/views/messages/show.html.erb
+++ b/app/views/messages/show.html.erb
@@ -1,13 +1,13 @@
<% content_for :title, @message.subject %>
<% if notice %>
- <div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
+ <div class="mb-4 p-4 bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-lg">
<%= notice %>
</div>
<% end %>
<div class="mb-4">
- <%= link_to "← Back to #{@message.list.name}", "/#{@message.list.name}/", class: "text-red-600 hover:text-red-800 font-medium" %>
+ <%= link_to "← Back to #{@message.list.name}", "/#{@message.list.name}/", class: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 font-medium" %>
</div>
<%= render @message %>