Using a dark theme in ubuntu

After installing a dark theme on my "new" laptop the other day, I've been adding quite a few tweaks in order to make it render correctly with the rest of Ubuntu 08.04 - Hardy Heron.

Theme installed: Darklooks - you can find it in Synaptic Package Manager (gnome-themes-extras).

Edit the theme file:

cd /usr/share/themes/Darklooks/gtk-2.0/

edit gtkrc, changing lines 181 and 182 from:

bg[NORMAL] = @tooltip_bg_color
fg[NORMAL] = @tooltip_fg_color

to:

bg[NORMAL] = @tooltips_bg_color
fg[NORMAL] = @tooltips_fg_color

This will keep the theme from crashing, I have yet to change the notifications and tooltips to be a dark color rather than yellow.

Enable the darklooks theme for gnome.

You can test it by opening firefox. If you have done the last step correctly, the theme should stick. Otherwise, it will revert back to a blocky theme.

Now for specific Apps, these tweaks are not theme specific - they should fix most dark themes.

The biggest concern for most people will be Firefox:

First, make a backup of your .mozilla profile folder (in your home folder)
uninstall firefox-3, and then install:

firefox-2
firefox-2-gnome-support
msttcorefonts

Why are we doing this? Firefox 3 has automated gtk integration - but, all those large dark widgets on top of light colored sites ... not very pretty. Firefox 2 has a way to get around this, but as of this post, Firefox 3 has disabled that option. You can write to your nearest Firefox developer and ask for this to be added back in!

Once you have firefox 2 up and running, merge your profile data back into your new .mozilla folder (bookmarks, add-ons, etc)

Go into the firefox preferences Edit > Preferences , and choose the Content tab. Click on the Colors button, and make sure 'Use System Colors' is unchecked. Save your changes and close that window. Next click on the Advanced fonts tab, and change the monospace font size to 14. Save and close all the way.

Download this archive, and extract it to a convenient place.

go to: /home/**/.mozilla/firefox/**/chrome , replacing the ** s with your user name and the correct profile code.

If you want to keep the ugly firefox 2 widgets, move the 'userContent-restore to firefox defaults.css' file into this folder, and remove everything after Content.

If you want prettier widgets, move the 'userContent.css' file into the chrome folder. You will not need to change its name. Next, go to /usr/share/firefox/res , and make a backup of your forms.css file. This folder belongs only to root, so you may have to do this in terminal.

sudo mv forms.css forms-backup.css

or some other such name. DO NOT SKIP THIS STEP! you should always make a backup when changing system files. Now, move the form-widgets folder, again using the terminal:

sudo cp -r where/ever/you/extracted/the/folder/form-widgets /usr/share/firefox/res/form-widgets

You should be done! You can use this page to test with.

If you know css, you can edit any of the .css files to change anything you like. You can also change the way the widgets look by opening them in your favorite image editing program.

These are the web pages that I visited in order to put all of these files together (along with a lot of my own tweaking):

Firefox Widgets
Instructions for FF3 I found this after I uninstalled FF3, according to a comment, it only works for FF2 ...
the stylish style referenced above
the unhelpful mozilla page
specific Darklooks theme problems
ubuntu forum thread with some helpful links
a possible fix for the auto complete bar in FF3
some good info

Things to fix still:

When you search for a word, it still uses a minty green color
The address bar on a secure page clashes, but is readable.
In the built in firefox boxes with hint text (like the search bar on the top right), the text is too dark to read easily.

One more thing! If you want to, you can install the stylish firefox extension, and then install a dark google theme, that way it will feel more like the rest of your desktop.


Open Office:
I haven't opened up anything but Writer, so, I don't know what else needs fixing yet.

Download this archive (7.7mb) and move the images_tango.zip file into /usr/lib/openoffice/share/config/ Don't extract it.

To change the icon theme so that it matches better (unless you like orange of course), go to the Tools > Options menu. Under the OpenOffice.org section, choose View. Change the icon size to small (if you think they are too large), and set the style to tango.

Next, to change the page background color from dark gray to white, choose Appearance from the left. Change document background to white, and font color to black. As you run into any other glitches, you can change them here.

Pidgin:
First, make sure you are running the new pidgin, it should be 2.4.1 or higher. If you have Hardy Heron installed, you are good to go.

In the Tools > Plugins menu, turn on 'Conversation Colors' and set Sent and Received Messages to #ADADAD (you can go lighter or darker, at your preference).

Next, turn on the 'Pidgin GTK+ Theme Control', and set the hyperlink color to #576BBE , the Sent Message Name color to #8496DD , and the Received Message Name color to #EA987D . Again, you can change these as you like, but this is a good starting place.

If you have a smaller screen (1024x768), you won't be able to see the save or close button. Click tab until you get to the re-read gtkrc files, then click tab again, and push your [ENTER] key.

Gedit:
Open Gedit, \go to the Edit > Preferences menu, and choose the Fonts and Colors Tab. Change the theme to Oblivion. This theme is not ideal, color wise, but it's readable!

Terminal:
Open up your terminal, go to the Edit > Current Profile menu, choose the Colors tab, you can try using the colors from the system, or change the scheme white or green on black. Whichever suits your fancy. You can also change the colors individually if you like.

That's it for now, as I use the theme, I know I'll run into more things that need fixing, and I will either add them to this post, or make a new one.