Skip to content

Commit 15dbc94

Browse files
visinivisini
committed
Add dark mode
1 parent 3aafa52 commit 15dbc94

File tree

3 files changed

+89
-14
lines changed

3 files changed

+89
-14
lines changed

‎app/views/layouts/litestream/_style.html

+46
Original file line numberDiff line numberDiff line change
@@ -801,4 +801,50 @@
801801
.hover\:underline:hover {
802802
text-decoration-line: underline;
803803
}
804+
.dark\:inline:is(.dark *) {
805+
display: inline;
806+
}
807+
.dark\:hidden:is(.dark *) {
808+
display: none;
809+
}
810+
.dark\:border-gray-800:is(.dark *) {
811+
--tw-border-opacity: 1;
812+
border-color: rgb(31 41 55 / var(--tw-border-opacity));
813+
}
814+
.dark\:bg-black:is(.dark *) {
815+
--tw-bg-opacity: 1;
816+
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
817+
}
818+
.dark\:bg-gray-900:is(.dark *) {
819+
--tw-bg-opacity: 1;
820+
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
821+
}
822+
.dark\:bg-gray-950:is(.dark *) {
823+
--tw-bg-opacity: 1;
824+
background-color: rgb(3 7 18 / var(--tw-bg-opacity));
825+
}
826+
.dark\:bg-green-900:is(.dark *) {
827+
--tw-bg-opacity: 1;
828+
background-color: rgb(20 83 45 / var(--tw-bg-opacity));
829+
}
830+
.dark\:bg-red-900:is(.dark *) {
831+
--tw-bg-opacity: 1;
832+
background-color: rgb(127 29 29 / var(--tw-bg-opacity));
833+
}
834+
.dark\:text-gray-100:is(.dark *) {
835+
--tw-text-opacity: 1;
836+
color: rgb(243 244 246 / var(--tw-text-opacity));
837+
}
838+
.dark\:text-white:is(.dark *) {
839+
--tw-text-opacity: 1;
840+
color: rgb(255 255 255 / var(--tw-text-opacity));
841+
}
842+
.dark\:even\:bg-gray-900:nth-child(even):is(.dark *) {
843+
--tw-bg-opacity: 1;
844+
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
845+
}
846+
.dark\:hover\:bg-gray-900:hover:is(.dark *) {
847+
--tw-bg-opacity: 1;
848+
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
849+
}
804850
</style>

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

+33-4
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,35 @@
77

88
<%= render "layouts/litestream/style" %>
99
</head>
10-
<body class="h-full flex flex-col">
10+
<body class="h-full flex flex-col dark:bg-gray-950 dark:text-white">
1111
<main class="container mx-auto max-w-4xl mt-4 px-2 grow">
1212
<%= content_for?(:content) ? yield(:content) : yield %>
1313
</main>
1414

15-
<footer class="container mx-auto mt-24 flex items-center justify-between border-t px-2 py-4 text-base">
15+
<footer class="container mx-auto mt-24 flex items-center justify-between border-t dark:border-gray-800 px-2 py-4 text-base">
1616
<p>
1717
<code><strong>Litestream</strong></code>&nbsp;&nbsp;|&nbsp;
1818
Made by <a href="https://twitter.com/fractaledmind" class="text-blue-500 hover:underline decoration-blue-500">@fractaledmind</a> and <a href="https://github.com/fractaledmind/litestream/graphs/contributors" class="text-blue-500 hover:underline decoration-blue-500">friends</a>! Want to help? It's <a href="https://github.com/fractaledmind/litestream" class="text-blue-500 hover:underline decoration-blue-500">open source</a>!
19+
&nbsp;|&nbsp;
20+
<button data-controller="toggle-theme">
21+
<span class="hidden dark:inline">Light Mode</span>
22+
<span class="dark:hidden">Dark Mode</span>
23+
</button>
1924
</p>
2025
</footer>
2126

2227
<div class="fixed top-0 left-0 right-0 text-center py-2">
2328
<% if notice.present? %>
2429
<p id="notice"
25-
class="py-2 px-3 bg-green-50 text-green-500 font-medium rounded-lg inline-block"
30+
class="py-2 px-3 bg-green-50 dark:bg-green-900 text-green-500 font-medium rounded-lg inline-block"
2631
data-controller="fade">
2732
<%= notice.html_safe %>
2833
</p>
2934
<% end %>
3035

3136
<% if alert.present? %>
3237
<p id="alert"
33-
class="py-2 px-3 bg-red-50 text-red-500 font-medium rounded-lg inline-block"
38+
class="py-2 px-3 bg-red-50 dark:bg-red-900 text-red-500 font-medium rounded-lg inline-block"
3439
data-controller="fade">
3540
<%= alert.html_safe %>
3641
</p>
@@ -51,6 +56,30 @@
5156
document.querySelectorAll('[data-controller="fade"]').forEach(element => {
5257
fadeOut(element);
5358
});
59+
document.querySelector('[data-controller="toggle-theme"]').addEventListener("click", () => {
60+
const currentTheme =
61+
localStorage.theme === "dark" ||
62+
(!("theme" in localStorage) &&
63+
window.matchMedia("(prefers-color-scheme: dark)").matches)
64+
? "dark"
65+
: "light"
66+
const newTheme = currentTheme === "light" ? "dark" : "light"
67+
if (currentTheme === "dark") {
68+
document.documentElement.classList.remove("dark")
69+
} else {
70+
document.documentElement.classList.add("dark")
71+
}
72+
localStorage.setItem("theme", newTheme)
73+
})
74+
if (
75+
localStorage.theme === "dark" ||
76+
(!("theme" in localStorage) &&
77+
window.matchMedia("(prefers-color-scheme: dark)").matches)
78+
) {
79+
document.documentElement.classList.add("dark")
80+
} else {
81+
document.documentElement.classList.remove("dark")
82+
}
5483
</script>
5584
</body>
5685
</html>

‎app/views/litestream/processes/show.html.erb

+10-10
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<br>
4141

4242
<section id="databases" class="">
43-
<div class="mb-3 flex items-center justify-between border-b">
43+
<div class="mb-3 flex items-center justify-between border-b dark:border-gray-800">
4444
<h2 class="text-2xl font-bold">Databases</h2>
4545
<p class="text-right">Total: <strong><%= @databases.size %></strong></p>
4646
</div>
@@ -59,7 +59,7 @@
5959
<section id="generations" class="ml-6">
6060
<% database['generations'].each do |generation| %>
6161
<details id="<%= generation['generation'] %>" open="open">
62-
<summary class="cursor-pointer rounded p-2 hover:bg-gray-50">
62+
<summary class="cursor-pointer rounded p-2 hover:bg-gray-50 dark:hover:bg-gray-900">
6363
<code><%= generation['generation'] %></code>
6464
(<em><%= generation['lag'] %> lag</em>)
6565
</summary>
@@ -85,24 +85,24 @@
8585
<table class="min-w-full divide-y divide-gray-300">
8686
<thead>
8787
<tr>
88-
<th scope="col" class="whitespace-nowrap px-2 py-2 text-left text-sm font-semibold text-gray-900">Created at</th>
89-
<th scope="col" class="whitespace-nowrap px-2 py-2 text-right text-sm font-semibold text-gray-900">Index</th>
90-
<th scope="col" class="whitespace-nowrap px-2 py-2 text-right text-sm font-semibold text-gray-900">Size</th>
88+
<th scope="col" class="whitespace-nowrap px-2 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Created at</th>
89+
<th scope="col" class="whitespace-nowrap px-2 py-2 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">Index</th>
90+
<th scope="col" class="whitespace-nowrap px-2 py-2 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">Size</th>
9191
</tr>
9292
</thead>
9393

94-
<tbody class="bg-white">
94+
<tbody class="bg-white dark:bg-black">
9595
<% generation['snapshots'].each do |snapshot| %>
96-
<tr class="align-top even:bg-gray-50">
97-
<td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900">
96+
<tr class="align-top even:bg-gray-50 dark:even:bg-gray-900">
97+
<td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 dark:text-gray-100">
9898
<abbr title="<%= snapshot['created'] %>" class="underline decoration-dashed decoration-gray-500 cursor-help">
9999
<time datetime="<%= snapshot['created'] %>"><%= DateTime.parse(snapshot['created']).to_formatted_s(:db) %></time>
100100
</abbr>
101101
</td>
102-
<td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 text-right">
102+
<td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 dark:text-gray-100 text-right">
103103
<%= snapshot['index'] %>
104104
</td>
105-
<td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 text-right">
105+
<td scope="col" class="whitespace-nowrap px-2 py-2 text-sm text-gray-900 dark:text-gray-100 text-right">
106106
<%= number_to_human_size snapshot['size'] %>
107107
</td>
108108
</tr>

0 commit comments

Comments
 (0)