search

bonfire-networks / bonfire-app

Bonfire - tend to your digital life in community. Customise and host your own online space and control your experience at the most granular level.
https://bonfirenetworks.org
GNU Affero General Public License v3.0
522 stars 37 forks source link

Refactor how default/preferred theme is added in root #862

Open ivanminutillo opened 4 months ago

ivanminutillo commented 4 months ago

Previous code

  data-theme={
    if Settings.get(
         [:ui, :theme, :preferred],
         :system,
         assigns[:__context__] || assigns[:current_user] || @conn
       ) == :bonfire,
       do:
         Settings.get(
           [:ui, :theme, :instance_theme_light],
           "light",
           assigns[:__context__] || assigns[:current_user] || @conn
         ),
       else:
         Settings.get(
           [:ui, :theme, :instance_theme],
           "bonfire",
           assigns[:__context__] || assigns[:current_user] || @conn
         )
  }
  x-data={
    if Settings.get(
         [:ui, :theme, :preferred],
         :system,
         assigns[:__context__] || assigns[:current_user] || @conn
       ) == :system,
       do:
         "{
        prefersDarkTheme: window.matchMedia('(prefers-color-scheme: dark)').matches,
        dark_theme: $el.dataset.theme,
        light_theme: '#{Settings.get([:ui, :theme, :instance_theme_light],
         "light",
         assigns[:__context__] || assigns[:current_user] || @conn)}'
        }"
  }
  x-init={
    if Settings.get(
         [:ui, :theme, :preferred],
         :system,
         assigns[:__context__] || assigns[:current_user] || @conn
       ) == :system,
       do:
         "window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { prefersDarkTheme = e.matches; });"
  }
  x-bind:data-theme={
    if Settings.get(
         [:ui, :theme, :preferred],
         :system,
         assigns[:__context__] || assigns[:current_user] || @conn
       ) == :system,
       do: "prefersDarkTheme ? dark_theme : light_theme"
  }