Added option to change the theme.

This commit is contained in:
n1474335 2017-04-25 00:21:38 +01:00
parent d71ac2e894
commit 2e4076bb75
5 changed files with 20 additions and 0 deletions

View File

@ -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));

View File

@ -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;

View File

@ -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>

View File

@ -46,6 +46,7 @@ var main = function() {
errorTimeout : 4000,
autoBakeThreshold : 200,
attemptHighlight : true,
theme : "classic",
};
document.removeEventListener("DOMContentLoaded", main, false);

View File

@ -14,6 +14,7 @@ popovers
toggle-string dropdowns
alerts
loading-file background
option text for inputs is invisible
*/
:root.dark {