summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xlib/Travelynx.pm17
-rwxr-xr-xlib/Travelynx/Controller/Traveling.pm4
-rw-r--r--templates/layouts/default.html.ep54
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"