Dark mode

app/assets/stylesheets/events.css

@@ -34,11 +34,34 @@
   z-index: 2;
 }
 
+.events__filter-btn {
+  --input-background: transparent; 
+  --input-color: var(--color-ink-reversed);
+
+  font-weight: 500;
+
+  @media (prefers-color-scheme: dark) {
+    --input-color: var(--color-ink);
+  }
+}
+
 .events__index {
   --grid-lines: 0.2em;
   --row-gap: var(--block-space);
 }
 
+.events__index-header {
+  background-color: var(--color-ink); 
+  color: var(--color-ink-reversed); 
+  margin-inline-end: 0.2em;
+  padding: 0.7em calc(0.3em + 0.6em); 
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-selected);
+    color: var(--color-ink);
+  }
+}
+
 .events--none {
   background-color: var(--color-container);
   border-block-start: var(--grid-lines) solid var(--color-bg);

app/views/events/_filter.html.erb

@@ -1,9 +1,7 @@
 <% presenter = BucketFilterPresenter.new(@buckets, params, cookies) %>
 <div class="position-relative max-width"
 		data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-	<button class="input input--select flex-inline min-width max-width txt-small" 
-				data-action="click->dialog#open:stop"
-				style="background-color: var(--color-ink); color: var(--color-ink-reversed);">
+	<button class="events__filter-btn input input--select flex-inline min-width max-width txt-small" data-action="click->dialog#open:stop">
 		<span class="overflow-ellipsis">
 			<%= presenter.filter_text %>
 		</span>

app/views/events/index.html.erb

@@ -19,7 +19,7 @@
 
 <div class="events__container align-start gap">
   <div class="flex flex-column">
-    <div class="flex align-center gap justify-space-between" style="padding: 0.7em calc(0.3em + 0.6em); background-color: var(--color-ink); color: var(--color-ink-reversed); margin-inline-end: 0.2em;">
+    <div class="events__index-header flex align-center gap justify-space-between">
       <h2 class="txt-large txt-nowrap">Latest activity</h2>
       <%= render "events/filter" %>
     </div>
@@ -33,7 +33,7 @@
     <div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
       <% @filters.each do |filter| %>
         <h3 class="txt-medium margin-block-end-half txt-tight-lines">
-          <%= link_to filter.summary,bubbles_path(**filter.as_params) %>
+          <%= link_to filter.summary, bubbles_path(**filter.as_params) %>
         </h3>
       <% end %>
     </div>