Implement dark mode (#2078)

* User theme settings

* Initial rough pass on colors

* More progress on dark mode

app/views/settings/_section.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (title:, subtitle: nil, content:) %>
-<section class="bg-white shadow-border-xs rounded-xl p-4 space-y-4">
+<section class="bg-container shadow-border-xs rounded-xl p-4 space-y-4">
   <div>
     <h2 class="text-lg font-medium text-primary"><%= title %></h2>
     <% if subtitle.present? %>

app/views/settings/_settings_nav_item.html.erb

@@ -2,7 +2,7 @@
 
 <%= link_to path, class: class_names(
   "flex items-center gap-2 btn btn--ghost",
-  page_active?(path) ? "text-primary bg-white shadow-border-xs" : "text-secondary hover:bg-gray-100 border-transparent"
+  page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-gray-100 border-transparent"
 ), aria: { current: ("page" if page_active?(path)) } do %>
   <%= lucide_icon(icon, class: "w-5 h-5") if icon %>
   <%= name %>

app/views/settings/_settings_nav_link_large.html.erb

@@ -1,5 +1,5 @@
 <%# locals: path, direction, title %>
-<%= link_to path, class: "w-full bg-white hover:bg-gray-50 rounded-xl border border-alpha-black-25 shadow-xs p-4 flex items-center justify-between" do %>
+<%= link_to path, class: "w-full bg-container hover:bg-container-inset rounded-xl border border-alpha-black-25 shadow-xs p-4 flex items-center justify-between" do %>
   <% if direction == 'previous' %>
     <div class="w-5 h-5 text-secondary">
       <%= lucide_icon("arrow-left") %>

app/views/settings/billings/show.html.erb

@@ -2,7 +2,7 @@
 
 <%= settings_section title: t(".subscription_title"), subtitle: t(".subscription_subtitle") do %>
   <div class="space-y-4">
-    <div class="p-3 shadow-border-xs bg-white rounded-lg flex justify-between items-center">
+    <div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
       <div class="flex items-center gap-3">
         <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
           <%= lucide_icon "gem", class: "w-5 h-5 text-secondary" %>

app/views/settings/preferences/show.html.erb

@@ -47,26 +47,26 @@
 
 <%= settings_section title: t(".theme_title"), subtitle: t(".theme_subtitle") do %>
   <div>
-    <%= styled_form_with model: @user, class: "flex justify-between items-center" do |form| %>
+    <%= styled_form_with model: @user, class: "flex justify-between items-center", data: { controller: "auto-submit-form" } do |form| %>
       <%= form.hidden_field :redirect_to, value: "preferences" %>
       <div class="text-center">
         <%= image_tag("light-mode-preview.png", alt: "Light Theme Preview", class: "h-44 mb-4") %>
         <div class="flex justify-center items-center gap-2">
-          <%= form.radio_button :theme, t(".theme_light"), checked: true %>
+          <%= form.radio_button :theme, "light", checked: @user.theme == "light", data: { auto_submit_form_target: "auto", action: "theme#updateTheme" } %>
           <%= form.label :theme_light, t(".theme_light"), value: "light" %>
         </div>
       </div>
       <div class="text-center">
         <%= image_tag("dark-mode-preview.png", alt: "Dark Theme Preview", class: "h-44 mb-4") %>
         <div class="flex justify-center items-center gap-2">
-          <%= form.radio_button :theme, t(".theme_dark"), disabled: true, class: "cursor-not-allowed" %>
+          <%= form.radio_button :theme, "dark", checked: @user.theme == "dark", data: { auto_submit_form_target: "auto", action: "theme#updateTheme" } %>
           <%= form.label :theme_dark, t(".theme_dark"), value: "dark" %>
         </div>
       </div>
       <div class="text-center">
         <%= image_tag("system-mode-preview.png", alt: "System Theme Preview", class: "h-44 mb-4") %>
         <div class="flex items-center gap-2 justify-center">
-          <%= form.radio_button :theme, t(".theme_system"), disabled: true, class: "cursor-not-allowed" %>
+          <%= form.radio_button :theme, "system", checked: @user.theme == "system", data: { auto_submit_form_target: "auto", action: "theme#updateTheme" } %>
           <%= form.label :theme_system, t(".theme_system"), value: "system" %>
         </div>
       </div>

app/views/settings/profiles/show.html.erb

@@ -33,12 +33,12 @@
               "data-auto-submit-form-target": "auto" %>
       <% end %>
     <% end %>
-    <div class="bg-gray-25 rounded-xl p-1">
+    <div class="bg-container-inset rounded-xl p-1">
       <div class="px-4 py-2">
         <p class="uppercase text-xs text-secondary font-medium"><%= Current.family.name %> &middot; <%= Current.family.users.size %></p>
       </div>
       <% @users.each do |user| %>
-        <div class="flex gap-2 items-center bg-white p-4 border border-alpha-black-25 rounded-lg">
+        <div class="flex gap-2 items-center bg-container p-4 border border-alpha-black-25 rounded-lg">
           <div class="w-9 h-9 shrink-0">
             <%= render "settings/user_avatar", user: user %>
           </div>
@@ -65,7 +65,7 @@
       <% end %>
       <% if @pending_invitations.any? %>
         <% @pending_invitations.each do |invitation| %>
-          <div class="flex gap-2 items-center justify-between bg-white p-4 border border-alpha-black-25 rounded-lg">
+          <div class="flex gap-2 items-center justify-between bg-container p-4 border border-alpha-black-25 rounded-lg">
             <div class="flex gap-2 items-center">
               <div class="w-9 h-9 shrink-0">
                 <div class="text-white w-full h-full bg-gray-400 rounded-full flex items-center justify-center text-lg uppercase"><%= invitation.email[0] %></div>
@@ -116,7 +116,7 @@
       <% end %>
       <% if Current.user.admin? %>
         <%= link_to new_invitation_path,
-                class: "bg-gray-100 flex items-center justify-center gap-2 text-secondary mt-1 hover:bg-gray-200 rounded-lg px-4 py-2 w-full text-center",
+                class: "bg-container-inset flex items-center justify-center gap-2 text-secondary mt-1 hover:bg-container-inset-hover rounded-lg px-4 py-2 w-full text-center",
                 data: { turbo_frame: :modal } do %>
           <%= lucide_icon("plus", class: "w-5 h-5 text-secondary") %>
           <%= t(".invite_member") %>

app/views/settings/securities/show.html.erb

@@ -2,7 +2,7 @@
 
 <%= settings_section title: t(".mfa_title"), subtitle: t(".mfa_description") do %>
   <div class="space-y-4">
-    <div class="p-3 shadow-border-xs bg-white rounded-lg flex justify-between items-center">
+    <div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
       <div class="flex items-center gap-3">
         <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
           <%= lucide_icon "shield-check", class: "w-5 h-5 text-secondary" %>