Editor color 2021

[simon-lucas]

Hi. I want to try out Defold, but I cannot read the interface. I’d like to change it to use a light background with contrasting text. Some older posts mention using css, but I cannot find out where the css is. Mac OS - and I’ve looked inside the app package.

I’ve seen screengrabs of Defold where editing the UI was possible through the prefs panel, but that no longer seems to be the case…

I assume that if I switch to my normal TextEdit2, I will lose the defold code completions feature?

Any ideas please?

[britzl]

The editor styling is done through JavaFX CSS files. The process was initially described here:

Experiments with editor styling using JavaFX CSS

The defold editor is created using Java/Clojure with JavaFX for its UI* and JavaFX CSS for styling. We use Sass to generate the final stylesheet(s) used by the editor with the various bits of the stylesheet defined here: This solution works really well, but it is difficult for a user to change the styling of the editor. I’ve slowly started working towards a setup that is more user styling friendly and I’m presenting the first step on this journey and I invite you to help out if you want to! E…

And I’ve added it as a page in the manual here:

Editor styling

[simon-lucas]

Thank-you for the reply.
Have I got this wrong? Because when I use this

* {
	-df-background-darker:    derive(#0a0a42, -10%);
	-df-background-dark:      derive(#0a0a42, -5%);
	-df-background:           #ffffff;
	-df-background-light:     derive(#0a0a42, 10%);
	-df-background-lighter:   derive(#0a0a42, 20%);
}

the only thing that changes to white is the border around all the panels. Is there a way to change the panels’ content backgrounds? For example the script editor panel text background? And possibly things like the Assets list background? I find these dark backgrounds hard to read from…

[britzl]

@simon-lucas

-df-background

You only changed this value. The other color variations like -df-background-dark and -df-background-light are still based on another color value #0a0a42. You need to change all of them:

* {
	-df-background-darker:    derive(#ffffff, -10%);
	-df-background-dark:      derive(#ffffff, -5%);
	-df-background:           #ffffff;
	-df-background-light:     derive(#ffffff, 10%);
	-df-background-lighter:   derive(#ffffff, 20%);
}

[kornyushin]

Hi, try my light scheme

.tree-cell:filled {
    /* Default: -fx-padding: 5; */
    -fx-padding: 2;
}
* {
	-df-background-darker:    derive(#dddddd, -10%);
	-df-background-dark:      derive(dddddd);
	-df-background:           #dddddd;
	-df-background-light:     derive(#dddddd, 40%);
	-df-background-lighter:   derive(#dddddd, 80%);
	
	// Component
	-df-component-darker:     derive(#dddddd, -20%);
	-df-component-dark:       derive(#dddddd, -10%);
	-df-component:            #dddddd;
	-df-component-light:      derive(#dddddd, 10%);
	-df-component-lighter:    derive(#dddddd, 20%);

	// Text & icons
	-df-text-dark:            derive(#000000, -10%);
	-df-text:                 #000000;
	-df-text-selected:        derive(#000000, 20%);
}

Editor looks like

For code editor I use Visual studio code with light scheme as well , it has code completion and lua highliting

[simon-lucas]

Thank-you. I thought they referred to some darken/lightne function that i ws not aware of…

That’s great I can see how to work it now.

[simon-lucas]

Brilliant. That’s very helpful. Thanks for sharing.