UI update
Inland Ocean now has UI settings:
Themes: light & dark
Fonts: serif (georgia), sans serif (arial), OpenDyslexic
Font sizes
If you're interested in sugarcube code things, keep reading.
So I have a pretty good background in programming, but I'm still learning how to use sugarcube, which means reading the docs and reading guides.
Something I noticed about both the docs and Idrelle's guide, which seems to based on the docs, is that they don't take advantage of certain tools that allow for greater flexibility in the implementation they use. Namely, having a different "handler" function for each setting is not necessary.
By setting up a couple things--a wrapper function, dictionaries for each setting, and a switch statement in a general "styleHandler"--it's fairly simple to create a one-size-fits all handler function. It's not more efficient computationally, but it's neater and uses less lines of code than having a handler for every setting. It also makes it take, in my opinion, marginally less work to add new settings. There's probably ways to simplify it further.
Implementation below. I wish tumblr had code formatting.
const themes = { "Dark (default)": "", "Light": "theme-light" }; const fonts = { "Serif (default)": "", "Sans Serif": "font-sans-serif", "OpenDyslexic": "font-dyslexic" }; const text_sizes = { "Very small": "font-xs", "Small": "font-s", "Medium": "", "Large": "font-l", "Very large": "font-xl" }; var styleHandler = function(x) { let html = $("html"); let property = null; let curr = null; switch (x) { case "theme": property = themes; curr = settings.theme; break; case "font": property = fonts; curr = settings.font; break; case "text_size": property = text_sizes; curr = settings["text size"] break; default: throw new Error(`getStyleHandler given invalid string ${x}`); break; } html.removeClass(Object.values(property).join(" ")); if (property[curr]) { html.addClass(property[curr]); }; }; var getStyleHandler = function(x) {return function() {styleHandler(x)}}; //wrapper function for styleHandler Setting.addList("theme", { label: "Select a theme:", list: Object.keys(themes), onInit: getStyleHandler("theme"), onChange: getStyleHandler("theme") }); Setting.addList("font", { label: "Select a font:", list: Object.keys(fonts), desc: "(OpenDyslexic will affect font size)", onInit: getStyleHandler("font"), onChange: getStyleHandler("font") }); Setting.addList("text size", { label: "Select text size:", list: Object.keys(text_sizes), default: "Medium", onInit: getStyleHandler("text_size"), onChange: getStyleHandler("text_size") });

















