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! End goal:

  • Allow the user to change colors/theme (anyone dreaming of a light theme?)
  • Allow the user to change fonts
  • Allow the user to change the layout

The first step to unlocking user styling is to make it easier for users to override the default style. This was easy since the editor actually already has support for loading a user css on top of the default css. Here’s how:

  • Create a .defold folder in your user home folder
  • Create a editor.css file in the .defold folder

That’s it! The editor will load the default css and then look for and load the $user.home/.defold/editor.css. Definitions in the editor.css will override the defaults.

Changing colors

Previous versions of the Defold editor used Sass variables to inject color definitions into the generated style sheet. This made it impossible to change editor colors without basically replacing the entire editor css. The new version the editor, released earlier today, uses css color variables instead. This makes it possible to define the colors in a single global definition and reference them throughout the stylesheet. The current color definitions can be seen here:

The basic theme is divided into three groups of colors (with darker and lighter variants):

  • Background color - background color in panels, windows, dialogs
  • Component color - buttons, scroll bar handles, text field outlines
  • Text color - text and icons

If you feel a bit blue then try this in your editor.css:

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

51

If you try this you’ll notice that most of the UI follow the rules outlined above with the three color groups background, components and text, but not 100%! There are two noticeable areas which doesn’t adhere to the css:

  • The scene/code view
  • The log/console

These two areas are not rendered using JavaFX. Instead they use a more direct OpenGL approach to improve performance.

To fix this we need to read color definitions from the css and use those in the custom views used by the scene/code view and the log/console.

Changing fonts

This is unfortunately trickier as we can’t use the CSS variables to define fonts in a single place (only colors and numbers are supported in JavaFX). The editor uses two fonts: Dejavu Sans Mono for code and mono spaced text (errors) and Source Sans Pro for the rest of the UI. The font definitions are mainly found in _typography.scss:

The main font is defined in a root element which makes it quite easy to replace the font in most places though:

@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

.root {
    -fx-font-family: "Architects Daughter";
}

This will result in this good looking editor :laughing: :

17

Besides a few places where light and italic versions of Source Sans Pro are used you’ll mostly get your custom font from the simple change above. Note that I’m loading a web font from Google Fonts. It’s also possible to load a local font (from .defold folder):

@font-face {
  font-family: 'Comic Sans MS';
  src: local("cs.ttf");
}

.root {
  -fx-font-family: 'Comic Sans MS';
}

Again, you’ll also notice that the code editor and console aren’t affected by any CSS change to fonts. To enable a change of code editor font we need to read font styling and apply that when the custom views are created, in the same way as with the colors.

Changing font size

It is also possible to change the default font size:

.root {
    -fx-font-size: 13px;
}

Summary and next steps

This is the first step towards a more user styling friendly editor, but there’s still a long way to go. Next steps:

  • Additional color cleanup.
    • A few elements aren’t assigned colors from the right group (some buttons use the background colors instead of the component colors).
    • Trim down the number of colors if possible. There are five background shades and five component shades. We can probably get rid of some of them.
    • Some UI elements aren’t using consistent mouse over/hover and selected styles and are sometimes lacking a mouse over effect completely
  • Color adjustments
    • The color cleanup has resulted in some minor changes in the color scheme from previous versions. There may be areas that need increased contrast or where the current scale of colors need to be adjusted slightly to improve readability etc.
  • Code editor font change
    • Read font style on code view creation and use it when rendering the code view

Much of the above lends itself very well to user contributions. If you like to help out please let us know!

24 Likes

I can finally add Defold to the list of programs that I added comic sans to for no good reason!

All jokes aside, I’m really excited to see more work done on editor customization and the editor in general!

Here’s the editor.css I used:

@font-face {
  font-family: 'Comic Sans MS';
  src: local("cs.ttf");
}

.root {
  -fx-font-family: 'Comic Sans MS';
}
5 Likes

Excellent! This was on my list of things to do! :slight_smile:

Did you put the cs.ttf in .defold/?

4 Likes

Yeah

3 Likes

CSS to make file and objects trees look more compact:

.tree-cell:filled {
    /* Default: -fx-padding: 5; */
    -fx-padding: 2;
}

Before:

After:

16 Likes

How do we enable the CSS debugger? I think there is one?

The above snippet is a winner. Should be in the default CSS for sure. It does introduce some issues in the dialogs I think but so worth it to manually fix those minor issues.

2 Likes

What you can do if you are building the editor locally is to reload the css while the editor is running. This makes it very easy to iterate on the stylesheet. Some more info here:

(I will update the readme with info from this thread as well)

4 Likes

Such an amazing possibility! :heart:

3 Likes

I’d like to see/make a light theme and some code in the editor that toggles it based on macOS system theme

4 Likes

Any light theme reference you enjoy? I’ll try making some.

Could make one that looks like the forum’s theme. :joy:

3 Likes

Here’s a start for a light theme. Should be reasonable for us to make theme packs once all of the editor can be themed.

12 Likes

I personally like Nushu: https://github.com/wheredoesyourmindgo/nushu-vscode-theme

I find it the right color temperature balance not to blast me with too much white light.

Another good one is Solarized Light (though I prefer Nushu, since Solarized is a bit too yellow): https://ethanschoonover.com/solarized/

1 Like

I like the way Solarized uses the same 16 color palette for both light and dark theme!

2 Likes

Made a nice dark theme to fit with Garuda Linux’s default theme:


I look forward to the day when the code editor and all other panes are customizable!


editor.css
* {
		-df-background-darker:    derive(#282c34, -10%);
		-df-background-dark:      derive(#282c34, -5%);
		-df-background: 					rgb(22,25,37);
		-df-background-light:     derive(rgb(22,25,37), 5%);
		-df-background-lighter:   derive(rgb(22,25,37), 10%);

		-df-component-darker:     derive(#1e2233, -20%);
		-df-component-dark:       derive(#1e2233, -10%);
		-df-component:            #1e2233;
		-df-component-light:      derive(#1e2233, 10%);
		-df-component-lighter:    derive(#1e2233, 20%);

		-df-text-dark:            derive(#d3dae3 -10%);
		-df-text:									#d3dae3;
		-df-text-selected:        derive(#d3dae3, 20%);

		// Red
		-df-defold-red-dark:     	derive(#ff473c, -10%);
		-df-defold-red:        		#ff473c;
		-df-defold-red-light:    	derive(#ff473c, 10%);

		// Yellow
		-df-defold-yellow-dark:    derive(#fec021, -10%);
		-df-defold-yellow:         #fec021;
		-df-defold-yellow-light:   derive(#fec021, 10%);
		-df-defold-yellow-lighter: derive(#fec021, 20%);

		// Green
		-df-defold-green-dark:   	derive(#00b147, -10%);
		-df-defold-green:        	#00b147;
		-df-defold-green-light:  	derive(#00b147, 10%);
		-df-defold-green-lighter:	derive(#00b147, 20%);

		// Orange
		-df-defold-orange-dark:  	derive(#d38122, -10%);
		-df-defold-orange:       	#c50ed2;
		-df-defold-orange-light: 	derive(#d38122, 10%);

		// Blue
		-df-defold-blue-dark:    	derive(#0088ff, -10%);
		-df-defold-blue:         	#0088ff;
		-df-defold-blue-light:   	derive(#0088ff, 10%);
		-df-defold-blue-lighter: 	derive(#0088ff, 20%);
}

@font-face {
  font-family: 'FiraSans-Regular';
  src: local("FiraSans-Regular.ttf");
}

.root {
  -fx-font-size: 14px;
  -fx-font-family: 'FiraSans-Regular';
}

.tree-cell:filled {
  -fx-padding: 2;
}

Here’s a zip with both the editor.css and the font (Fira Sans). Put both in your .defold:
Sweetified-Defold.zip (198.2 KB)

6 Likes

I am working on a PR to add a Code editor font setting as a user preference. Just look at this lovely thing:

10 Likes

:star_struck:

3 Likes

This feature has been merged and should be available in an editor update.

5 Likes

Thanks a lot!
Looking forward to trying this with Consolas…

1 Like

Downloaded and tested 1.2.180 right now. It works.
Thank you again.

1 Like

Hello, thanks all for making the editor UI more flexible. I managed to make the UI fonts smaller and also implemented @aglitchman’s compact object trees.

I’d also like to make the left/Assets pane’s minimum width a tad smaller, since now I have some space I can recover.

I had a look at the source CSS files to see if I could glean which tag to change. But although I changed a few of the -fx-min-width for some tags (split-pane and titled-pane I think) I didn’t manage to make the desired change.

If it’s not a trouble, can anyone point me in the right direction?

Thanks in advance and thanks again!