Implement dark mode (#2078)

* User theme settings

* Initial rough pass on colors

* More progress on dark mode

app/views/accounts/_account_sidebar_tabs.html.erb

@@ -24,7 +24,7 @@
   class="space-y-3"
   data-controller="tabs"
   data-tabs-local-storage-key-value="account-sidebar-tabs"
-  data-tabs-active-class="bg-white shadow-sm text-primary"
+  data-tabs-active-class="bg-surface shadow-sm text-primary"
   data-tabs-inactive-class="text-secondary"
   data-tabs-default-tab-value="assets-tab">
   <div class="bg-surface-inset rounded-lg p-1 flex">

app/views/accounts/_accountable_group.html.erb

@@ -11,7 +11,7 @@
 
       <%= turbo_frame_tag "#{account_group.key}_sparkline", src: accountable_sparkline_path(account_group.key), loading: "lazy" do %>
         <div class="flex items-center w-8 h-4 ml-auto">
-          <div class="w-6 h-px bg-gray-200"></div>
+          <div class="w-6 h-px bg-surface-inset"></div>
         </div>
       <% end %>
     </div>
@@ -23,7 +23,7 @@
         <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
 
         <div class="min-w-0 grow">
-          <%= tag.p account.name, class: "text-sm font-medium mb-0.5 truncate" %>
+          <%= tag.p account.name, class: "text-sm text-primary font-medium mb-0.5 truncate" %>
           <%= tag.p account.subtype&.humanize.presence || account_group.name, class: "text-sm text-secondary truncate" %>
         </div>
 
@@ -32,7 +32,7 @@
 
           <%= turbo_frame_tag dom_id(account, :sparkline), src: sparkline_account_path(account), loading: "lazy" do %>
             <div class="flex items-center w-8 h-5 ml-auto">
-              <div class="w-6 h-px bg-gray-200"></div>
+              <div class="w-6 h-px bg-surface-inset"></div>
             </div>
           <% end %>
         </div>

app/views/accounts/_summary_card.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (title:, content:) %>
 
-<div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
+<div class="rounded-xl bg-container shadow-xs border border-alpha-black-25 p-4">
   <h4 class="text-secondary text-sm"><%= title %></h4>
   <p class="text-xl font-medium text-primary">
     <%= content %>

app/views/accounts/index/_account_groups.erb

@@ -1,14 +1,14 @@
 <%# locals: (accounts:) %>
 
 <% accounts.group_by(&:accountable_type).sort_by { |group, _| group }.each do |group, accounts| %>
-  <div class="bg-gray-25 p-1 rounded-xl">
+  <div class="bg-container-inset p-1 rounded-xl">
     <div class="flex items-center px-4 py-2 text-xs font-medium text-secondary">
       <p><%= Accountable.from_type(group).display_name %></p>
       <span class="text-subdued mx-2">&middot;</span>
       <p><%= accounts.count %></p>
       <p class="ml-auto"><%= totals_by_currency(collection: accounts, money_method: :balance_money) %></p>
     </div>
-    <div class="bg-white">
+    <div class="bg-container">
       <% accounts.each do |account| %>
         <%= render account %>
       <% end %>

app/views/accounts/index/_manual_accounts.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (accounts:) %>
 
-<details open class="group bg-white p-4 shadow-border-xs rounded-xl">
+<details open class="group bg-container p-4 shadow-border-xs rounded-xl">
   <summary class="flex items-center gap-2 focus-visible:outline-hidden">
     <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
 

app/views/accounts/show/_activity.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (account:) %>
 
 <%= turbo_frame_tag dom_id(account, "entries") do %>
-  <div class="bg-white p-5 shadow-border-xs rounded-xl" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
+  <div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
     <div class="flex items-center justify-between mb-4">
       <%= tag.h2 t(".title"), class: "font-medium text-lg" %>
       <% unless @account.plaid_account_id.present? %>
@@ -10,7 +10,7 @@
             <%= lucide_icon("plus", class: "w-4 h-4") %>
             <%= tag.span t(".new") %>
           </button>
-          <div data-menu-target="content" class="z-10 hidden bg-white rounded-lg border border-alpha-black-25 shadow-xs p-1">
+          <div data-menu-target="content" class="z-10 hidden bg-container rounded-lg border border-alpha-black-25 shadow-xs p-1">
             <%= link_to new_account_valuation_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
               <%= lucide_icon("circle-dollar-sign", class: "text-secondary w-5 h-5") %>
               <%= tag.span t(".new_balance"), class: "text-sm" %>
@@ -62,7 +62,7 @@
           <%= render "account/entries/selection_bar" %>
         </div>
 
-        <div class="grid bg-gray-25 rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
+        <div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
           <div class="pl-0.5 col-span-8 flex items-center gap-4">
             <%= check_box_tag "selection_entry",
                               class: "checkbox checkbox--light",
@@ -74,7 +74,7 @@
         </div>
 
         <div>
-          <div class="rounded-tl-lg rounded-tr-lg bg-white border-alpha-black-25 shadow-xs">
+          <div class="rounded-tl-lg rounded-tr-lg bg-container border-alpha-black-25 shadow-xs">
             <div class="space-y-4">
               <% calculator = Account::BalanceTrendCalculator.for(@entries) %>
               <%= entries_by_date(@entries) do |entries| %>
@@ -85,7 +85,7 @@
             </div>
           </div>
 
-          <div class="p-4 bg-white rounded-bl-lg rounded-br-lg">
+          <div class="p-4 bg-container rounded-bl-lg rounded-br-lg">
             <%= render "shared/pagination", pagy: @pagy %>
           </div>
         </div>

app/views/accounts/show/_chart.html.erb

@@ -3,7 +3,7 @@
 <% period =  @period || Period.last_30_days %>
 <% default_value_title = account.asset? ? t(".balance") : t(".owed") %>
 
-<div id="<%= dom_id(account, :chart) %>" class="bg-white shadow-xs rounded-xl border border-alpha-black-25 rounded-lg space-y-2">
+<div id="<%= dom_id(account, :chart) %>" class="bg-container shadow-xs rounded-xl border border-alpha-black-25 rounded-lg space-y-2">
   <div class="flex justify-between px-4 pt-4 mb-2">
     <div class="space-y-2">
       <div class="flex items-center gap-1">

app/views/accounts/show/_menu.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (account:) %>
 
 <%= contextual_menu do %>
-  <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+  <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
     <% if account.plaid_account_id.present? %>
       <%= link_to accounts_path,
                       data: { turbo_frame: :_top },

app/views/accounts/show/_tab.html.erb

@@ -5,5 +5,5 @@
             data: { turbo: false },
             class: [
               "px-2 py-1.5 rounded-md border border-transparent",
-              "bg-white shadow-xs border-alpha-black-50": is_selected
+              "bg-container shadow-xs border-alpha-black-50": is_selected
             ] %>