https://www.eenetzwerk.de/assets/application/controllers/theme_preview_controller-b1f13d4d.js

1import { Controller } from '@hotwired/stimulus'
2
3// Design-system only: previews a color theme and mode by setting data-theme
4// and data-mode on <html>, the same attributes the layout renders from the
5// signed-in consultant (or the default theme). The selects start from those
6// attributes. Nothing is saved; a reload shows the consultant's own settings
7// again.
8export default class extends Controller {
9  static targets = ['theme', 'mode']
10
11  connect () {
12    const { theme, mode } = document.documentElement.dataset
13    this.select(this.themeTarget, theme)
14    this.select(this.modeTarget, mode)
15    this.toggleMode()
16  }
17
18  change () {
19    this.toggleMode()
20    // Mirrors Theme#effective_mode: themes without a dark palette stay light.
21    document.documentElement.dataset.theme = this.themeTarget.value
22    document.documentElement.dataset.mode = this.supportsDark() ? this.modeTarget.value : 'light'
23  }
24
25  toggleMode () {
26    this.modeTarget.disabled = !this.supportsDark()
27  }
28
29  supportsDark () {
30    return this.themeTarget.selectedOptions[0]?.dataset.dark === 'true'
31  }
32
33  select (target, value) {
34    if (value && [...target.options].some((option) => option.value === value)) target.value = value
35  }
36}