New in 10.2.2: Dark IDE Theme!

Posted by on in Blogs

In Delphi and C++Builder 10.2.2, we've added a commonly requested and exciting new feature: a dark IDE theme.

Many productivity tools, or tools that are used for many hours in a row - and RAD Studio certainly falls into that category - offer a dark theme. Why?

  • Many people find it reduces eye strain, and so a dark theme is easy on the eyes and great when using an IDE for hours on end
  • If you work in the evening, a dark theme reduces the amount of light, useful for health
  • It looks cool.

We're very excited to have this feature in 10.2.2. Let's have a look!

Welcome to 10.2.2!

When you start the IDE the very first time after installing, you'll be greeted with this new Welcome dialog.  We want to let you personalize the IDE a little right from the beginning, and so this dialog says hello and invites you to make some common tweaks.  The very first one is to choose your theme:

Of course, you can change the theme at any time (more on this below).

The second page gives you a few common settings:

One of the results from this year's developer survey is that 30% of our users don't use source control at all.  While we're very glad that 70% of you do, we do want to promote good coding practices and also assist you in using our IDE integration for source control.  So this dialog allows you to set up source control right here from the very start of using 10.2.2.

There are also a number of common settings users often configure: to autosave files and layout, to show the classic component toolbar, and to choose the default project location.  This is where projects are saved to by default (create a new project, save - the folder that dialog opens to) and is also used when clicking the Open button.  It's very common for people to have their own favourite location - the root folder for their source control checkout, for example.  I personally have all my projects on a shared drive, shared between all my VMs.

You can also open the settings migration tool to move settings from an older version of the IDE, say if you have 10.1, XE8, or some other older installation.  This can bring across all of your IDE settings.

This dialog opens the very first time you run the IDE after installing, but you can re-display this dialog at any time via Help > Welcome Configuration.

Turning the dark theme on and off

There are two ways to toggle the dark theme: a fast way, and through the Options dialog.

Quick changes

The Desktop Layout toolbar has a new toolbar button to quickly toggle the dark theme on or off.  Click it to show a dropdown menu:

This also lets you change the editor colour scheme quickly as well, meaning you can change the IDE theme and editor scheme separately if you with.

You might notice that intriguing "Custom" option.  Let's look at that in the full Options, which you can access through the Tools > Options > Theme Manager, or clicking Options on the dropdown menu.

If you don't see this toolbar button, there's a small bug when you installed as an upgrade from 10.2.0 or 10.2.1.  Read this for how to make it visible.

Options > Theme Manager

Let's look at the options in detail.  In the Tools > Options dialog, there is a new Theme Manager section:

 

The items in the Desktop Layout toolbar's dropdown menu correspond to the Light, Dark and Custom radiobuttons here.  As well as also changing the theme, this dialog lets you customise what those mean.

In the past, before the IDE was themeable, several parts of the IDE could have their colours specified and customized in different ways.  The code editor is the obvious one, since it is common to change the editor syntax highlighting colour scheme. You can also change the Object Inspector's colours.

These settings allow you to define what light and dark mean: that is, define a pair of IDE theme and other colour schemes.  This means that when changing to the dark theme, it will also change the editor colour scheme - you don't want to change the IDE and still have an editor with a bright white background!

The light theme is the default on you're already used to from previous versions of the IDE.  The dark setting uses a new VCL theme (designed for us by DelphiStyles - they've done a great job.)  You can turn theming off entirely via the checkbox at the top: we don't recommend this, but if you want to, this is the Right Way to do it.  This makes the IDE look very old.  Don't ;)

Finally, that interesting-looking Custom setting.  We knew that once we supported theming the IDE, the very first question people would ask is, "Can I use a custom theme?" This setting allows you to do that.  Choose an installed VCL style in the combo box, and you can use that scheme.  It is important to note that this is not supported.  We only support the Light and Dark themes.  We have no control over what the IDE looks like or how it behaves when using a custom style; the setting is there because we know that many people will want to try it.

Code editing and form designing

When form designing, both the VCL and FMX form designers are unstyled.  They remain looking exactly as they did.  This is important because when designing, you want to design and see your form as it will look when running.

We also have a new dark / charcoal editor colour scheme, and this is the new default editor colour scheme associated with the Dark IDE theme.  This is designed to work well with the editor colours, as well as in low light.

Other items

A few elements of the IDE are not themed, even with the setting turned on.  These are areas implemented in .Net, or native Windows dialogs.  For example, the Open dialog is not themed because it belongs to Windows; it is not a VCL dialog.  However, the vast majority of the IDE, including all areas you will use most such as the form designer and majority of dockable panes, are themed.

Overview

Summary?  In 10.2.2, there's a new Dark IDE theme.  It also comes with a new editor colour scheme.  It has a charcoal look, easy on the eyes, great for multi-hour use.  It's a common customer request, and we think it looks fantastic.

We hope you find this addition as exciting and useful as we do!

 



About
Gold User, No rank,
C++ Product Manager, looking after C++Builder as well as the IDE.

Comments

  • tiger C40694
    tiger C40694 Tuesday, 2 January 2018

    I can't get the current version "10.2.1.10" of PAServer19.0.pkg after installing the C++builder 10.2.2. Where can I get it? Thanks.

  • Sarina D
    Sarina D Tuesday, 2 January 2018

    Hi,
    You can find it here C:\Program Files (x86)\Embarcadero\Studio\19.0\PAServer

    Regards,
    Sarina

  • Christophe L22760
    Christophe L22760 Thursday, 21 December 2017

    Hello, i like the dark theme but I would like to change 2 colors.

    * The color of the current active line in the editor to make it darker.

    * The color of the caption of the forms (If you look at the Welcome page Light/Dark exemples you will notice that in light mode "object inspector" header bar is gray and different, whereas in the Dark theme it is the same color as the properties background and difficult to see)

  • David Millington
    David Millington Thursday, 21 December 2017

    Thanks for the feedback. I agree, we can tweak both these.

  • Pierangelo D11003
    Pierangelo D11003 Tuesday, 19 December 2017

    With the latest update 2 (2004) the log event color are always ignored and painted as black and white :-(

  • David Millington
    David Millington Wednesday, 20 December 2017

    Ah - might be an artifact of how we handle the colours. Please file a QP and link it here, I'll look into it.

  • Shansi
    Shansi Thursday, 28 December 2017

    HI David Millington
    With the latest update 2 (2004)
    After testing, I found the same event color bug
    If the enable Theming
    The color set by the event color will be invalidated and will always be black
    If disabled Theming
    Event color will return to normal
    How can I solve this bug?

  • David Millington
    David Millington Tuesday, 16 January 2018

    It's a bug, so the colours only apply in the Light theme. Please file a QP report.

  • Anthony B54944
    Anthony B54944 Tuesday, 19 December 2017

    I really like the new Dark Color option. I am now using it - thank you!

  • David Millington
    David Millington Wednesday, 20 December 2017

    Great!

  • Al Taylor
    Al Taylor Saturday, 16 December 2017

    Hi David, its all Delphi! what happened to C++. Have you deserted us?
    Will our customers benefit from a smarter IDE. probably not! A better DataSnap, with a Linux compiler, Android Services from C++ Builder. Yes, for sure! But no. We get a dark theme. Perhaps its appropriate since were kept in the dark about where C++ Builder is heading (or NOT!). Come on David. Rally up! We do support your efforts, but focus on the end Customers needs, not ours. That's where the money comes from. Al

  • David Millington
    David Millington Monday, 18 December 2017

    Also, as always, everyone reading, please feel free to email me (firstname dot lastname at embarcadero.com) with feedback and info about what you need.

  • David Millington
    David Millington Monday, 18 December 2017

    We have definitely not deserted you! There are lots of C++ compiler and quality improvements in 10.2.2. Bigger things like Android services, Linux and IDE tooling are planned :)

  • Al Taylor
    Al Taylor Monday, 18 December 2017

    Ok, You did tell us you preferred to re-work the C++ compiler first. You kind of stopped communicating things C++ in the way you started out, and from a C++ Builder perspective, this makes me nervous. History! Maybe give the Road Map a tweak so we can see where we are going. As for disrupting your day by putting my childish outburst in a direct email, surely this is shameful enough!

  • David Millington
    David Millington Tuesday, 19 December 2017

    Emails are always welcome - really :)

    Stopped communicating things C++? In what way? I'm limited in what I can discuss publicly, but feedback on how things are perceived is always good, and we can try to address concerns.

  • Al Taylor
    Al Taylor Tuesday, 19 December 2017

    Its Christmas. its Ok to throw a tantrum if I didn't get what I wanted! The IDE is important to EMB. Its what you sell, but really, it works. Can we move 100 % of the effort into providing solutions for our customers, so we are successful and tell the world your tool set made us rich? If we could run a fast , stable C++ datasnap server on any platform, reliably communicating with continuously running C++ services on Mobile devices, we could build magic. Dark IDE! I just expected more!

  • unSigned
    unSigned Thursday, 14 December 2017

    @ Clinton J: where to get the Source Code Pro font and how to set it to IDE?

    I am using DIC and DITE for XE8 but also the new Dark Theme in 10.2.2 Tokyo so I am interested how to use it everywhere.

  • Clinton J
    Clinton J Thursday, 14 December 2017

    It seems like the custom IDE font provided by the ModernTheme registry key is gone (weird, since the ModernTheme package is still part of the IDE, I assume it handles themeing now?)

    I tried creating a custom theme with custom font selections, but none of it gets used by the IDE for anything except the main window title bar.

    Is there any way to get this custom IDE font functionality back? Frankly, the IDE looks fantastic in a 10 point Source Code Pro (vs the default 9 point Tahoma or something) - dramatic readability improvements.

  • David Millington
    David Millington Monday, 18 December 2017

    We may have broken that functionality unintentionally. Can you file a QP please?

  • Leus
    Leus Thursday, 14 December 2017

    Well, I think Delphi IDE Colorizer already does a good job: https://github.com/RRUZ/Delphi-IDE-Colorizer

    Also, there is Delphi IDE Theme Editor for syntax highlighting: https://github.com/RRUZ/delphi-ide-theme-editor

  • Please login first in order for you to submit comments

Check out more tips and tricks in this development video: