Implement dark mode (#2078)

* User theme settings

* Initial rough pass on colors

* More progress on dark mode

app/views/layouts/application.html.erb

@@ -1,7 +1,7 @@
 <%= render "layouts/shared/htmldoc" do %>
   <% sidebar_config = app_sidebar_config(Current.user) %>
 
-  <div class="flex flex-col lg:flex-row h-dvh lg:h-full bg-gray-50"
+  <div class="flex flex-col lg:flex-row h-dvh lg:h-full bg-surface"
        data-controller="sidebar"
        data-sidebar-user-id-value="<%= Current.user.id %>"
        data-sidebar-config-value="<%= sidebar_config.to_json %>">
@@ -12,7 +12,7 @@
       </button>
 
       <%# Mobile only account sidebar groups %>
-      <%= tag.div class: class_names("hidden bg-gray-50 z-20 absolute inset-0 h-dvh w-full p-4 overflow-y-auto transition-all duration-300"),
+      <%= tag.div class: class_names("hidden bg-surface z-20 absolute inset-0 h-dvh w-full p-4 overflow-y-auto transition-all duration-300"),
                   data: { sidebar_target: "leftPanelMobile" } do %>
         <div id="account-sidebar-tabs">
           <div class="mb-4">
@@ -108,7 +108,7 @@
       <% end %>
     </div>
 
-    <nav class="lg:hidden bg-white shrink-0 z-10 pb-2">
+    <nav class="lg:hidden bg-container shrink-0 z-10 pb-2">
       <ul class="flex items-center justify-around gap-1">
         <li>
           <%= render "layouts/sidebar/nav_item", name: "Home", path: root_path, icon_key: "pie-chart" %>

app/views/layouts/auth.html.erb

@@ -1,6 +1,6 @@
 <%= render "layouts/shared/htmldoc" do %>
   <div class="flex flex-col h-dvh">
-    <div class="flex flex-col h-screen px-6 py-12 bg-gray-25">
+    <div class="flex flex-col h-screen px-6 py-12 bg-surface">
       <div class="grow flex flex-col justify-center">
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
           <div class="flex justify-center mb-6">

app/views/layouts/imports.html.erb

@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex flex-col h-dvh">
+  <div class="flex flex-col h-dvh bg-surface">
     <header class="flex items-center justify-between p-8">
       <%= link_to content_for(:previous_path) || imports_path do %>
         <%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>

app/views/layouts/settings.html.erb

@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex h-full bg-gray-25">
+  <div class="flex h-full bg-surface">
     <div class="p-4 w-96 shrink-0 h-full overflow-y-auto">
       <%= render "settings/settings_nav" %>
     </div>

app/views/layouts/shared/_breadcrumbs.html.erb

@@ -2,7 +2,7 @@
 
 <nav class="flex items-center gap-2 mb-6">
   <% if sidebar_toggle_enabled %>
-    <button data-action="sidebar#toggleLeftPanel" class="hidden p-2 lg:inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
+    <button data-action="sidebar#toggleLeftPanel" class="hidden p-2 lg:inline-flex rounded-lg items-center justify-center hover:bg-container-inset cursor-pointer">
       <%= icon("panel-left", color: "gray") %>
     </button>
   <% end %>
@@ -16,7 +16,7 @@
       <% if path.present? && index < breadcrumbs.size - 1 %>
         <%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
       <% elsif index == breadcrumbs.size - 1 %>
-        <span class="text-gray-900 font-medium text-sm"><%= name %></span>
+        <span class="text-primary font-medium text-sm"><%= name %></span>
       <% else %>
         <span class="text-sm text-gray-500 font-medium"><%= name %></span>
       <% end %>
@@ -25,7 +25,7 @@
 
   <% if sidebar_toggle_enabled %>
     <div class="ml-auto">
-      <button data-action="sidebar#toggleRightPanel" class="p-2 hidden lg:inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer" title="Toggle AI Assistant">
+      <button data-action="sidebar#toggleRightPanel" class="p-2 hidden lg:inline-flex rounded-lg items-center justify-center hover:bg-container-inset cursor-pointer" title="Toggle AI Assistant">
         <%= icon("panel-right", color: "gray") %>
       </button>
     </div>

app/views/layouts/shared/_htmldoc.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>" lang="en">
+<html class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>" lang="en" data-controller="theme" data-theme-user-preference-value="<%= Current.user&.theme || 'system' %>">
   <head>
     <%= render "layouts/shared/head" %>
     <%= yield :head %>

app/views/layouts/shared/_page_header.html.erb

@@ -2,7 +2,7 @@
 <header class="space-y-6">
   <% if local_assigns[:title].present? %>
     <div class="space-y-1">
-      <h1 class="text-3xl font-medium text-gray-900"><%= title %></h1>
+      <h1 class="text-3xl font-medium text-primary"><%= title %></h1>
       <% if local_assigns[:subtitle].present? %>
         <p class="text-gray-500"><%= subtitle %></p>
       <% end %>

app/views/layouts/sidebar/_nav_item.html.erb

@@ -2,9 +2,9 @@
 
 <%= link_to path, class: "space-y-1 lg:py-1 group block" do %>
   <div class="grow flex flex-col lg:flex-row gap-1 items-center">
-    <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-gray-900" => page_active?(path)) %>
+    <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-container-inset" => page_active?(path)) %>
 
-    <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-white shadow-xs text-primary" : "group-hover:bg-gray-100 text-secondary") do %>
+    <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-container-inset shadow-xs text-primary" : "group-hover:bg-container-inset-hover text-secondary") do %>
       <%= icon(icon_key) %>
     <% end %>
   </div>