diff --git a/src/web/Manager.js b/src/web/Manager.js index 28b9f93a..3918aa29 100755 --- 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)); diff --git a/src/web/OptionsWaiter.js b/src/web/OptionsWaiter.js index d7c89eb6..0149b3cd 100755 --- 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 element. + */ +OptionsWaiter.prototype.themeChange = function (e) { + var themeClass = e.target.value; + + document.querySelector(":root").className = themeClass; +}; + export default OptionsWaiter; diff --git a/src/web/html/index.html b/src/web/html/index.html index 9da30f7c..44a30770 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -211,6 +211,13 @@

Please note that these options will persist between sessions.

+
+ + +
diff --git a/src/web/index.js b/src/web/index.js index df454152..8be390b6 100755 --- 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); diff --git a/src/web/stylesheets/themes/_dark.css b/src/web/stylesheets/themes/_dark.css index fb1e7fcb..ffc9099d 100644 --- 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 {