Packages
phoenix_kit
1.6.6
1.7.208
1.7.207
1.7.206
1.7.205
1.7.204
1.7.203
1.7.202
1.7.201
1.7.200
1.7.199
1.7.198
1.7.197
1.7.196
1.7.194
1.7.193
1.7.192
1.7.191
1.7.190
1.7.189
1.7.187
1.7.186
1.7.185
1.7.184
1.7.183
1.7.182
1.7.181
1.7.180
1.7.179
1.7.178
1.7.177
1.7.176
1.7.175
1.7.174
1.7.173
1.7.172
1.7.171
1.7.170
1.7.169
1.7.168
1.7.167
1.7.166
1.7.165
1.7.164
1.7.162
1.7.161
1.7.160
1.7.159
1.7.157
1.7.156
1.7.155
1.7.154
1.7.153
1.7.152
1.7.151
1.7.150
1.7.149
1.7.146
1.7.145
1.7.144
1.7.143
1.7.138
1.7.133
1.7.132
1.7.131
1.7.130
1.7.128
1.7.126
1.7.125
1.7.121
1.7.120
1.7.119
1.7.118
1.7.117
1.7.116
1.7.115
1.7.114
1.7.113
1.7.112
1.7.111
1.7.110
1.7.109
1.7.108
1.7.107
1.7.106
1.7.105
1.7.104
1.7.103
1.7.102
1.7.101
1.7.100
1.7.99
1.7.98
1.7.97
1.7.96
1.7.95
1.7.94
1.7.93
1.7.92
1.7.91
1.7.90
1.7.89
1.7.88
1.7.87
1.7.86
1.7.85
1.7.84
1.7.83
1.7.82
1.7.81
1.7.80
1.7.79
1.7.78
1.7.77
1.7.76
1.7.75
1.7.74
1.7.71
1.7.70
1.7.69
1.7.66
1.7.65
1.7.64
1.7.63
1.7.62
1.7.61
1.7.59
1.7.58
1.7.57
1.7.56
1.7.55
1.7.54
1.7.53
1.7.52
1.7.51
1.7.49
1.7.44
1.7.43
1.7.42
1.7.41
1.7.39
1.7.38
1.7.37
1.7.36
1.7.34
1.7.33
1.7.31
1.7.30
1.7.29
1.7.28
1.7.27
1.7.26
1.7.25
1.7.24
1.7.23
1.7.22
1.7.21
1.7.20
1.7.19
1.7.18
1.7.17
1.7.16
1.7.15
1.7.14
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.2
1.3.1
1.3.0
1.2.10
1.2.9
1.2.8
1.2.7
1.2.5
1.2.4
1.2.2
1.2.1
1.2.0
1.1.0
1.0.0
A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more
Current section
Files
Jump to
Current section
Files
lib/phoenix_kit/theme_config.ex
defmodule PhoenixKit.ThemeConfig do
@moduledoc """
Theme configuration utilities for PhoenixKit's DaisyUI integration.
This module centralises the theme metadata used across the admin UI so that
PhoenixKit and the consuming application stay in sync. Updating or adding a
theme requires changing this module and the shared CSS asset only.
"""
@default_html_theme "phoenix-light"
@custom_theme_variables %{
"phoenix-light" => %{
"color-scheme" => "light",
"--color-primary" => "oklch(57.38% 0.233 262.08)",
"--color-primary-content" => "oklch(98% 0.02 262.08)",
"--color-secondary" => "oklch(75.61% 0.194 333.67)",
"--color-secondary-content" => "oklch(20% 0.02 333.67)",
"--color-accent" => "oklch(74.22% 0.209 6.35)",
"--color-accent-content" => "oklch(20% 0.02 6.35)",
"--color-neutral" => "oklch(23.04% 0.065 269.31)",
"--color-neutral-content" => "oklch(98% 0.02 269.31)",
"--color-base-100" => "oklch(100% 0 0)",
"--color-base-200" => "oklch(96% 0 0)",
"--color-base-300" => "oklch(92% 0.005 286.88)",
"--color-base-content" => "oklch(20% 0.02 269.31)",
"--color-info" => "oklch(72.06% 0.191 231.6)",
"--color-info-content" => "oklch(20% 0.02 231.6)",
"--color-success" => "oklch(64.8% 0.15 160)",
"--color-success-content" => "oklch(20% 0.02 160)",
"--color-warning" => "oklch(84.71% 0.199 83.87)",
"--color-warning-content" => "oklch(20% 0.02 83.87)",
"--color-error" => "oklch(71.76% 0.221 22.18)",
"--color-error-content" => "oklch(20% 0.02 22.18)"
},
"phoenix-dark" => %{
"color-scheme" => "dark",
"--color-primary" => "oklch(57.38% 0.233 262.08)",
"--color-primary-content" => "oklch(98% 0.02 262.08)",
"--color-secondary" => "oklch(75.61% 0.194 333.67)",
"--color-secondary-content" => "oklch(20% 0.02 333.67)",
"--color-accent" => "oklch(74.22% 0.209 6.35)",
"--color-accent-content" => "oklch(20% 0.02 6.35)",
"--color-neutral" => "oklch(32.77% 0.033 264.54)",
"--color-neutral-content" => "oklch(85% 0.02 264.54)",
"--color-base-100" => "oklch(25.33% 0.024 265.76)",
"--color-base-200" => "oklch(23.45% 0.022 265.76)",
"--color-base-300" => "oklch(21.68% 0.02 265.76)",
"--color-base-content" => "oklch(85% 0.02 265.76)",
"--color-info" => "oklch(72.06% 0.191 231.6)",
"--color-info-content" => "oklch(20% 0.02 231.6)",
"--color-success" => "oklch(64.8% 0.15 160)",
"--color-success-content" => "oklch(20% 0.02 160)",
"--color-warning" => "oklch(84.71% 0.199 83.87)",
"--color-warning-content" => "oklch(20% 0.02 83.87)",
"--color-error" => "oklch(71.76% 0.221 22.18)",
"--color-error-content" => "oklch(20% 0.02 22.18)"
}
}
@labels %{
"system" => "System",
"phoenix-light" => "Phoenix Light",
"phoenix-dark" => "Phoenix Dark",
"light" => "Light",
"dark" => "Dark",
"cupcake" => "Cupcake",
"bumblebee" => "Bumblebee",
"emerald" => "Emerald",
"corporate" => "Corporate",
"synthwave" => "Synthwave",
"retro" => "Retro",
"cyberpunk" => "Cyberpunk",
"valentine" => "Valentine",
"halloween" => "Halloween",
"garden" => "Garden",
"forest" => "Forest",
"aqua" => "Aqua",
"lofi" => "Lo-Fi",
"pastel" => "Pastel",
"fantasy" => "Fantasy",
"wireframe" => "Wireframe",
"black" => "Black",
"luxury" => "Luxury",
"dracula" => "Dracula",
"cmyk" => "CMYK",
"autumn" => "Autumn",
"business" => "Business",
"acid" => "Acid",
"lemonade" => "Lemonade",
"night" => "Night",
"coffee" => "Coffee",
"winter" => "Winter",
"dim" => "Dim",
"nord" => "Nord",
"sunset" => "Sunset",
"caramellatte" => "Caramel Latte",
"abyss" => "Abyss",
"silk" => "Silk"
}
@dropdown_order [
"system",
"phoenix-light",
"phoenix-dark",
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
"dim",
"nord",
"sunset",
"caramellatte",
"abyss",
"silk"
]
@preview_themes Map.new(@dropdown_order, fn
"system" -> {"system", nil}
theme -> {theme, theme}
end)
@base_map %{
"phoenix-light" => "light",
"light" => "light",
"cupcake" => "light",
"bumblebee" => "light",
"emerald" => "light",
"corporate" => "light",
"retro" => "light",
"cyberpunk" => "light",
"valentine" => "light",
"garden" => "light",
"aqua" => "light",
"lofi" => "light",
"pastel" => "light",
"fantasy" => "light",
"wireframe" => "light",
"cmyk" => "light",
"autumn" => "light",
"acid" => "light",
"lemonade" => "light",
"winter" => "light",
"caramellatte" => "light",
"silk" => "light",
"phoenix-dark" => "dark",
"dark" => "dark",
"synthwave" => "dark",
"halloween" => "dark",
"forest" => "dark",
"black" => "dark",
"luxury" => "dark",
"dracula" => "dark",
"business" => "dark",
"night" => "dark",
"coffee" => "dark",
"dim" => "dark",
"nord" => "dark",
"sunset" => "dark",
"abyss" => "dark"
}
@slider_targets %{
"system" => ["system"],
"light" => [
"light",
"phoenix-light",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"retro",
"cyberpunk",
"valentine",
"garden",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"cmyk",
"autumn",
"acid",
"lemonade",
"winter",
"caramellatte",
"silk"
],
"dark" => [
"dark",
"phoenix-dark",
"synthwave",
"halloween",
"forest",
"black",
"luxury",
"dracula",
"business",
"night",
"coffee",
"dim",
"nord",
"sunset",
"abyss"
]
}
@slider_primary %{
"system" => "system",
"light" => "phoenix-light",
"dark" => "phoenix-dark"
}
@doc """
Returns the logical default theme name stored in the user's preferences.
"""
def default_theme, do: "system"
@doc """
Returns the initial theme applied to the `<html>` element on first render.
"""
def default_html_theme, do: @default_html_theme
@doc """
Fetches the current theme (alias for `default_theme/0`).
"""
def get_theme, do: default_theme()
@doc """
Returns theme data attributes for HTML elements.
"""
def theme_data_attributes, do: [{"data-theme", default_html_theme()}]
@doc """
Returns modern CSS variables for the theme system.
Currently unused but kept for backwards compatibility with previous helper
implementations.
"""
def modern_css_variables, do: ""
@doc """
Returns the ordered list of themes displayed in dropdown selectors.
"""
def dropdown_themes do
Enum.map(@dropdown_order, fn theme ->
%{
value: theme,
label: Map.fetch!(@labels, theme),
preview_theme: Map.get(@preview_themes, theme),
type: if(theme == "system", do: :system, else: :theme)
}
end)
end
@doc """
Returns a map of theme names to user-facing labels.
"""
def label_map, do: @labels
@doc """
Returns a map of theme names to their base variant (`"light"` or `"dark"`).
"""
def base_map, do: @base_map
@doc """
Returns the list of target aliases used by the slider buttons for the given
group (`"system"`, `"light"`, or `"dark"`).
"""
def slider_targets(group) when is_binary(group) do
Map.get(@slider_targets, group, [])
end
@doc """
Returns the slider target configuration map with string keys.
Suitable for encoding to JSON for client-side usage.
"""
def slider_target_map, do: @slider_targets
@doc """
Returns the canonical theme dispatched when a slider button is pressed.
"""
def slider_primary_theme(group) when is_binary(group) do
Map.get(@slider_primary, group, "system")
end
@doc """
Returns the theme slot metadata used by slider buttons.
"""
def slider_primary_map do
@slider_primary
end
@doc """
Returns all theme names recognised by PhoenixKit.
"""
def all_theme_names do
Map.keys(@labels)
end
@doc """
Returns the raw custom theme variable map.
"""
def custom_theme_variables, do: @custom_theme_variables
@doc """
Returns the custom PhoenixKit theme definitions as a CSS string.
Only custom PhoenixKit themes are included here; DaisyUI-built themes are
shipped with the DaisyUI plugin.
"""
def custom_theme_css do
@custom_theme_variables
|> Enum.map_join("\n\n", fn {theme, vars} ->
variables =
Enum.map_join(vars, "\n", fn {name, value} -> " #{name}: #{value};" end)
"[data-theme=#{theme}]\n{\n#{variables}\n}"
end)
end
end