fix theme applying based on the 'theme' query param (#3639)

This commit is contained in:
RobertJoonas 2023-12-15 16:59:00 +00:00 committed by GitHub
parent 9e783ebb41
commit 77ca5abbc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 5 deletions

View File

@ -7,13 +7,13 @@ defmodule PlausibleWeb.Components.Layout do
~H""" ~H"""
<script> <script>
(function(){ (function(){
var userPref = '<%= current_theme(assigns[:current_user]) %>'; var themePref = '<%= theme_preference(assigns) %>';
function reapplyTheme() { function reapplyTheme() {
var darkMediaPref = window.matchMedia('(prefers-color-scheme: dark)').matches; var darkMediaPref = window.matchMedia('(prefers-color-scheme: dark)').matches;
var htmlRef = document.querySelector('html'); var htmlRef = document.querySelector('html');
var hcaptchaRefs = Array.from(document.getElementsByClassName('h-captcha')); var hcaptchaRefs = Array.from(document.getElementsByClassName('h-captcha'));
var isDark = userPref === 'dark' || (userPref === 'system' && darkMediaPref); var isDark = themePref === 'dark' || (themePref === 'system' && darkMediaPref);
if (isDark) { if (isDark) {
htmlRef.classList.add('dark') htmlRef.classList.add('dark')
@ -31,6 +31,12 @@ defmodule PlausibleWeb.Components.Layout do
""" """
end end
defp current_theme(nil), do: "system" defp theme_preference(%{theme: theme}) when not is_nil(theme), do: theme
defp current_theme(user), do: user.theme
defp theme_preference(%{current_user: %Plausible.Auth.User{theme: theme}})
when not is_nil(theme) do
theme
end
defp theme_preference(_assigns), do: "system"
end end

View File

@ -45,7 +45,7 @@
<%= Map.get(assigns, :inner_layout) || @inner_content %> <%= Map.get(assigns, :inner_layout) || @inner_content %>
</main> </main>
<PlausibleWeb.Components.Layout.theme_script current_user={@conn.assigns[:current_user]} /> <PlausibleWeb.Components.Layout.theme_script {Map.take(assigns, [:current_user, :theme])} />
<%= if assigns[:embedded] do %> <%= if assigns[:embedded] do %>
<div data-iframe-height></div> <div data-iframe-height></div>