Added theme selector in GUI

dark-styles.css

@@ -0,0 +1,184 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+body {
+    font-family: 'Roboto', BlinkMacSystemFont, sans-serif;
+    background-color: #222233;
+    line-height: 1.6;
+    font-size: 17px;
+    color: #D1D1D1;
+    text-rendering: optimizeLegibility;
+}
+
+@media print {
+    body { color: #333; }
+}
+
+h1,
+h2 {
+    font-weight: 700;
+}
+
+h1 {
+    font-size: 1.875em;
+    line-height: 1.125;
+}
+
+h2 {
+    font-size: 1.45em;
+    line-height: 1.2625em;
+}
+
+h3 {
+    font-size: 1.25em;
+    line-height: 1.5;
+}
+
+hr {
+    height: 1px;
+    background-color: inherit;
+    border: none;
+    width: 100%;
+    margin: 0px;
+}
+
+a[href] {
+    color: #64BEFA;
+}
+
+a[href]:hover {
+    color: #2089d0;
+}
+
+.simple-container {
+    -webkit-print-color-adjust: exact;
+    max-width: 600px;
+}
+
+.simple-control,
+.simple-control *,
+.simple-edit * {
+    fill: #D1D1D1;
+    color: #D1D1D1;
+    border-color: #D1D1D1;
+}
+
+.youtubeContainer {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
+    padding-top: 25px;
+}
+iframe[src *= "youtube.com/embed/"] {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+img {
+    max-width: 100%;
+}
+
+li {
+    line-height: 1.5em;
+}
+
+td {
+    border: 1px solid black;
+    padding: 3px 7px;
+}
+
+pre {
+    background-color: #E0E0E0;
+    padding: 10px;
+    overflow: auto;
+}
+
+blockquote {
+    border-left: 4px solid;
+    margin-left: 0;
+    padding: 15px 10% 15px 8%;
+    margin: 1em 0;
+    font-size: 1.2em;
+    line-height: 1.4;
+}
+blockquote > *:first-child {
+    margin-top: 0;
+}
+blockquote > *:last-child {
+    margin-bottom: 0;
+}
+
+figure {
+    margin: 0 0 10px;
+}
+ figcaption {
+    font-size: 0.9em;
+    opacity: 0.7;
+    border: 1px solid #eee;
+    padding: 17px 17px 12px;
+}
+
+table {
+    background: #004b7a;
+    margin: 10px auto;
+    border: none;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
+    border-spacing: 0;
+    font: inherit;
+    text-align: center;
+}
+table tr td,
+table tr th,
+table thead th {
+    margin: 3px;
+    padding: 5px;
+    color: #ccc;
+    border: 1px solid rgba(255, 255, 255, .25);
+    background: rgba(0, 0, 0, .1);
+}
+
+aside,
+[class *= "sidebar"],
+[id *= "sidebar"] {
+    max-width: 90%;
+    margin: 0 auto;
+    border: 1px solid lightgrey;
+    padding: 5px 15px;
+}
+
+.simple-date {
+    display: inline-block;
+    font-size: 18px;
+    padding-right: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-right: 1px solid #d8d8d8;
+}
+.rtl .simple-date {
+    border-left: 1px solid #d8d8d8;
+    border-right: none;
+    padding-right: 0;
+    padding-left: 15px;
+}
+
+.simple-author {
+    display: inline-block;
+    font-size: 18px;
+    color: #27AAE1;
+    line-height: 22px;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.rtl .simple-author {
+    padding-left: 0;
+    padding-right: 10px;
+}
+
+
+/* Make emojis and icons a reasonable size */
+[class *= "emoji"],
+[class *= "icon"] { width: 1em; }

default-styles.css

@@ -47,6 +47,10 @@ a[href]:hover {
     color: #4ECAFF;
 }
 
+.simple-container {
+    max-width: 600px;
+}
+
 .youtubeContainer {
     position: relative;
     width: 100%;
@@ -146,10 +150,6 @@ aside,
     padding-right: 10px;
 }
 
-.simple-container {
-    max-width: 600px;
-}
-
 
 /* Make emojis and icons a reasonable size */
 [class *= "emoji"],

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Just Read",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "manifest_version": 2,
   "description": "A customizable reader extension.",
   "homepage_url": "https://github.com/ZachSaucier/Just-Read",
@@ -49,6 +49,7 @@
     "print.svg",
     "required-styles.css",
     "default-styles.css",
+    "dark-styles.css",
     "hide-segments.css",
     "page.css",
     "options.js",

options.js

@@ -37,7 +37,8 @@ var changed = false,
     stylesheetObj = {},
     saveButton = document.getElementById("save"),
     defaultLiItem,
-    defaultStylesheet = "default-styles.css";
+    defaultStylesheet = "default-styles.css",
+    darkStylesheet = "dark-styles.css";
 
 function isEmpty(obj) {
     return Object.keys(obj).length === 0;
@@ -75,8 +76,10 @@ function getStylesFromStorage(storage) {
             alwaysAddAR.checked = storage[key];
         } else if(key === "fullscreen") {
             fullScrn.checked = storage[key];
-        } else if(key.substring(0, 3) === "jr-") // Get the user's stylesheets
+        } else if(key.substring(0, 3) === "jr-") { // Get the user's stylesheets 
+            console.log(key);
             stylesheetObj[key.substring(3)] = storage[key];
+        }
     }
 }
 
@@ -230,8 +233,24 @@ function styleListOnClick() {
 
 // The stuff to fire after the stylesheets have been loaded
 function continueLoading() {
+    if(typeof stylesheetObj[darkStylesheet] === "undefined") {
+        // If the dark theme isn't found, add it
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', chrome.extension.getURL(darkStylesheet), true);
+        xhr.onreadystatechange = function() {
+            if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
+                // Save the file's contents to our object
+                stylesheetObj[darkStylesheet] =  xhr.responseText;
+                 // Save it to Chrome storage
+                setStylesOfStorage();
+            }
+        }
+        xhr.send();
+    }
+
     // Get the currently used stylesheet
     chrome.storage.sync.get('currentTheme', function(result) {
+
         var currTheme = result.currentTheme || defaultStylesheet;
 
         // Based on that object, populate the list values
@@ -256,13 +275,14 @@ function continueLoading() {
             li.innerHTML += stylesheet;
 
             // Lock the default-styles.css file (prevent deletion)
-            if(stylesheet === defaultStylesheet) {
+            if(stylesheet === defaultStylesheet
+            || stylesheet === darkStylesheet) {
                 defaultLiItem = li;
                 liClassList.add("locked");
             }
 
-            // Make the first one active
-            if(count === 0) {
+            // Make the current one active
+            if(stylesheet === currTheme) {
                 liClassList.add("active");
                 var fileName = li.textContent;
                 editor.setValue(stylesheetObj[fileName] === undefined ? "" : stylesheetObj[fileName], -1);

required-styles.css

@@ -195,7 +195,7 @@
     .jr-tooltip {
         display: none !important;
     }
-    * { overflow: auto !important; }
+    *:not(.simple-title *) { overflow: auto !important; }
     @page :first { margin-top: 0; }
 }