Theme Toggle

# frozen_string_literal: true

module RubyUI
	class ThemeToggle < Base
		def view_template(&)
			div(**attrs, &)
		end

		def light_mode(**user_attrs, &)
			light_attrs = mix(default_light_attrs, user_attrs)
			div(**light_attrs, &)
		end

		def dark_mode(**user_attrs, &)
			dark_attrs = mix(default_dark_attrs, user_attrs)
			div(**dark_attrs, &)
		end

		private

		def default_attrs
			{
				data: {controller: "ruby-ui--theme-toggle"}
			}
		end

		def default_light_attrs
			{
				class: "dark:hidden",
				data: {action: "click->ruby-ui--theme-toggle#setDarkTheme"}
			}
		end

		def default_dark_attrs
			{
				class: "hidden dark:inline-block",
				data: {action: "click->ruby-ui--theme-toggle#setLightTheme"}
			}
		end
	end
end

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  initialize() {
    this.setTheme()
  }

  setTheme() {
    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
      document.documentElement.classList.remove('light')
    } else {
      document.documentElement.classList.remove('dark')
      document.documentElement.classList.add('light')
    }
  }

  setLightTheme() {
    // Whenever the user explicitly chooses light mode
    localStorage.theme = 'light'
    this.setTheme()
  }

  setDarkTheme() {
    // Whenever the user explicitly chooses dark mode
    localStorage.theme = 'dark'
    this.setTheme()
  }
}

rake stimulus:manifest:update