diff --git a/data/_html-template/_layouts/page.hbs b/data/_html-template/_layouts/page.hbs
index 77daa7fe..457cfac9 100644
--- a/data/_html-template/_layouts/page.hbs
+++ b/data/_html-template/_layouts/page.hbs
@@ -17,6 +17,8 @@
         <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
 
         <link rel="stylesheet" href="css/font-awesome.min.css">
+
+        <!-- TODO Loading both only works b/c book.js disables one of these with .prop(), selecting one by its href. It would make more sense to put the different styles under a class ("highlight-light" / "highlight-dark") and add or remove that class on the <body> or #page-wrapper. -->
         <link rel="stylesheet" href="css/highlight.css">
         <link rel="stylesheet" href="css/tomorrow-night.css">
 
diff --git a/data/_html-template/js/book.js b/data/_html-template/js/book.js
index 8731880c..281cfd76 100644
--- a/data/_html-template/js/book.js
+++ b/data/_html-template/js/book.js
@@ -131,11 +131,11 @@ $( document ).ready(function() {
 
     function set_theme(theme) {
         if (theme == 'coal' || theme == 'navy') {
-            $("[href='tomorrow-night.css']").prop('disabled', false);
-            $("[href='highlight.css']").prop('disabled', true);
+            $("[href='css/tomorrow-night.css']").prop('disabled', false);
+            $("[href='css/highlight.css']").prop('disabled', true);
         } else {
-            $("[href='tomorrow-night.css']").prop('disabled', true);
-            $("[href='highlight.css']").prop('disabled', false);
+            $("[href='css/tomorrow-night.css']").prop('disabled', true);
+            $("[href='css/highlight.css']").prop('disabled', false);
         }
 
         localStorage.setItem('theme', theme);
