Pre-select theme css in backend (fa98aba3) · Commits · derf / travelynx

lib/Travelynx.pm

+17 −0

Original line number	Diff line number	Diff line
		@@ -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) = @_;

lib/Travelynx/Controller/Traveling.pm

+3 −1

Original line number	Diff line number	Diff line
		@@ -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
		);

templates/layouts/default.html.ep

+26 −28

Original line number	Diff line number	Diff line
		@@ -18,35 +18,33 @@
		<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">
		% 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 path = '/static/<%=$av%>/css/' + name + '.min.css';
		var old = document.getElementById(id);
		if (old) {
		if (old.href != path) {
		if (old && (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);
		document.cookie = 'theme=' + name;
		}
		}
		var otherTheme = {
		'dark.min': 'light.min',
		'light.min': 'dark.min',
		'dark': 'light',
		'light': 'dark',
		};
		var currentTheme = localStorage.getItem('theme');
		if (!otherTheme.hasOwnProperty(currentTheme)) {
		currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark.min' : 'light.min';
		currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
		}
		addStyleSheet(currentTheme, 'theme');

		function toggleTheme() {
		currentTheme = otherTheme[currentTheme] \|\| 'light.min';
		currentTheme = otherTheme[currentTheme] \|\| 'light';
		localStorage.setItem('theme', currentTheme);
		addStyleSheet(currentTheme, 'theme');
		}

Admin message