A very first look at Phoenix 1.8

Phoenix 1.8.0-rc.0 just game out this morning and I took a quick look at it. The main changes I can see are a new UI framework, Daisy UI and some changes in the auth generators, including a concept of scopes. In this brief video, I only looked at the UI changes.

Updating the Phoenix installer

You can upgrade to the new Phoenix installer by running the following mix command from your terminal: mix archive.install hex phx_new 1.8.0-rc.0

Then generate a new app with mix phx.new app_name, as usual.

Adding DaisyUI themes

To add more themes from DaisyUI, just open app.css and replace

@plugin "../vendor/daisyui" {
  themes: false;
}

with

@plugin "../vendor/daisyui" {
  themes: light --default, dark --prefersdark, forest, acid, winter, emerald, cyberpunk;
}

@plugin "../vendor/daisyui" { themes: light --default, dark --prefersdark, forest, acid, winter, emerald, cyberpunk; }

Then edit your theme_toggle function in layouts.ex to use any of those theme names in place of "light" or "dark".

You can also add your own themes:

@plugin "../vendor/daisyui-theme" {
  name: "king";
  default: false;
  prefersdark: false;
  color-scheme: "king";
  --color-base-100: oklch(98% 0 0); /* White background */
  --color-base-200: oklch(96% 0 0); /* Slightly darker white */
  --color-base-300: oklch(92% 0 0); /* Even darker white */
  --color-base-content: oklch(21% 0 0); /* Black text */
  --color-primary: oklch(65% 0.25 27); /* Red primary color */
  --color-primary-content: oklch(98% 0 0); /* White text on red */
  --color-secondary: oklch(60% 0.2 240); /* Blue secondary color */
  --color-secondary-content: oklch(98% 0 0); /* White text on blue */
  --color-accent: oklch(80% 0.15 90); /* Yellow accent color */
  --color-accent-content: oklch(21% 0 0); /* Black text on yellow */
  --color-neutral: oklch(44% 0 0); /* Neutral gray */
  --color-neutral-content: oklch(98% 0 0); /* White text on neutral */
  --color-info: oklch(60% 0.2 240); /* Blue info color */
  --color-info-content: oklch(98% 0 0); /* White text on info */
  --color-success: oklch(70% 0.14 182); /* Green success color */
  --color-success-content: oklch(98% 0 0); /* White text on success */
  --color-warning: oklch(80% 0.15 90); /* Yellow warning color */
  --color-warning-content: oklch(21% 0 0); /* Black text on warning */
  --color-error: oklch(65% 0.25 27); /* Red error color */
  --color-error-content: oklch(98% 0 0); /* White text on error */
  --radius-selector: 0.25rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.21875rem;
  --size-field: 0.21875rem;
  --border: 1.5px;
  --depth: 1;
  --noise: 0;
}

Editing the hover colors

I edited the hover colors of the Guides & Docs link as well as the Source Code link to highlight the changes happening with theme swapping. Find those two links in home.html.heex and update the hover colors as follows:

<a
    href="https://hexdocs.pm/phoenix/overview.html"
    class="group relative rounded-box px-6 py-4 text-sm font-semibold leading-6 sm:py-6"
  >
    <span class="absolute inset-0 rounded-box bg-base-200 transition group-hover:bg-primary sm:group-hover:scale-105">
    </span>
    <span class="relative flex items-center gap-4 sm:flex-col group-hover:text-white">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="h-6 w-6">
        <path d="m12 4 10-2v18l-10 2V4Z" fill="currentColor" fill-opacity=".15" />
        <path
          d="M12 4 2 2v18l10 2m0-18v18m0-18 10-2v18l-10 2"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
      Guides &amp; Docs
    </span>
  </a>
  <a
    href="https://github.com/phoenixframework/phoenix"
    class="group relative rounded-box px-6 py-4 text-sm font-semibold leading-6 sm:py-6"
  >
    <span class="absolute inset-0 rounded-box bg-base-200 transition group-hover:bg-secondary sm:group-hover:scale-105">
    </span>
    <span class="relative flex items-center gap-4 sm:flex-col">
      <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6">
        <path
          fill="currentColor"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M12 0C5.37 0 0 5.506 0 12.303c0 5.445 3.435 10.043 8.205 11.674.6.107.825-.262.825-.585 0-.292-.015-1.261-.015-2.291C6 21.67 5.22 20.346 4.98 19.654c-.135-.354-.72-1.446-1.23-1.738-.42-.23-1.02-.8-.015-.815.945-.015 1.62.892 1.845 1.261 1.08 1.86 2.805 1.338 3.495 1.015.105-.8.42-1.338.765-1.645-2.67-.308-5.46-1.37-5.46-6.075 0-1.338.465-2.446 1.23-3.307-.12-.308-.54-1.569.12-3.26 0 0 1.005-.323 3.3 1.26.96-.276 1.98-.415 3-.415s2.04.139 3 .416c2.295-1.6 3.3-1.261 3.3-1.261.66 1.691.24 2.952.12 3.26.765.861 1.23 1.953 1.23 3.307 0 4.721-2.805 5.767-5.475 6.075.435.384.81 1.122.81 2.276 0 1.645-.015 2.968-.015 3.383 0 .323.225.707.825.585a12.047 12.047 0 0 0 5.919-4.489A12.536 12.536 0 0 0 24 12.304C24 5.505 18.63 0 12 0Z"
        />
    </svg>
    Source Code
  </span>
</a>

Adding options to the toggle

The theme_toggle component is in layouts.ex. I updated it as follows to add more options. Updating the toggle UI itself to highlight the selected item when there are more than two is an exercise left for the viewer.

  def theme_toggle(assigns) do
    ~H"""
    <div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full">
      <div class="absolute w-[12.5%] h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-[12.5%] [[data-theme=dark]_&]:left-[87.5%] transition-[left]" />

      <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "system"})} class="flex p-2">
        <.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>

      <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "light"})} class="flex p-2">
        <.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>

      <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "dark"})} class="flex p-2">
        <.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>

    <!-- Additional buttons for new themes -->
      <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "forest"})} class="flex p-2">
        <.icon name="hero-face-smile" class="size-4 opacity-75 hover:opacity-100" />
      </button>

      <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "acid"})} class="flex p-2">
        <.icon name="hero-beaker" class="size-4 opacity-75 hover:opacity-100" />
      </button>

      <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "king"})} class="flex p-2">
        <.icon name="hero-academic-cap" class="size-4 opacity-75 hover:opacity-100" />
      </button>

      <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "emerald"})} class="flex p-2">
        <.icon name="hero-currency-dollar" class="size-4 opacity-75 hover:opacity-100" />
      </button>

      <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "cyberpunk"})} class="flex p-2">
        <.icon name="hero-musical-note" class="size-4 opacity-75 hover:opacity-100" />
      </button>
    </div>
    """
  end

Final thoughts

While I haven't gone through all the changes in the auth generators yet, this has been the smoothest minor version upgrade I've seen in Phoenix. The previous two versions had major changes due to LiveView, Phoenix.HTML, dropping Phoenix.View and the related changes in the template DSL, so it was a pleasant surprise not to hit any sticking points on this release.