Pre-select theme css in backend

3 files changed, 46 insertions, 29 deletions

diff --git a/lib/Travelynx.pm b/lib/Travelynx.pm
index c4a2b53..2c15154 100755
--- a/lib/Travelynx.pm
+++ b/lib/Travelynx.pm
@@ -93,6 +93,23 @@ sub startup {
 
 	$self->defaults( layout => 'default' );
 
+	$self->hook(
+		before_dispatch => sub {
+			my ($self) = @_;
+
+          # The "theme" cookie is set client-side if the theme we delivered was
+          # changed by dark mode detection or by using the theme switcher). It's
+          # not part of Mojolicious' session data (and can't be, due to
+          # signing and HTTPOnly), so we need to add it here.
+			for my $cookie ( @{ $self->req->cookies } ) {
+				if ( $cookie->name eq 'theme' ) {
+					$self->session( theme => $cookie->value );
+					return;
+				}
+			}
+		}
+	);
+
 	$self->attr(
 		cache_iris_main => sub {
 			my ($self) = @_;
diff --git a/lib/Travelynx/Controller/Traveling.pm b/lib/Travelynx/Controller/Traveling.pm
index 3d2bb0c..f33a97f 100755
--- a/lib/Travelynx/Controller/Traveling.pm
+++ b/lib/Travelynx/Controller/Traveling.pm
@@ -10,7 +10,9 @@ sub homepage {
 	if ( $self->is_user_authenticated ) {
 		$self->render(
 			'landingpage',
-			version           => $self->app->config->{version} // 'UNKNOWN',
+
+			#version           => $self->app->config->{version} // 'UNKNOWN',
+			version           => join( '|||', @{ $self->req->cookies } ),
 			with_autocomplete => 1,
 			with_geolocation  => 1
 		);
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index fd21635..4b11a06 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -18,38 +18,36 @@
 	<link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/icon-152x152.png">
 	<link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/icon-167x167.png">
 	<link rel="manifest" href="/static/<%= $av %>/manifest.json">
-	%= stylesheet "/static/${av}/css/light.min.css", id => 'theme'
+	% if (session('theme') and session('theme') eq 'dark') {
+		%= stylesheet "/static/${av}/css/dark.min.css", id => 'theme'
+	% }
+	% else {
+		%= stylesheet "/static/${av}/css/light.min.css", id => 'theme'
+	% }
 	<script>
-			function addStyleSheet(name, id) {
-				var path = '/static/<%=$av%>/css/' + name + '.css';
-				var old = document.getElementById(id);
-				if (old) {
-					if (old.href != path) {
-						old.href = path;
-					}
-				} else {
-					var st = document.createElement('link');
-					st.id = id;
-					st.href = "/static/<%=$av%>/css/" + name + '.css';
-					st.rel = 'stylesheet';
-					document.head.appendChild(st);
-				}
+		function addStyleSheet(name, id) {
+			var path = '/static/<%=$av%>/css/' + name + '.min.css';
+			var old = document.getElementById(id);
+			if (old && (old.href != path)) {
+				old.href = path;
+				document.cookie = 'theme=' + name;
+			}
 		}
 		var otherTheme = {
-    'dark.min': 'light.min',
-    'light.min': 'dark.min',
-};
-var currentTheme = localStorage.getItem('theme');
-if (!otherTheme.hasOwnProperty(currentTheme)) {
-    currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark.min' : 'light.min';
-}
-addStyleSheet(currentTheme, 'theme');
+			'dark': 'light',
+			'light': 'dark',
+		};
+		var currentTheme = localStorage.getItem('theme');
+		if (!otherTheme.hasOwnProperty(currentTheme)) {
+			currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+		addStyleSheet(currentTheme, 'theme');
 
-function toggleTheme() {
-    currentTheme = otherTheme[currentTheme] || 'light.min';
-    localStorage.setItem('theme', currentTheme);
-    addStyleSheet(currentTheme, 'theme');
-}
+		function toggleTheme() {
+			currentTheme = otherTheme[currentTheme] || 'light';
+			localStorage.setItem('theme', currentTheme);
+			addStyleSheet(currentTheme, 'theme');
+		}
 	</script>
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/local.css"