? ??? ?? Rails Designer? ???????

---

SaaS ???? ?? ??? ?? ???? ?? ??? ???? ?? ?? ??????. ?? ??, ?? ??, ???? ??/?? ?? ????.

(? SaaS? ? ?? ?? ??? ??? ?????)

?? ?? ??? ?? ???? ?? ??? ???? ?? ?? ?? ??? ????? ??? ? ????. Rails? ??? ?? ??? ???? ??? ?? ? ??? ??????. ??? ??? ??? ??? ??? ??? ?? ?? ???? ??? ?????.

?? ??? ??? JavaScript ??? ????? localStorage? ?????. ?? ??? ?????.

? ???? ??? ??? ??? ??? ???????. ????? html-element? ??? ???? ?????. ?? ?? ?? ??? ????? ? ??? ? ????(?: Tailwind CSS? ??? ? dark:bg-gray-950 ??).

Stimulus?? ?? ???? HTML? ?? ??? ?????. ??? ??? ?? ??? ??????.

<div data-controller="theme">
  <!-- You can show/hide these buttons based on the .dark class -->
  <button data-action="theme#update" data-theme-value-param="dark">
    Lights Off
  </button>

  <button data-action="theme#update" data-theme-value-param="light">
    Lights On
  </button>
</div>

?? ?? ????? ??? ????.

// app/javascript/controllers/theme_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  update({ params: { value } }) {
    this.#setClass(value);
  }

  // private

  #setClass(theme) {
    document.documentElement.classList.toggle("dark", theme === "dark");
  }
}

?????? ????? ??? ???? ? ? ?? ??? ????. ?? { params: { value } } ??? ?? ???? ? ?????.

?? update ??? ?????. ???? ?? ?????. ??? ???? ??? ????. ?? JavaScript? ?? ?? ?????. ? ???? ?? ??? ???.

????? ???? ????? ??? get ??? ?????. ?? ? ?? ? ? ??? ???.

get(event) {
  log(event.params.value)
  // => "light" or "dark"
}

??? event ??? ?? ?? ???? ??? ??? ?? ??? ? ????.

get({ params }) {
  log(params.value)
  // => "light" or "dark"
}

?? ??? ????? ?? ??? ?? ? ? ????.

get({ params: { value } }) {
  log(value)
  // => "light" or "dark"
}

???? ?? ?? ??("dark", theme === "dark")? ?????. ? ?? ????(theme === "dark")? ??? ??? ???? ?? ??? ???? ???? ???(true) ???? ???(false) ????? ???? ?? ?? ???????

? ? ?? ?? ??? ????? ?? ???? ??????? Rails ???? ?? JavaScript? ??? ???. ?

?????. ????. ?? ????? ???? ?? ??? ??? ?? ??? ??? ? ????. ?, CSS? ?? ?? ???? ??? ??? ?? ???? ?? ???? ???? ?? ? ? ????. ??? ??? ???? ????!

?? ?? localStorage? ???????! ?-? ?(???)? ????? ??? ? ?? ? ???? API???.

??? ?("???" ?? "??")? ????? ????? ????? ?????.

<div data-controller="theme">
  <!-- You can show/hide these buttons based on the .dark class -->
  <button data-action="theme#update" data-theme-value-param="dark">
    Lights Off
  </button>

  <button data-action="theme#update" data-theme-value-param="light">
    Lights On
  </button>
</div>

?? ?? ????? ???? ?? ?? ????.

// app/javascript/controllers/theme_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  update({ params: { value } }) {
    this.#setClass(value);
  }

  // private

  #setClass(theme) {
    document.documentElement.classList.toggle("dark", theme === "dark");
  }
}

??? ?? ???? ?? ??? ???? ?? ?? ????. ??? ?? ????? ??(????? ??)???. ??? ?? ????? ???? ??? ???? ????. ??? ????? ?? ??? ??? ?????(???? ?? ?).

setItem ? getItem ??? localStorage API? RemoveItem ? Clear()? ?????.

? ??? Stimulus? ???? UI ??? localStorage? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!