Eclipse on JavaFX – Get Dark – The power of JavaFX CSS


This is just a short post based on a question I received on twitter: Can one use JavaFX CSS to theme the IDE? Answer: Of course you can! I don’t know myself why people like the dark themes so much but well some do and making your IDE go black with SWT on JavaFX is no more than those 5 lines of CSS:

.root {
    -fx-base: rgb(50, 50, 50);
    -fx-background: rgb(50, 50, 50);
    -fx-control-inner-background:  rgb(50, 50, 50);
}

and you get this

screen_black

use that

.root {
    -fx-base: #7eaacc;
    -fx-background: #7eaacc;
    -fx-control-inner-background: white;
}

and you get

screen_blue

Not everything is perfectly ok because it looks like some parts of the IDE are setting their color in SWT anyways I think it shows the power of JavaFX CSS. Imagine what a real designer could do to your (commercial) IDE if it gets based on SWT on JavaFX.

I think the SWT CSS people can learn some bits from this. JavaFX derives ALL colors e.g. that the tree-text-color is white from those 3 values!

BTW the file displayed in the center has approximately 10 000 lines of code and it scrolls instantly – more on that in another post.

Anyways that’s it for today!

About these ads

6 Responses to “Eclipse on JavaFX – Get Dark – The power of JavaFX CSS”

  1. Will you please give us a readymade theme or step-by-step tutorial to achieve something like http://blog.macsales.com/wp-content/uploads/2012/06/OWC_photoshop_cs6_on_retina.jpg? I downloaded Luna M6 for Win7 to try the dark theme but nothing was visible in the editor.

    • What you see at this point is a pre-alpha version of SWT – we are far away from a point in time to get something stable

  2. Hi Tom,

    I think you need to update you blog entry, because it would be a great magic to get two different looking UI’s with the same CSS. That’s something like product-management would like to have but I think that’s not possible. ;-)

    Regards
    René

    P.S.: Sorry that I didn’t find a lot of time in the last couple of weeks to help you more on swt_on_fx, but it’s great to see that the StyledText seems to work now.

  3. Good to see you in Action! :-) I personally would love to see Eclipse on FX. Maybe there is only one thing missing: The window decorations. I’m no designer, so I have no idea, what the correct approach would be, but I think a custom decoration (to match the overall theme) would be plausible, don’t you thik?

    What do you thing how far is your port? Some firends of mine maintain an (older) application based on Eclispe RCP (an obscure mixture of 3.x and 4.x) and use a lot of Eclipse Forms – would they already work properly on SWT_on_JavaFX?

    Regards,
    Daniel

    • I’m not yet sure forms will work – this all is a step by step process – we now have a fairly complete SWT implementation and have to work on a bug by bug base to get this thing more stable. This all is pre alpha work. On the window decoration I agree – this would need to be replace by a custom rendering!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 708 other followers

%d bloggers like this: