PrimerLive.Theme (PrimerLive v0.1.13)

Link to this section Summary

Functions

Adds theme_state and default_theme_state to the socket.assigns.

Configures menu options from supplied params

Creates HTML (data) attributes from the supplied theme state.

Compares the supplied state with the supplied default state.

Reset link identifier to distinguish in update.

Generic key used for

Route for session api calls.

Theme data stored in the session.

Returns an updated theme state by putting the supplied data in the theme state. If key is the reset key, returns the default theme state.

Link to this section Functions

Link to this function

add_to_socket(socket, session)

Link to this function

add_to_socket(socket, session, default_theme_state)

Adds theme_state and default_theme_state to the socket.assigns.

Link to this function

create_menu_items(theme, menu_options, menu_labels)

Configures menu options from supplied params:

  • theme: the current theme state (used to define the selected menu items)
  • menu_options: which menu options will be displayed
  • menu_labels: overrides of default text labels

Returns a list with 3 menu elements:

  • color_mode
  • dark_theme
  • light_theme

Each list item is a map that contains display attributes:

  • group label
  • option labels
  • the selected item

examples

Examples

iex> PrimerLive.Theme.create_menu_items(
...> %{
...>   color_mode: "light",
...>   light_theme: "light_high_contrast",
...>   dark_theme: "dark_high_contrast"
...> },
...> PrimerLive.Theme.default_menu_options(),
...> PrimerLive.Theme.default_menu_labels()
...> )
[color_mode: %{labeled_options: [{"light", "Light"}, {"dark", "Dark"}, {"auto", "System"}], options: ["light", "dark", "auto"], selected: "light", title: "Theme"}, dark_theme: %{labeled_options: [{"dark", "Dark"}, {"dark_dimmed", "Dark dimmed"}, {"dark_high_contrast", "Dark high contrast"}, {"dark_colorblind", "Dark colorblind"}, {"dark_tritanopia", "Dark Tritanopia"}], options: ["dark", "dark_dimmed", "dark_high_contrast", "dark_colorblind", "dark_tritanopia"], selected: "dark_high_contrast", title: "Dark tone"}, light_theme: %{labeled_options: [{"light", "Light"}, {"light_high_contrast", "Light high contrast"}, {"light_colorblind", "Light colorblind"}, {"light_tritanopia", "Light Tritanopia"}], options: ["light", "light_high_contrast", "light_colorblind", "light_tritanopia"], selected: "light_high_contrast", title: "Light tone"}]

iex> PrimerLive.Theme.create_menu_items(
...> %{
...>   color_mode: "light",
...>   light_theme: "light_high_contrast",
...>   dark_theme: "dark_high_contrast"
...> },
...> %{
...>   color_mode: ~w(light dark)
...> },
...> %{
...>   color_mode: %{
...>     light: "Light theme"
...>   },
...>   reset: "Reset"
...> })
[color_mode: %{labeled_options: [{"light", "Light theme"}, {"dark", "Dark"}], options: ["light", "dark"], selected: "light", title: "Theme"}]
Link to this function

default_menu_labels()

Link to this function

default_menu_options()

Link to this function

default_theme_state()

Link to this function

html_attributes(theme_state)

Link to this function

html_attributes(theme_state, default_theme_state)

Creates HTML (data) attributes from the supplied theme state.

examples

Examples

iex> PrimerLive.Theme.html_attributes(
...> %{
...>   color_mode: "light",
...>   light_theme: "light_high_contrast",
...>   dark_theme: "dark_high_contrast"
...> }
...> )
[data_color_mode: "light", data_light_theme: "light_high_contrast", data_dark_theme: "dark_high_contrast"]

iex> PrimerLive.Theme.html_attributes(
...> %{
...> },
...> %{
...>   color_mode: "auto",
...>   light_theme: "light",
...>   dark_theme: "dark"
...> }
...> )
[data_color_mode: "auto", data_light_theme: "light", data_dark_theme: "dark"]

iex> PrimerLive.Theme.html_attributes(
...> %{
...>   light_theme: "light_high_contrast",
...> },
...> %{
...>   color_mode: "auto",
...>   light_theme: "light",
...>   dark_theme: "dark"
...> }
...> )
[data_color_mode: "auto", data_light_theme: "light_high_contrast", data_dark_theme: "dark"]

iex> PrimerLive.Theme.html_attributes(
...> %{
...> },
...> %{
...>   color_mode: "auto",
...> }
...> )
[data_color_mode: "auto"]
Link to this function

is_default_theme(theme, default_theme_state)

Compares the supplied state with the supplied default state.

examples

Examples

iex> PrimerLive.Theme.is_default_theme(
...> %{
...>   color_mode: "auto",
...>   light_theme: "light",
...>   dark_theme: "dark"
...> },
...> PrimerLive.Theme.default_theme_state()
...> )
true

iex> PrimerLive.Theme.is_default_theme(
...> %{
...>   color_mode: "light",
...>   light_theme: "light_high_contrast",
...>   dark_theme: "dark_high_contrast"
...> },
...> PrimerLive.Theme.default_theme_state()
...> )
false

Reset link identifier to distinguish in update.

Generic key used for:

  • session route
  • JS event name ("phx:" prefix is assigned automatically)
Link to this function

session_route()

Route for session api calls.

For example:

scope "/api", MyAppWeb do
  pipe_through :api

  post PrimerLive.Theme.session_route(), SessionController, :set
end
Link to this function

session_theme_key()

Theme data stored in the session.

Link to this function

update(theme_state, map, default_theme_state)

Returns an updated theme state by putting the supplied data in the theme state. If key is the reset key, returns the default theme state.

Link to this function

update_theme_event_key()