Snork's Themes Without Javascript Or Cookies 2020-01-27

Nobody complained about the ugly theme here... but I assume that some folks just don't like it because it is different and people are just terrible about accepting things that are different. So I thought I would try setting up the web site to have a "light" theme as well for the delicate flowers who would like something a little more like the sites they are used to seeing. As it turns out, this is not so easily accomplished without the help of javascript or cookies. It is easy to add a second stylesheet, but browser support for switching stylesheets is lame at best, and whatever method you use, it has to maintain the correct stylesheet when following a local link. How have we come this far and still we have no easy browser-neutral way to provide users with different themes? Oh yeah, we have Google, Apple and Mozilla pretty much running the browser ship.

Duur.

So as it turns out, this is possible with just PHP and a little Nginx magic. For a start, I just made a symbolic link named "light" in the root of my site, to the root of my site. That's right, like this:

ln -s /var/www/snork.ca /var/www/snork.ca/light

My pages are chopped up in to a few separate .php files. This is so that [for example] if I want to edit the navigation links I just edit the included .php file that has the links and all pages are affected at the same time. I also have most of my meta statements packed away in a single .php file so I can modify settings for the whole site in one file. So in my meta stuff file I put a little chunk of PHP like so:

<?php
  $myuri = $_SERVER['REQUEST_URI'];
  $myresult = substr($myuri, 0, 7);
  if ( $myresult == "/light/" ) {
    $siteroot = "https://snork.ca/light";
    $posturl = substr($myuri, 7);
    $swapstyle = "https://snork.ca/" . $posturl;
    echo '<link rel="stylesheet" type="text/css" href="/inc/style-light.css" title="Light Style">';
    echo"\n";
  } else {
    $siteroot = "https://snork.ca";
    $posturl = substr($myuri, 1);
    $swapstyle = "https://snork.ca/light/" . $posturl;
    echo '<link rel="stylesheet" type="text/css" href="/inc/style.css" title="BBS Style">';
    echo "\n";
  }
?>

In short, this will chop up the current URL a bit, set some variables based on whether the web site is being accessed as / or /light/, and then add the appropriate stylesheet based on which URL is being used. Now the web site can be accessed by either URL and will get the appropriate stylesheet, but it also needs a way for people to easily switch back and forth between the styles. The link has to swap back and forth as well so when you are accessing by "/light/" it will go back to "/" and vide versa. Well, back in the PHP chunk above there was a variable set called $swapstyle which reassembles the current URL with the opposite theme path. So the link to change themes looks like this:

<?php
  echo '<span class="themeswap"><a href="' . $swapstyle . '">switch theme</a></span>' . "\n";
?>

Perhaps a little crappy to read, but once you parse it out in your head it will basically let you style your link as the class "themeswap" and will switch to the opposite theme immediately without switching pages or dropping to the root page. When it reloads the new theme (at the new base-URL) it will pick up the opposite stylesheet and will give the opposite link for switching back. But there is still a problem... existing links on my site TO my site still all point back to the default theme. So if I switch to the Light Theme at the root page, any of the linked posts will wind up being back in the default theme. To clean this up was a bit more of a pain in my ass. I had to go change all the links to look like this:

  echo '      <li>2020-01-27: <a href="' . $siteroot . '/posts/2020-01-27-snorks-themes-without-javascript-or-cookies/">Snork' . "'" . 's Themes Without Javascript Or Cookies</a></li>' . "\n";

The important part there is the $siteroot variable which was setup in the earlier code chunk. It points to the current base-URL scheme so that the links will just stay with the current theme. Of course Notepad++ has a "replace" feature, but I clicked through the entries one by one for the most part so I could micromanage the process and make sure nothing barfed along the way. Well, it did barf, because some of the posts [like the one above of course] have a single quote in the title and that needed to be escaped as shown above. Once I cleaned up those entries it was all working. Now I will have to go through the whole site at some point looking for links inside the posts that refer back to local pages and update those as well, but in the meantime the themes function, they are persistent, and nobody has to enable cookies or javascript for it to work. Sweet.

Hmmm, now that I think of it... there really isn't any Nginx magic is there? Even sweeter.

PS: The link to switch styles is up at the top right there, go on, try it out. You know you want to.