Add option to make Light/Dark mode using system setting.

app/components/theme/mobile_switcher_component.html.erb

@@ -0,0 +1,28 @@
+<div data-controller="visibility" data-action="visibility:click:outside->visibility#off" class="flex items-center space-x-2 w-full">
+  <button type="button" data-action="click->visibility#toggle" data-test-id="sort-select" class="relative w-full cursor-default rounded-md bg-white dark:bg-gray-700 py-1.5 pl-3 pr-10 text-left text-gray-900 dark:text-gray-200 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:focus:ring-gray-500 sm:text-sm sm:leading-6" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
+    <span class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 px-1 py-1 text-base font-medium dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-700/60 "><%= current_theme.name.capitalize %> mode</span>
+    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+      <%= inline_svg_tag 'icons/arrows-up-down.svg', class: 'h-5 w-5 text-gray-400 dark:text-gray-300', aria: true, title: 'Select Theme' %>
+    </span>
+  </button>
+
+  <ul
+    data-visibility-target="content"
+    data-transition-enter=""
+    data-transition-enter-start=""
+    data-transition-enter-end=""
+    data-transition-leave="transition ease-in duration-100"
+    data-transition-leave-start="opacity-100"
+    data-transition-leave-end="opacity-0"
+    class="absolute hidden z-10 mt-1 max-h-60 w-full min-w-max rounded-md bg-white dark:bg-gray-700 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
+
+      <% Users::Theme.default_themes.each do |theme| %>
+        <%= link_to themes_path(theme: theme.name), class: 'text-gray-700 dark:text-gray-300 group flex items-center px-3 py-2 text-sm', data: { turbo_method: :put, controller: 'theme-switcher', 'theme-switcher-theme-value': current_theme.to_s } do %>
+          <%= inline_svg_tag "icons/#{theme.icon}.svg", class: 'mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400', title: "#{theme.name} mode option", aria: true %>
+          <%= "#{theme.name.capitalize} mode" %>
+        <% end %>
+      <% end %>
+
+    </ul>
+  </div>
+</div>

app/components/theme/mobile_switcher_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Theme::MobileSwitcherComponent < ApplicationComponent
+  def initialize(current_theme:)
+    @current_theme = current_theme
+  end
+
+  private
+
+  attr_reader :current_theme
+end

app/components/theme/switcher_component.html.erb

@@ -1,4 +1,33 @@
-<%= link_to themes_path(theme: other_theme.name), class: yass(link: type), data: { turbo_method: :put } do %>
-  <%= inline_svg_tag "icons/#{current_theme.icon}.svg", class: yass(icon: type), aria: true, title: 'theme icon' %>
-  <%= text unless icon_only? %>
+<% if mobile? %>
+  <%= render Theme::MobileSwitcherComponent.new(current_theme:) %>
+<% else %>
+  <div class="relative" data-controller="visibility" data-action="visibility:click:outside->visibility#off" data-visibility-visible-value="false">
+    <div>
+      <button type="button" data-action="click->visibility#toggle" class="text-gray-600 group flex items-center dark:text-gray-300 py-2 px-3" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+        <span class="sr-only">Open user menu</span>
+          <%= inline_svg_tag "icons/#{current_theme.icon}.svg", class: yass(icon: type), aria: true, title: 'theme icon' %>
+      </button>
+    </div>
+
+    <div
+      data-visibility-target="content"
+      data-transition-enter="transition ease-out duration-200"
+      data-transition-enter-start="transform opacity-0 scale-95"
+      data-transition-enter-end="transform opacity-100 scale-100"
+      data-transition-leave="transition ease-in duration-75"
+      data-transition-leave-start="transform opacity-100 scale-100"
+      data-transition-leave-end="transform opacity-10 scale-95"
+      class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
+      role="menu"
+      aria-orientation="vertical"
+      aria-labelledby="user-menu-button"
+      tabindex="-1">
+      <% Users::Theme.default_themes.each do |theme| %>
+        <%= link_to themes_path(theme: theme.name), class: 'text-gray-700 dark:text-gray-300 group flex items-center px-3 py-2 text-sm', data: { turbo_method: :put, controller: 'theme-switcher', 'theme-switcher-theme-value': current_theme.to_s } do %>
+          <%= inline_svg_tag "icons/#{theme.icon}.svg", class: 'mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400', title: "#{theme.name} mode option", aria: true %>
+          <%= "#{theme.name.capitalize} mode" %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
 <% end %>

app/components/theme/switcher_component.rb

@@ -8,10 +8,6 @@ def text
     "#{current_theme.name.capitalize} mode"
   end
 
-  def other_theme
-    Users::Theme.default_themes.find { |other_theme| other_theme.name != current_theme.name }
-  end
-
   def icon_only?
     type == :icon_only
   end

app/javascript/controllers/theme_switcher_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class ThemeSwitcherController extends Controller {
+  static values = {
+    theme: String,
+  };
+
+  connect() {
+    const userThemePreference = this.getUserThemePreference();
+    this.updateTheme(userThemePreference);
+    window.matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', () => this.updateTheme(userThemePreference));
+  }
+
+  updateTheme(userThemePreference) {
+    if (!['light', 'dark'].includes(userThemePreference)) {
+      const userSystemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      this.setUserTheme(userSystemTheme);
+    } else {
+      this.setUserTheme(userThemePreference);
+    }
+  }
+
+  getUserThemePreference() {
+    return this.themeValue;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  setUserTheme(theme) {
+    const rootElement = document.getElementById('root-element');
+    rootElement.removeAttribute('class');
+    rootElement.classList.add(theme);
+  }
+}

app/models/users/theme.rb

@@ -4,9 +4,15 @@ class Theme
 
     DEFAULT_THEMES = [
       %w[light sun],
-      %w[dark moon]
+      %w[dark moon],
+      %w[system computer-desktop]
     ].freeze
 
+    def initialize(name:, icon:)
+      @name = name
+      @icon = icon
+    end
+
     def self.default_themes
       DEFAULT_THEMES.map { |name, icon| new(name:, icon:) }
     end
@@ -19,23 +25,18 @@ def self.for(value)
       default_themes.find { |theme| theme.name == value }
     end
 
-    attr_reader :name, :icon
-
-    def initialize(name:, icon:)
-      @name = name
-      @icon = icon
-    end
-
-    def <=>(other)
-      name <=> other.name
-    end
-
     def to_s
       name
     end
 
     def dark_mode?
       name == 'dark'
     end
+
+    def system_mode?
+      name == 'system'
+    end
+
+    attr_reader :name, :icon
   end
 end

spec/models/users/theme_spec.rb

@@ -5,7 +5,8 @@
     it 'returns the default themes' do
       expect(described_class.default_themes).to contain_exactly(
         an_object_having_attributes(name: 'light', icon: 'sun'),
-        an_object_having_attributes(name: 'dark', icon: 'moon')
+        an_object_having_attributes(name: 'dark', icon: 'moon'),
+        an_object_having_attributes(name: 'system', icon: 'computer-desktop')
       )
     end
   end
@@ -43,6 +44,12 @@
       end
     end
 
+    context 'when the theme is system default' do
+      it 'returns true' do
+        expect(described_class.new(name: 'system', icon: 'system')).to be_system_mode
+      end
+    end
+
     context 'when the theme is light' do
       it 'returns false' do
         expect(described_class.new(name: 'light', icon: 'sun')).not_to be_dark_mode