Skip to content

fix: prevent dark theme flash on navigation #6429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Z1xus wants to merge 1 commit into
base: master
Choose a base branch
from
+18 −4
Open

fix: prevent dark theme flash on navigation #6429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion assets/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,13 @@
}

html {
@apply text-gray-800;
@apply text-gray-800 bg-gray-50;
color-scheme: light;
}

html.dark {
@apply bg-gray-950;
color-scheme: dark;
}

body {
Expand Down
9 changes: 7 additions & 2 deletions lib/plausible_web/components/layout.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ defmodule PlausibleWeb.Components.Layout do
"""
end

def html_classes(assigns) do
["h-full plausible", if(theme_preference(assigns) == "dark", do: "dark")]
|> Enum.reject(&is_nil/1)
end

def theme_script(assigns) do
~H"""
<script blocking="rendering">
Expand Down Expand Up @@ -151,11 +156,11 @@ defmodule PlausibleWeb.Components.Layout do
"""
end

defp theme_preference(%{theme: theme}) when not is_nil(theme), do: theme
defp theme_preference(%{theme: theme}) when not is_nil(theme), do: to_string(theme)

defp theme_preference(%{current_user: %Plausible.Auth.User{theme: theme}})
when not is_nil(theme) do
theme
to_string(theme)
end

defp theme_preference(_assigns), do: "system"
Expand Down
5 changes: 4 additions & 1 deletion lib/plausible_web/templates/layout/app.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<!DOCTYPE html>
<html lang="en" class="h-full plausible">
<html
lang="en"
class={PlausibleWeb.Components.Layout.html_classes(Map.take(assigns, [:current_user, :theme]))}
>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Expand Down