diff options
| -rwxr-xr-x | lib/Travelynx.pm | 17 | ||||
| -rwxr-xr-x | lib/Travelynx/Controller/Traveling.pm | 4 | ||||
| -rw-r--r-- | templates/layouts/default.html.ep | 54 |
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" |