How to get current theme in liveview for use in third party libraries?

Phoenix Forum Questions / Help
,
1

Hello.
I use Phoenix 1.8 (with the new theme switching feature) with LiveView 1.1.4.
To draw charts I use the js library apexchart, which has the ability to set a dark or light theme.

I call the library inside liveview something like this:

<.chart
      id="chart"
      chartset={%{
        chart: %{
          type: "line",
        },
        theme: %{
          mode: @theme,
        },
        series: [%{
          name: "Series",
          data: @series
        }],
        xaxis: %{
          categories: @categories,
        }
      }}
 />

How can I get the current theme to pass into a variable @theme?

Is there any other way to pass the current theme to a third-party JS library?

2

Looks like the theme is entirely client-side. You can see the code that handles it here in the root layout.

You should be able to grab the current theme on the client with:

// JS
localStorage.get('phx:theme') || 'system'

Or you can modify the implementation in that script tag as you please (generated code is your code).

2 Likes
3

Essentially phoenix generates some example/baseline code on how to you can handle themes. It‘s not indended to solve all needs around themeing as is, but you want to build that around what is generated or even replace it with something more advanced habdling all your needs.

2 Likes