How do i Change color theme of snap?

[danidanijr]

Is there way how to change the color theme of snap (flat/default) mode?

example:

changeTheme(255, 0, 0) =

(its mspaint'ed, it looks bad lol)

[legoman3.14]

If you shift click the Snap logo,

, you can enter Dev mode, and when you right click a morph (anything on screen), you can change its color. However, I don't now of any way to save these, besides running your own version of Snap.

[danidanijr]

Is there how to change the color with javascript ?

[helicoptur]

Just modify IDE_Morph.prototype.setFlatDesign.

[danidanijr]

@helicoptur

IDE_Morph.prototype.setFlatDesign.

and where is that?

[helicoptur]

It's referenced as IDE_Morph.prototype.setFlatDesign in memory.
Edit: Whoops wrong image haha

[danidanijr]

this didnt do anything, i wonder why

edit: oh hold on, i hovered on something and uh

(it was IDE_Morph.prototype.frameColor that i changed)

[ego-lay_atman-bay]

just modify

IDE_Morph.prototype.setFlatDesign = function () {
    MorphicPreferences.isFlat = true;
    SpriteMorph.prototype.paletteColor = WHITE;
    SpriteMorph.prototype.paletteTextColor = new Color(70, 70, 70);
    StageMorph.prototype.paletteTextColor
        = SpriteMorph.prototype.paletteTextColor;
    StageMorph.prototype.paletteColor = SpriteMorph.prototype.paletteColor;
    SpriteMorph.prototype.sliderColor = SpriteMorph.prototype.paletteColor;

    IDE_Morph.prototype.buttonContrast = 30;
    IDE_Morph.prototype.backgroundColor = new Color(220, 220, 230);
    IDE_Morph.prototype.frameColor = new Color(240, 240, 245);

    IDE_Morph.prototype.groupColor = WHITE;
    IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor;
    IDE_Morph.prototype.buttonLabelColor = new Color(70, 70, 70);
    IDE_Morph.prototype.tabColors = [
        IDE_Morph.prototype.frameColor,
        IDE_Morph.prototype.frameColor.lighter(50),
        IDE_Morph.prototype.groupColor
    ];
    IDE_Morph.prototype.rotationStyleColors = IDE_Morph.prototype.tabColors;
    IDE_Morph.prototype.appModeColor = IDE_Morph.prototype.frameColor;
    IDE_Morph.prototype.scriptsPaneTexture = null;
    IDE_Morph.prototype.padding = 1;

    SpriteIconMorph.prototype.labelColor
        = IDE_Morph.prototype.buttonLabelColor;
    CostumeIconMorph.prototype.labelColor
        = IDE_Morph.prototype.buttonLabelColor;
    SoundIconMorph.prototype.labelColor
        = IDE_Morph.prototype.buttonLabelColor;
    TurtleIconMorph.prototype.labelColor
        = IDE_Morph.prototype.buttonLabelColor;

    SyntaxElementMorph.prototype.contrast = 25;
    ScriptsMorph.prototype.feedbackColor = new Color(153, 255, 213);
};

then run

this.parentThatIsA(IDE_Morph).flatDesign()

for example,

note: you should keep a backup of the project before running it.

[danidanijr]

@ego-lay_atman-bay

this.parentThatIsA(IDE_Morph).flatDesign()

ah thanks.
By the way, how do i make a block which reports that im on flat mode?

Using flat mode = returns true
Using default mode = returns false

[danidanijr]

Ah, theres a problem that have this white borders of 1px, Is there how to fix it?

[ego-lay_atman-bay]

oh, that is

IDE_Morph.prototype.backgroundColor

[danidanijr]

@ego-lay_atman-bay

IDE_Morph.prototype.backgroundColor

Thanks, Now i made dark themed flat mode, Here how it looks like:

Code:

IDE_Morph.prototype.setFlatDesign = function () {
    MorphicPreferences.isFlat = true;
    SpriteMorph.prototype.paletteColor = new Color(30, 30, 30);
    SpriteMorph.prototype.paletteTextColor = new Color(70, 70, 70);
    StageMorph.prototype.paletteTextColor
        = SpriteMorph.prototype.paletteTextColor;
    StageMorph.prototype.paletteColor = SpriteMorph.prototype.paletteColor;
    SpriteMorph.prototype.sliderColor = SpriteMorph.prototype.paletteColor;

    IDE_Morph.prototype.buttonContrast = 30;
    IDE_Morph.prototype.backgroundColor = new Color(220, 220, 230);
    IDE_Morph.prototype.frameColor = new Color(0, 0, 0);
    IDE_Morph.prototype.backgroundColor = new Color(0, 0, 0);

    IDE_Morph.prototype.groupColor = new Color(20, 20, 20);
    IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor;
    IDE_Morph.prototype.buttonLabelColor = new Color(240, 240, 240);
    IDE_Morph.prototype.tabColors = [
        IDE_Morph.prototype.frameColor,
        IDE_Morph.prototype.frameColor.lighter(50),
        IDE_Morph.prototype.groupColor
    ];
    IDE_Morph.prototype.rotationStyleColors = IDE_Morph.prototype.tabColors;
    IDE_Morph.prototype.appModeColor = IDE_Morph.prototype.frameColor;
    IDE_Morph.prototype.scriptsPaneTexture = null;
    IDE_Morph.prototype.padding = 1;

    SpriteIconMorph.prototype.labelColor
        = IDE_Morph.prototype.buttonLabelColor;
    CostumeIconMorph.prototype.labelColor
        = IDE_Morph.prototype.buttonLabelColor;
    SoundIconMorph.prototype.labelColor
        = IDE_Morph.prototype.buttonLabelColor;
    TurtleIconMorph.prototype.labelColor
        = IDE_Morph.prototype.buttonLabelColor;

    SyntaxElementMorph.prototype.contrast = 25;
    ScriptsMorph.prototype.feedbackColor = new Color(153, 255, 213);
};

[ego-lay_atman-bay]

@danidanijr

By the way, how do i make a block which reports that im on flat mode?

Using flat mode = returns true
Using default mode = returns false

well, the getters and setters library already has that, in the

(setting [Flat design v] :: sensing)

reporter

and if you really want the js code to get it, here it is.

return MorphicPreferences.isFlat

[danidanijr]

whats an op?

edit: done, i did it

[ego-lay_atman-bay]

or just edit the title

[ego-lay_atman-bay]

just go into the gui.js file (in the src folder) and then find the function IDE_Morph.prototype.setFlatDesign and then edit that function to make your own theme. The code is exactly like what I posted, heck, I copied the code from the source code.