Skip to content

Commit 965ed47

Browse files
amatsudaamatsuda
authored
Merge pull request #70 from amatsuda/the_dark
Dark mode
2 parents 8a4d5ab + 57f0ea9 commit 965ed47

File tree

7 files changed

+43
-34
lines changed

7 files changed

+43
-34
lines changed

‎app/assets/stylesheets/application.css‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,3 @@
1313
*= require_tree .
1414
*= require_self
1515
*/
16-
17-
body {
18-
background: #fff;
19-
color: #333;
20-
margin: 0;
21-
padding: .5rem 1rem;
22-
}

‎app/assets/tailwind/application.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
11
@import "tailwindcss";
2+
3+
@theme {
4+
--color-dark-bg: oklch(15% 0 0);
5+
--color-dark-card: oklch(20% 0 0);
6+
--color-dark-border: oklch(30% 0 0);
7+
--color-dark-text: oklch(90% 0 0);
8+
--color-dark-text-secondary: oklch(70% 0 0);
9+
}

‎app/views/layouts/application.html.erb‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html class="dark">
33
<head>
4+
<script>
5+
// Dark mode detection
6+
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
7+
document.documentElement.classList.add('dark')
8+
} else {
9+
document.documentElement.classList.remove('dark')
10+
}
11+
</script>
412
<title><%=
513
if yield(:title).empty?
614
'blade.ruby-lang.org'
@@ -16,11 +24,11 @@
1624
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
1725
</head>
1826

19-
<body class="bg-gray-50">
20-
<header class="bg-white shadow-sm border-b border-gray-200">
27+
<body class="bg-gray-50 dark:bg-gray-900">
28+
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
2129
<div class="container mx-auto px-4 py-4">
22-
<h1 class="text-2xl font-bold text-gray-900">
23-
<%= link_to "blade.ruby-lang.org", root_path, class: "hover:text-red-600 transition-colors" %>
30+
<h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
31+
<%= link_to "blade.ruby-lang.org", root_path, class: "hover:text-red-600 dark:hover:text-red-400 transition-colors" %>
2432
</h1>
2533
</div>
2634
</header>

‎app/views/messages/_message.html.erb‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
<div class="bg-white rounded-lg shadow-md overflow-hidden" id="<%= dom_id message %>">
2-
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
3-
<h2 class="text-xl font-semibold text-gray-900 mb-3"><%= message.subject %></h2>
4-
<div class="space-y-1 text-sm text-gray-600">
1+
<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 %>">
2+
<div class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-6 py-4">
3+
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3"><%= message.subject %></h2>
4+
<div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
55
<div class="flex items-center gap-2">
6-
<span class="font-medium text-gray-700">From:</span>
6+
<span class="font-medium text-gray-700 dark:text-gray-300">From:</span>
77
<span><%= message.from %></span>
88
</div>
99
<div class="flex items-center gap-2">
10-
<span class="font-medium text-gray-700">Date:</span>
10+
<span class="font-medium text-gray-700 dark:text-gray-300">Date:</span>
1111
<span><%= message.published_at&.strftime("%Y-%m-%d %H:%M:%S %Z") || "N/A" %></span>
1212
</div>
1313
<% if message.list %>
1414
<div class="flex items-center gap-2">
15-
<span class="font-medium text-gray-700">List:</span>
16-
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
15+
<span class="font-medium text-gray-700 dark:text-gray-300">List:</span>
16+
<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">
1717
<%= message.list.name %> #<%= message.list_seq %>
1818
</span>
1919
</div>
2020
<% end %>
2121
</div>
2222
</div>
2323
<div class="px-6 py-4">
24-
<pre class="whitespace-pre-wrap font-mono text-sm text-gray-800 leading-relaxed"><%= message.body %></pre>
24+
<pre class="whitespace-pre-wrap font-mono text-sm text-gray-800 dark:text-gray-300 leading-relaxed"><%= message.body %></pre>
2525
</div>
2626
</div>

‎app/views/messages/_thread.html.erb‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<div class="thread-message" style="margin-left: <%= depth * 6 %>px;">
22
<% if depth == 0 %>
3-
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
3+
<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">
44
<div class="p-5">
55
<div class="flex items-start justify-between gap-4">
66
<div class="flex-1 min-w-0">
7-
<h2 class="text-lg font-semibold text-gray-900 hover:text-red-600 transition-colors mb-2">
7+
<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">
88
<span class="px-0.5">[#<%= message.list_seq %>]</span>
99
<%= link_to without_list_prefix(message.subject), "/#{list.name}/#{message.list_seq}" %>
10-
<span class="text-sm text-gray-500 font-normal ml-2">— <%= message.from %></span>
10+
<span class="text-sm text-gray-500 dark:text-gray-400 font-normal ml-2">— <%= message.from %></span>
1111
</h2>
12-
<div class="flex items-center gap-3 text-sm text-gray-600">
12+
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
1313
<span class="inline-flex items-center gap-1">
1414
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1515
<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 @@
2222
</div>
2323
</div>
2424
<% else %>
25-
<div class="py-2 border-l-2 border-gray-200 pl-4 hover:border-red-400 transition-colors">
25+
<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">
2626
<div class="flex items-start gap-2 text-sm">
27-
<svg class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
27+
<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">
2828
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
2929
</svg>
3030
<div class="flex-1 min-w-0">
31-
<%= link_to "/#{list.name}/#{message.list_seq}", class: "text-gray-900 hover:text-red-600 transition-colors" do %>
31+
<%= 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 %>
3232
<span class="px-0.5">[#<%= message.list_seq %>] <%= without_list_prefix(message.subject) %></span>
3333
<% end %>
34-
<span class="text-gray-500">— <%= message.from %></span>
34+
<span class="text-gray-500 dark:text-gray-400">— <%= message.from %></span>
3535
</div>
3636
</div>
3737
</div>

‎app/views/messages/index.html.erb‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<% content_for :title, @list.name %>
22

33
<% if notice %>
4-
<div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
4+
<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">
55
<%= notice %>
66
</div>
77
<% end %>
88

99
<div class="mb-8">
10-
<h1 class="text-3xl font-bold text-gray-900"><%= @list.name %></h1>
11-
<p class="text-gray-600 mt-2">Mailing list archive</p>
10+
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100"><%= @list.name %></h1>
11+
<p class="text-gray-600 dark:text-gray-400 mt-2">Mailing list archive</p>
1212
</div>
1313

1414
<div class="space-y-6">

‎app/views/messages/show.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<% content_for :title, @message.subject %>
22

33
<% if notice %>
4-
<div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
4+
<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">
55
<%= notice %>
66
</div>
77
<% end %>
88

99
<div class="mb-4">
10-
<%= link_to "← Back to #{@message.list.name}", "/#{@message.list.name}/", class: "text-red-600 hover:text-red-800 font-medium" %>
10+
<%= 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" %>
1111
</div>
1212

1313
<%= render @message %>

0 commit comments

Comments
 (0)