Themeing gisty

Refactoring gisty~

When I initially wrote gisty~ it was a quickly put together application, and I even waited a bit to promote the application. Not to say that it was bad, but function was its primary goal. Ascetics was fairly low on the priority list at the time. At that time, it was all about the GitHub Application programming interface (API) calls to accurately pull the data needed, and to do it the same every time. Now six months later after using the application, some much needed attention has been given to the user interface (UI).

New default theme

After six months of looking at my butchered rendition of the default bootstrap theme on my ChromeBook, I decided that it would be great to have the theme be dark. So I started down the path of attempting to apply any dark theme to the application, but it never looked good. Then it hit me, in the early day’s haste I had made some poor decisions on the CSS and other formatting - ignoring the Bootstrap best practices. While it was faster then to get the application up and running - I finally had to pay the price if I didn’t want to have to maintain a totally custom theme.

After cleaning up the code to be more Bootstrappy, followed by searching and scouring the internet, I came across the Bootswatch project - which are a bunch of open source themes for Bootstrap. After looking at all the themes, the solar theme caught my eye and became the default theme. Overall, it’s really made the look of gisty~ seem much more polished.

Then Daylight Savings Time kicked in…

The dark theme worked great most of the time, but in direct sunlight it was hard to see, so back to the drawing board. I checked out the Bootswatch project again and found that Flatly looked really good for a light theme. Which created the next issue - do I want to give up the dark theme so quickly?

The truth is I really didn’t, and luckily with the refactoring that I did to make the solar theme work, it made interchangeable themes fairly easy to implement.

Swapping themes

Since I chose to build the app with jQuery, the code was really easy to implement for allowing two buttons to toggle the themes. Below is the general code needed to make it work - check gisty~’s source code for the details.

$(document).ready(function() {
  var themeDark = function(){
     $('link[href="Tlight.css"]').attr('href','Tdark.css');
     $('link[href="light.css"]').attr('href','dark.css');
     localStorage.setItem("gistyTheme", "dark");
  }
  var themeLight = function(){
     $('link[href="Tdark.css"]').attr('href','Tlight.css');
     $('link[href="dark.css"]').attr('href','light.css');
     localStorage.setItem("gistyTheme", "light");
  }
  $('#dark').click(function (){
    themeDark()
  });
  $('#light').click(function (){
    themeLight()
  });
});

Thanks stackoverflow for the base code

In general, it allows for multiple CSS files to get swapped out on demand and even the preference to be saved in the local storage of the computer. While there probably are more graceful ways to implement, this was the fastest and easiest to maintain long term. And honestly, low maintenance has never been considered a bad thing.

Overall

gisty~ is really starting to mature, and it looks great on a Chromebook. This little side sprint improving the code base for gisty~ has been fun and interesting. I might even use some of the lessons from it on some of my other projects.

While gisty~ is awesome, keep in mind that it is a work in progress, so bugs can creep in now and then. One actually did on this release, which required the browser cache to be cleared before the themes would switch. They usually don’t happen, but it’s a possibility. Also, if you do find a bug you can help the project by filing an issue here, or patching it through a pull request.