Guide to dark GUI in elementaryOS and Lubuntu

Some time ago I decided I want to use dark GUI wherever possible, main reason being the fact that “white on black” causes much less strain of the eyes than the other way round. This post contains references to all the different guides, dark themes, software or other related tips I encountered and found useful in some way.

It may look like a lot of work, but if you spend a lot of time on the computer and care about your health, it is definitely worth it.

I provide guides for the two linux distributions I use, but they might be useful also for another Ubuntu-based distros.

Please note that this article is not yet complete and the results aren’t always perfect, but I am going to update and improve it in the future. And if you have any similar tips (especially for applications that need extra configuration) or if you find any mistakes, please be so kind to leave a comment.

elementaryOS

  1. First, install all the required packages:
    sudo add-apt-repository ppa:satyajit-happy/themes && sudo apt-add-repository ppa:versable/elementary-update && sudo apt-get update && sudo apt-get install elementary-tweaks elementary-dark-theme elementary-wallpaper-collection elementary-plank-themes
  2. Then go to System settingsTweaks and on the first tab (Appearance) set Windows Decoration Theme and Interface Theme to elementary Dark.
  3. In the Tweaks window, select Plank and set Theme to Darktheon.
  4. Choose some dark background that fits with the GUI.

elementaryOS-dark-screenshot

Lubuntu 14.04

Theming of Lubuntu has proven to be a bit more complex. Please read through the Theming Guide first.

I’ve decided to use the elementary Dark theme, which supports both GTK 2 and GTK 3. However, it has no support for openbox, so we need to install yet another theme. I chose Turquoise Night.

  1. Download elementary Dark theme and extract the directory (as root) “elementary Dark" to /usr/share/themes
  2. Run lxappearance and update settings on different tabs:
    1. Widget: Select elementary Dark.
    2. Colour: Uncheck Use custom colour scheme.
  3. Download Turqoise Night Ob.
  4. Openbox Configuration ManagerTheme → Install new theme. Select the obt file from Turquoise Night theme. Close.
  5. Right click on lxpanel → Panel settings → Appearance → Background → Select System theme.
  6. You also might want to edit the appearance of greeter (login screen). You can do that by editing /etc/lightdm/lightdm-gtk-greeter.conf, specifically values background and theme-name).

Besides that, you may find these links useful:

2014-10-26-191639_1280x720_scrot

Other software

Redshift

“Redshift adjusts the color temperature of your screen according to your surroundings. This may help your eyes hurt less if you are working in front of the screen at night.”

I strongly recommend you to start using this program if you work late in the night and want to save your eyes. After a while you won’t even notice your screen gets more red in the evening, the transition is really smooth.

You can read more on Redshift project page or in this LifeHacker article.

Install Redshift (including status icon) via this command:

sudo add-apt-repository ppa:jonls/redshift-ppa && sudo apt-get update && sudo apt-get install redshift redshift-gtk

After installing you have to configure it and possibly add it to startup application manually. See project page for more details.

Eclipse

If you use Eclipse 4.2 or newer, you can use the MoonRise UI Theme. Just follow the guide to install both theme and syntax highlighting preferences. The result is really nice. I don’t recommend installing Eclipse Color Theme plugin as it might cause some compatibility issues (I encountered problems in ADT bundle, for example).

Snímek obrazovky pořízený 2014-10-26 19:58:02

Firefox

Although Firefox adapts well to dark themes, there is a very nice addon called FT DeepDark that takes it even further.

You will most probably encounter problems with some websites whose designers were so clever to style font colour in input fields but assumed the background will be allways white (or the other way around). I solved that by installing the Stylish addon.

  1. Install the addon and restart Firefox.
  2. Go to Addons. You will see new item in the list, User styles.
  3. Add new user style:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http), url-prefix(file) {
    pre, input:not([type="submit"]), textarea {
        color: black !important;
        background-color: white !important;
    }
}

firefox

Geany

This wonderful, minimalistic IDE/text editor has preset syntax highlighting for many different languages and formats. It completely ignores any system colour settings (which is probably good), but you can very easily solve that by checking Preferences Editor windowAppearance →  Invert syntax highlighting colours. If that’s not enough for you, there is a lot of documentation on filetype definitions.

geany

KeePass

If you use multiple passwords (which you should), you may find a password manager like KeePass very useful. Until recently I used KeePass2, originally meant for Windows, run in mono, which worked fine… sort of. But there seems to be absolutely no way to convince it to respect your system theme settings. Fortunately, newest version of it’s cross-platform version, keepassx, started supporting the same database format (kdbx). It’s currently an alpha, but it is very easy to get it and it looks stable enough*. All you have to do is to run:

sudo add-apt-repository ppa:keepassx/daily && sudo apt-get update && sudo apt-get install keepassx

(*) In the PPA description there is a warning: USE AT YOUR OWN RISK and be sure to REGULARLY MAKE BACKUPS of your database.

Meld

Meld is a very nice visual diff tool, but it has problems when it encounters unusual system color settings such as dark theme.

Fortunately there is this page at Gnome Wiki which contains a guide to styling Meld and also few example settings for dark themes. As the newest version of the application didn’t make it yet to Ubuntu 14.04 repositories, you should use the method marked as outdated, with editing file ~/.gtkrc-2.0. I recommend using the second color scheme.

Note: For the precise-based elementaryOS Luna you will need to upgrade Meld through this PPA:

sudo add-apt-repository ppa:tsvetko.tsvetkov/precise-backports && sudo apt-get update && sudo apt-get upgrade.

TexWorks

If you write in LaTeX, maybe you use TexWorks. This program is not very dark GUI-friendly, but like Geany it supports syntax highlighting customization.

You have to edit file ~/.TeXworks/configuration/syntax-patterns.txt and adjust the colours for yourself. I didn’t find any usable colour settings, so I had to create one:

[LaTeX]
# special characters
yellow N [$#^_{}&]
# LaTeX environments
lightgreen N \\(?:begin|end)\s*\{[^}]*\}
# LaTeX packages
lightgreen N \\usepackage\s*(?:\[[^]]*\]\s*)?\{[^}]*\}
# control sequences
lightblue N \\(?:[A-Za-z@]+|.)
# comments
#FFC0CB N %.*
# generic text
#E6E6E6 N .*

It’s far from perfect and maybe there are other ways. Feel free to explore them for yourself.

Snímek obrazovky pořízený 2014-10-26 19:44:48

Thunderbird

I really recommend installing the TT DeepDark addon which does most of the work. But there still remains few things you will probably need to configure manually.

  • Menu → Preferences → Appearance → Formatting
    • Click on Colours…, check Use system colours and uncheck Allow pages to use their own colours.
    • Disable emoticons if you wish and set some light grey colour for quoted messages in plaintext.
  • Menu → Appearance → Show message body as: Select Simple HTML.

8 thoughts on “Guide to dark GUI in elementaryOS and Lubuntu”

  1. Great article, thank you.

    One thing – I’ve noticed that since upgrading to Lubuntu 15.04, using the elementary Dark theme on the LightDM GTK Greeter causes it to show a solid grey background rather than the selected wallpaper. The fix for the is to add the following to ‘elementary Dark/gtk-3.0/gtk-widgets.css’:

    GtkImage,
    GtkImage:insensitive,
    GtkLabel,
    GtkLabel:insensitive,
    GtkBox,
    GtkBox:insensitive,
    GtkGrid,
    GtkGrid:insensitive {
    background-color: transparent;
    }

  2. After adding ppa:versable/elementary-update to elementary OS 0.3.2 Freya (32-bit):
    —————————————————————————————————–
    root@es:/# apt-get update | grep -i erro
    W: Failed to fetch http://ppa.launchpad.net/versable/elementary-update/ubuntu/dists/trusty/main/binary-i386/Packages 404 Not Found
    —————————————————————————————————–
    On “https://launchpad.net/~versable/+archive/ubuntu/elementary-update?” latest elementary-tweaks – 0.1-0~168~ubuntu13.10.1.

    Thank you for sharing knowledge!
    A.

  3. I’m using Elementary OS Loki and despite using the “Global Dark Theme” from the Tweak Tool the GUI (panels, menus etc.) is bright while I can make the IDE dark.

    In your screenshot both the IDE and the GUI is dark. How do you get the Geany GUI to be dark as well, and not just the IDE?

    1. Hi there, I’m facing the same problem since upgrading to Loki. Unfortunately, I no longer have time to look into this. :(

      But if you find a solution, I’d be grateful for sharing it here for other potential readers.

      1. Btw. I plan updating the article for the next version of elementaryOS which is supposed to be released during 2018.

Leave a Reply to Curiosity Cancel reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.