PrivateCoffee/travelynx
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Pre-select theme css in backend

Browse source
This commit is contained in:
Daniel Friesel 2019-05-18 08:23:59 +02:00
parent ccff208764
commit fa98aba3d3
3 changed files with 46 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
lib/Travelynx.pm
View file

@ -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) = @_;

4
lib/Travelynx/Controller/Traveling.pm
View file

@ -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
);

54
templates/layouts/default.html.ep
View file

@ -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"