Phoenix tailwindcss dark:bg not applying

Phoenix Forum Questions / Help
, ,
1

Hi, I’m trying to apply some dark theme based on the browser’s mode, but I can’t make it work.
The strange thing is that it works when I use text-zinc-950 dark:text-zinc-200 but it doesn’t with bg-gray-50 dark:bg-zinc-950.

Body in root.html.heex

<body class="bg-gray-50 dark:bg-zinc-950 text-zinc-950 dark:text-zinc-200 antialiased">

In the running application from app.css

@media (prefers-color-scheme: dark) {
  .dark\:text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity));
  }

  .dark\:text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity));
  }

  .dark\:text-zinc-200 {
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity));
  }
}

there are no dark backgrounds.
Am I missing something?

My deps:

defp deps do
    [
      {:bcrypt_elixir, "~> 3.0"},
      {:phoenix, "~> 1.7.2"},
      {:phoenix_ecto, "~> 4.4"},
      {:ecto_sql, "~> 3.6"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 3.3"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.18.16"},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.7.2"},
      {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},
      {:swoosh, "~> 1.3"},
      {:finch, "~> 0.13"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
      {:plug_cowboy, "~> 2.5"}
    ]
  end
1 Like
2

Hello @Lotryas , welcome to the Elixir community forum.

To answer your question, am not sure what could be the issue, however since you mentioned you want to apply a dark theme based on your browsers mode, in your tailwind.config.js file inside the module.exports object, look the line darkMode: 'class' and changed it to darkMode: 'media' see it that works.

3

Hi @jmnda, thank you :grin:

Based on tailwind docs:

By default this uses the prefers-color-scheme CSS media feature, but you can also build sites that support toggling dark mode manually using the ‘class’ strategy.

It doesn’t need a darkMode to use the default system colors.

Anyway, I’ve found why it doesn’t work :sweat_smile:
The app.css file says it is using tailwindcss version 3.2.7 and it doesn’t have the new darker 950 colors which are in the 3.3.1 version of the docs. Tailwind docs site doesn’t have a 3.2.7 snapshot, so I had to use that.

So, my bad :sweat_smile:. I’ll be less darker I guess.

Thanks anyway

1 Like
4

Great you figured it out :grin:. Happy coding and feel free to bother us again if have questions :sweat_smile:

2 Likes
5

Sharing with the community the button and howto.

firefox_1puaqB2UTM

1 Like
6

Yeah, you’re using the gray-900 color. I wanted the gray-950 one. It was just missing cause of old tailwind css version embedded with phoenix

7

Now I see what you meant!

1 Like