automatically apply system-wide theme preference for anonymous users (fixes philomena-dev/philomena#36)

assets/js/theme.js

@@ -0,0 +1,13 @@
+/**
+ * Theme setting
+ */
+
+function setThemeCookie() {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.cookie = `theme=dark; path=/; max-age=788923800; samesite=lax`;
+  } else {
+    document.cookie = `theme=light; path=/; max-age=788923800; samesite=lax`;
+  }
+}
+
+export { setThemeCookie };

assets/js/when-ready.js

@@ -32,6 +32,7 @@ import { setupTimestamps }      from './timeago';
 import { setupImageUpload }     from './upload';
 import { setupSearch }          from './search';
 import { setupToolbar }         from './textiletoolbar';
+import { setThemeCookie }       from './theme';
 import { hideStaffTools }       from './staffhider';
 import { pollOptionCreator }    from './poll';
 
@@ -63,7 +64,8 @@ whenReady(() => {
   setupTimestamps();
   setupImageUpload();
   setupSearch();
-  setupToolbar();
+  setupToolbar()
+  setThemeCookie();
   hideStaffTools();
   pollOptionCreator();
 

lib/philomena_web/views/layout_view.ex

@@ -64,14 +64,24 @@ defmodule PhilomenaWeb.LayoutView do
     Config.get(:footer)
   end
 
+  def stylesheet_path(conn, %{theme: "default"}),
+    do: Routes.static_path(conn, "/css/default.css")
+
   def stylesheet_path(conn, %{theme: "dark"}),
     do: Routes.static_path(conn, "/css/dark.css")
 
   def stylesheet_path(conn, %{theme: "red"}),
     do: Routes.static_path(conn, "/css/red.css")
 
-  def stylesheet_path(conn, _user),
+  def stylesheet_path(conn, _user) do
-    do: Routes.static_path(conn, "/css/default.css")
+    case conn.cookies do
+      %{"theme" => "dark"} ->
+        Routes.static_path(conn, "/css/dark.css")
+
+      _ ->
+        Routes.static_path(conn, "/css/default.css")
+    end
+  end
 
   def theme_name(%{theme: theme}), do: theme
   def theme_name(_user), do: "default"