Theming Guide

PhoenixFilament uses daisyUI 5's theme system, which is built on CSS custom properties (variables). This means themes apply instantly without a rebuild and can be customized per panel.

Built-in daisyUI Themes

daisyUI 5 ships 35+ themes. Set one per panel with the theme: option:

use PhoenixFilament.Panel,
  path: "/admin",
  theme: "corporate"

Popular choices:

Dark Mode Toggle

Add a light/dark toggle button to the panel header:

use PhoenixFilament.Panel,
  path: "/admin",
  theme: "corporate",
  theme_switcher: true

When theme_switcher: true, a sun/moon toggle appears in the top navigation bar. It uses daisyUI's theme-controller mechanism — clicking it switches between your configured theme and "dark".

If you want to control which dark theme is used with theme_switcher, you can render the PhoenixFilament.Components.Theme.theme_switcher/1 component directly in a custom layout:

<PhoenixFilament.Components.Theme.theme_switcher
  light_theme="corporate"
  dark_theme="dracula"
/>

CSS Variable Overrides

Every daisyUI theme is defined through CSS custom properties. You can override individual colors without replacing the entire theme by adding CSS to your assets/css/app.css:

/* Override just the primary color in the corporate theme */
[data-theme="corporate"] {
  --color-primary: oklch(60% 0.2 270);
  --color-primary-content: oklch(98% 0.01 270);
}

Available CSS variables (all use OKLCH color format in daisyUI 5):

Brand Customization

Brand name

Set the text displayed in the sidebar header:

use PhoenixFilament.Panel,
  path: "/admin",
  brand_name: "Acme Admin"

Logo

Replace the text brand name with an image:

use PhoenixFilament.Panel,
  path: "/admin",
  brand_name: "Acme Admin",
  logo: "/images/logo.svg"

When logo: is set, the sidebar header renders the image instead of the brand name text. The brand_name is still used for the page <title> and accessibility attributes.

Per-Panel Theme Isolation

If your application has multiple panels (e.g. a customer portal and a superadmin panel), each can have a different theme:

defmodule MyAppWeb.Admin do
  use PhoenixFilament.Panel,
    path: "/admin",
    theme: "corporate",
    brand_name: "Staff Admin"
end

defmodule MyAppWeb.SuperAdmin do
  use PhoenixFilament.Panel,
    path: "/superadmin",
    theme: "dark",
    brand_name: "Super Admin"
end

Each panel applies its theme via the data-theme attribute scoped to the panel layout — themes do not leak between panels or into the host application.