8 سال پیش · 2e4076bb75
--- a/src/web/Manager.js
+++ b/src/web/Manager.js
@@ -154,6 +154,7 @@ Manager.prototype.initialiseEventListeners = function() {
 
															     this.addDynamicListener(".option-item input[type=number]", "keyup", this.options.numberChange, this.options);
														
 
															     this.addDynamicListener(".option-item input[type=number]", "change", this.options.numberChange, this.options);
														
 
															     this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options);
														
 
															+    document.getElementById("theme").addEventListener("change", this.options.themeChange.bind(this.options));
														
 
															     // Misc
														
 
															     document.getElementById("alert-close").addEventListener("click", this.app.alertCloseClick.bind(this.app));
														
--- a/src/web/OptionsWaiter.js
+++ b/src/web/OptionsWaiter.js
@@ -131,4 +131,14 @@ OptionsWaiter.prototype.setWordWrap = function() {
 
															     }
														
 
															 };
														
 
															+
														
 
															+/**
														
 
															+ * Changes the theme by setting the class of the <html> element.
														
 
															+ */
														
 
															+OptionsWaiter.prototype.themeChange = function (e) {
														
 
															+    var themeClass = e.target.value;
														
 
															+
														
 
															+    document.querySelector(":root").className = themeClass;
														
 
															+};
														
 
															+
														
 
															 export default OptionsWaiter;
														
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -211,6 +211,13 @@
 
															                     </div>
														
 
															                     <div class="modal-body" id="options-body">
														
 
															                         <p style="font-weight: bold">Please note that these options will persist between sessions.</p>
														
 
															+                        <div class="option-item">
														
 
															+                            <select option="theme" id="theme">
														
 
															+                                <option value="classic">Classic</option>
														
 
															+                                <option value="dark">Dark</option>
														
 
															+                            </select>
														
 
															+                            <label for="theme"> Theme </label>
														
 
															+                        </div>
														
 
															                         <div class="option-item">
														
 
															                             <input type="checkbox" option="update_url" id="update_url" checked />
														
 
															                             <label for="update_url"> Update the URL when the input or recipe changes </label>
														
--- a/src/web/index.js
+++ b/src/web/index.js
@@ -46,6 +46,7 @@ var main = function() {
 
															         errorTimeout      : 4000,
														
 
															         autoBakeThreshold : 200,
														
 
															         attemptHighlight  : true,
														
 
															+        theme             : "classic",
														
 
															     };
														
 
															     document.removeEventListener("DOMContentLoaded", main, false);
														
--- a/src/web/stylesheets/themes/_dark.css
+++ b/src/web/stylesheets/themes/_dark.css
@@ -14,6 +14,7 @@ popovers
 
															 toggle-string dropdowns
														
 
															 alerts
														
 
															 loading-file background
														
 
															+option text for inputs is invisible
														
 
															 */
														
 
															 :root.dark {