Open2 Engine: Bookworm - part 5 - Changing Themes

    Okay, so the last post took an unexpected turn.  I was blissfully unaware of how tricky it would be to change the look (or "theme") of Bookworm.  It wouldn't be so bad if it was a simple HTML application, but since I'm also using jQuery UI that means I need to go through some extra work.  I like the styling of the jQuery UI widgets, you could create the same, or at least very similar, widgets in plain HTML and CSS - but I also like the experience of working with a JavaScript library.  You need to look at your code differently when you're adding someone else's library - case in point how I didn't consider that jQuery UI would have it's own stylesheet.  And it turns out that the JQUI stylesheet is kind of complicated.  So let's look at how it handles themes...


ThemeRoller
    There is a great place to go for JQUI themes, a site called ThemeRoller...

Here you can change everything about how JQUI looks.  When you get done and click on the link to download your theme though, it gets a little weird.  You get taken to this download page....

And there are a lot of checkbox options...

At the bottom of the page it actually mentions something about themes...

What you download is a zip archive with a lot of files in it...

 If you leave everything checked, like I did, you get quite a few files and directories.  You get a lot more than just the theme you were working on; you end up with the jQuery UI JavaScript file, the jQuery JavaScript file, a package.json for your package manager, some other stuff, and several CSS files.  The first thing to note are the jquery-ui.css and the jquery-ui.min.css files...

These are the JQUI stylesheets, both of them, but the second is the "minified" version.  You get this with things that go over the web.  Just like a zip archive is a compressed format to reduce the time a download takes, a minified file has extra whitespace removed and usually names for variables and functions have been shortened.  It makes for a smaller file, but at the cost of something that is difficult if not impossible for a person to read.  Here is a screenshot of the full and minified files side-by-side in Notepad++...

So those are two of the files, basically the same information just in different formats.  Which happens again...

The jquery-ui.css is the full stylesheet, but there are also jquery-ui.structure.css and jquery-ui.theme.css files.  These last two (and their minified versions) are just two halves of the full stylesheet.  The 'structure' file has the CSS elements for positioning and size, the structural elements; while the 'theme' file has the colors and appearance elements.  This could be useful to split up in some cases, and I think I'll use these for my theme switcher - I'm not changing any of the structure, just the appearance, so why load anything bigger than I have to?
    Another thing I want to point out is the way JQUI uses icons...

 JQUI can display its icons in different colors, it does that by loading from a different image file.  If you look at the filenames you can see that each has the 6 digit hex color code after the "ui-icons_" beginning.  So I need all these files to be together in a folder called "images" that's in the same folder as the css files.


Changing Themes, done right this time
    Now that I know how the JQUI themes are created, and what files to load, and have a site to create new themes - now I can actually impliment the theme-switcher.  So this is going to be in two parts.  First there is the background color which is my basic CSS, located in my own bookworm.css file.  The second part is the JQUI theme.  I'm making two versions of each JQUI theme, both will have the same primary color, like blue, but one will be designed for a white background and the other for a dark background (I'm going to soften it to a dark grey instead of the pure black I did before).  So when I swtich themes I need to change two things.  I wasn't sure about how hard it was going to be to change the themes, I had a picture in my head of some complicated coding - I even found a special theme switcher widget.  Thankfully I was wrong, because I found another site that has a wonderfully simple solution.  Niklas Tech Blog has a great way to switch JQUI themes with a simple drop-down.  All I need to do is add a line of JavaScript to also change the background CSS at the same time and I'll have a winner.  Hopefully :)  So let me whip up the code and see what happens.
    So here's my revised code...

The first thing I did was remove the extra stylesheet links.  I didn't understand about the full and minified versions of the CSS, so I had linked them both (always read the documentation! though that is a little hard with something as complex as JQUI).
    Once I removed the bad link I added the good one.  I'm using the 'structure' and 'theme' files, and I renamed the 'theme' files into something more descriptive.  I've added an id to the <link> for the stylesheet, to make it easier to target later (per the blog I referenced).

With the <head> stuff fixed, time to add the <select> for the theme changer.  Now, I'm not just changing the JQUI theme, I'm also changing the background CSS, so each <option> has a value attribute for the stylesheet link, and also a data-background attribute that is going to change the general CSS.

I'm going to make the <select> a JQUI widget as well, so I've added the code to initialize it in the function that handles all the JQUI setup.  To trigger the theme switch when the user selects an option means setting an event listener for the "change" and not the "click" you use for buttons.  The function does 3 things: it takes the path from the value attribute and changes the stylesheet link the the head section, it clears any light or dark CSS classes, and it applies either the light or dark from the data-background attribute.  I did find something when playing with this, I had originally only set the light/dark on the <body> element - but that didn't change the <textarea> for the notes.  So I'd set the background for the page dark and then have the notes still be white.  That was an oopsie, so I fixed it to change both.
    The last change I made was to set the "dark" CSS class to a dark grey instead of pure black, I just think the grey is a little easier on the eyes...

Here's the drop-down...

Which changes the way everything looks, including the textarea...

Woo hoo!!! We've got themes and they work this time :)

    Okay, that actually took a lot of time to figure out.  These posts may not look like much, but between researching, coding, screenshotting, and posting they usually take 4 hours.  Same with this, it took a while to research how JQUI handled themes and how to change themes in general, play with ThemeRoller to get all the colors something I liked, write the code, fix my mistakes when writing the code, take screenshots, and then write and upload the post, images and Google Drive files.  That said, here's the Google Drive link.  So while this did not add a lot of functionality to my little app, it's taken enough of my life to call it a day (in an already busy day, hence my posting this late).  So I'm going to stop here.  Next week I'm moving on to what I expect to be one of the hardest and longest parts, adding an editor that will let the user create their own documents.  Until then!