Please add a "dark design" option in the editor!

Feature Requests Snap! Feature Requests
1

We even already have a userscript for this! I've turned it into a

bookmarklet

javascript:void eval("!function(){const e=['!function(){"use strict";function e(e){return e.replace("MorphicPreferences.isFlat","MorphicPreferences.isLight")}function n(n){var t=e(new Function("return "+n)().toString());new Function(n+" = "+t)()}MorphicPreferences.isLight=MorphicPreferences.isFlat,IDE_Morph.prototype.darkDesign=function(){this.setDarkDesign(),this.refreshIDE()},IDE_Morph.prototype.lightDesign=function(){this.setLightDesign(),this.refreshIDE()},n("IDE_Morph.prototype.createLogo"),n("IDE_Morph.prototype.createControlBar"),n("IDE_Morph.prototype.createCategories"),n("IDE_Morph.prototype.createSpriteBar"),n("IDE_Morph.prototype.createCorralBar");var t=e(IDE_Morph.prototype.setDefaultDesign.toString()),r=e(IDE_Morph.prototype.setFlatDesign.toString());const i=new Function("IDE_Morph.prototype.setDarkDesign = "+t),o=new Function("IDE_Morph.prototype.setLightDesign = "+r);i(),o(),IDE_Morph.prototype.setFlatDesign=function(){MorphicPreferences.isFlat=!0,IDE_Morph.prototype.scriptsPaneTexture=null},IDE_Morph.prototype.setDefaultDesign=function(){MorphicPreferences.isFlat=!1,IDE_Morph.prototype.scriptsPaneTexture=this.scriptsTexture()},console.log("Injecting menu items");var s=IDE_Morph.prototype.settingsMenu.toString().split("\\n addPreference(\\n \'Flat design\',\\n () => {\\n if (MorphicPreferences.isFlat) {\\n return this.defaultDesign();\\n }\\n this.flatDesign();\\n },\\n MorphicPreferences.isFlat,\\n \'uncheck for default\\\\nGUI design\',\\n \'check for alternative\\\\nGUI design\',\\n false\\n );");s.splice(1,0," addPreference(\\n \'Flat design\',\\n () => {\\n if (MorphicPreferences.isFlat) { return this.defaultDesign();\\n }\\n this.flatDesign();\\n }, MorphicPreferences.isFlat,\\n \'uncheck for default\\\\nGUI design\', \'check for alternative\\\\nGUI design\',\\n false\\n );\\n\\taddPreference(\\n \'Dark Design\',\\n () => {\\n if (MorphicPreferences.isLight) {\\n return this.darkDesign();\\n }\\n this.lightDesign();\\n },\\n !MorphicPreferences.isLight,\\n \'uncheck for default\\\\nGUI design\',\\n \'check for alternative\\\\nGUI design\',\\n false\\n );");var p=s.join("");new Function("IDE_Morph.prototype.settingsMenu = "+p)()}();'],n=[[[],[]]],t="0.2003274161194426-1662169419886-userscripts-ran",r=e.length;function i(e,n){const[t,r]=e;for(const e of r)if(o(e,n))return!1;for(const e of t)if(o(e,n))return!0;return 0===t.length}function o(e,n){let t;return t=e.startsWith("/")&&e.endsWith("/")?new RegExp(e.slice(1,-1)):function(e){let n=e;for(let e=0;e<s.length;e++){const t=s[e],r=c[e];n=n.replace(r,"\\"+t)}return new RegExp("^"+n.replace(/\/g,".")+"$","i")}(e),t.test(n)}const s=["\\",".","+","?","^","$","(",")","[","]","{","}","|"],c=s.map((e=>new RegExp("\\"+e,"g")));!function(){if(!window[t]||confirm("Are you sure you want to run the userscripts again?")){window[t]=!0,window.isRunningAsBookmarkletUserscript=!0;for(let t=0;t<r;t++){const r=e[t];if(i(n[t],location.href))try{window.eval(r)}catch(e){console.error(e)}}delete window.isRunningAsBookmarkletUserscript}}()}();")

with a program, but it sucks manually having to press it everytime i want to use flat design

So please, add a "dark design" option that you can press if you want dark mode/light mode for both the regular design editor and flat design editor

2

To clarify, you’re asking for a dark mode version of the flat design?

3

well yes

4

You don't mean to change the colors on the stage, right? Just the scripting area and palette and so on? It's not out of the question, but Jens doesn't like having a lot of options that have to be checked every time anything is drawn, because it slows Snap! down. So I advise not holding your breath. ;~)

5

I personally think there should just be a dialog to customize the appearance. That way, we can actually remove one option, as well as adding way more sustomization.

6

I don't understand. You want people to write their own redisplay code?

If it's just a choice from some combinations of features, I think

∘ dark       ∘ light
--------------------------
∘ flat       ∘ not ugly

would be more understandable than

🔳 dark, not ugly
🔳 dark, flat
🔳 light, not ugly
🔳 light, flat

and as you add options, the radio button display grows linearly in the number of choices, whereas the checkbox display grows exponentially. So this hypothetical dialog might be easier for users to control, but not any easier for the redisplay code, which has to check each option, slowing down something that's inherently slow to begin with.

7

It shouldn't take any longer than it does now, because when you hit ok on the dialog, it would just set the variables that already exist, then it runs the refresh code.

8

Right now there's one variable to check, and you want to add another. The issue isn't with the UI for picking your skin; you only do that once, so it can take as long as it wants. But redisplaying everything happens, what, 20 times a second? So it has to be fast.

9

Personally, I'm not really opposed to adding a flat dark mode similar to the one @ego-lay_atman-bay has pulled off in the past. There isn't really any technical challenge or performance cost to this, but it does lead to yet more diverging display styles which might confuse learners even more, especially if their preferences don't match the published materials. You've got to keep in mind that screen shots of Snap! are now found in many online courses and also in many printed (school) books around the world. And also don't forget that it's not just learners but also educators who need to be assured that their materials are up to date and that they, too, shouldn't be irritated if what they see students use in class doesn't match their own materials, especially if they need to help students whose projects "don't work" for some reason. In such a situation it can be a severe downside if users all have diverging visual display preferences.

TL;DR: I'm considering adding a flat dark mode, but - as Brian said - don't hold your breath.

Also question: When I first implemented "flat" design mode I did it by following the "official" design rules for "flat-ness", which at the time held their nose about rounded corners. How do you feel about those?

10

Why do you always say flat design is ugly?

11

Light mode :face_vomiting:
Dark mode is easier on the eyes.

12

Yeah, mainly because of the white background, but the flat blocks are... boring, I guess. When you drag a non-flat block it feels as if you're moving actual physical blocks around, but flat blocks feel like pictures of blocks, without that physicality.

13

I really like the flat design. Personally, I think that the non-flat design is weird and blobby, with an odd colour scheme and lines in odd places.

14

i like flat design, dont get me wrong, but i the white design just hurts my eyes

okay

15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.