Quantcast
Channel: Simon Long, UX Engineer - Raspberry Pi
Viewing all articles
Browse latest Browse all 10

I’m theme-ing of a dark Christmas…

$
0
0

It’s a Christmas miracle — you can now use Raspberry Pi OS in dark mode.

It’s now been a little under two months since the release of the Wayland-based Raspberry Pi OS Bookworm. Whenever we do a major version release like this, we invariably spend the next few weeks fixing all the bugs that real users have found but our pre-release testing didn’t, and then make a bug-fix release with them (hopefully) fixed.

This has taken a few weeks longer this time, simply due to the sheer amount that changed under the hood in Bookworm, but the bug-fix release is now ready and can be installed from today via Raspberry Pi Imager, or downloaded from the usual place on our website. Or, to upgrade an existing image, simply use the updater icon on the taskbar, or (if you’re more old-school) open a terminal and do sudo apt update followed by sudo apt full-upgrade.

This update includes improved support for encrypted connections in WayVNC; the latest version of Thonny; Mathematica and Scratch 3 working on Raspberry Pi 5; and a bunch of other small bug fixes and tweaks. But we thought we’d give you a little pre-Christmas bonus in this release too…

A few weeks ago, Eben wandered past my desk, and he remarked, “wouldn’t it would be nice if we had a dark theme?” (He’s not the first person to suggest this, of course, but he is the boss, so I tend to pay more attention when he suggests things!) And as it happened, I wasn’t particularly busy that day.

The lovely and easy on the eye dark mode in use on a desktop

Our PiXflat theme has been around for a few years now — we launched it along with Raspberry Pi OS Buster back in 2019. It started out as a mildly tweaked version of the default GTK theme called Adwaita, but it changed quite a bit over the years, so now doesn’t have all that much in common with Adwaita any more.

A theme is basically a big CSS (cascading style sheet) file, as is used for styling web pages, e-books and the like, which defines the appearance of every widget used to draw applications. (A widget is a user interface element such as a button or a text label.) You can set the colour, the font, the background and numerous other aspects for each widget, and you can set different values depending on whether the widget is active (e.g. a button which is being pressed), whether it is disabled, whether the mouse pointer is over it, and so on. And when I say it is a “big” file — it’s really big: PiXflat is around 4500 lines.

Creating a dark theme can be relatively easy, or really hard, depending on how the colours have been defined in your original theme. If all your colours are defined as variables, it is relatively easy — but if all your colours are hard-coded values, then it is rather more time-consuming. And of course, in PiXflat, as in Adwaita before it, the colours were all hard-coded! So the first job was to go through 4500 lines of CSS and find all the hard-coded colours, replacing them with variables, and then setting those variables to the original hard-coded values so I didn’t break the original light theme.

Then, having done that, it was time to consider how each one of those colours should change to produce a suitable dark appearance. The obvious first step was simply to invert each colour, so that black became white, dark grey became light grey, and so on. The trouble with doing it simplistically like this is that while what you end up with is indeed dark — it is the equivalent of looking at the current desktop as a photographic negative — it doesn’t usually look that good.

So then the hard work began — choosing exactly what contrasting colour was going to be used in the dark theme to replace the light version. This involved setting the values of around 70 colour variables to create a set that worked together; you have to take into consideration having sufficient contrast between elements so that you can still see everything clearly, so that text is still readable against darker backgrounds, so that the colour change when you move the mouse over an element is still obvious, and so on. And it all interacts, so you find that if you tweak one colour, you then need to go in and tweak four or five others to keep all the contrast correct.

From past experience with PiXflat, creating a theme is very much like the proverbial painting of the Forth Bridge; it’s never really finished, because you keep seeing little tweaks you can make. But the theme which I have called PiXnoir — the dark version of PiXflat — is now ready to use; like PiXflat it will doubtless continue to evolve over time, but the first version is included in this release.

We’ve made it easy to switch between the themes. Just open ‘Appearance Settings’ from the ‘Preferences’ section of the main menu, go to the ‘System’ tab, and switch the ‘Theme’ option from ‘Light’ to ‘Dark’. Most applications will load the new theme on the fly, but some applications — particularly Geany and Calculator — use their own internal themes as well, so you’ll need to close those first if they are running in order to get the theme to change.

There are a few applications — Thonny is one — which don’t use a theme, so cannot be given a dark appearance, but pretty much all our other standard applications will theme as intended. So do please have a play and see which you prefer — and may all your Christmasses be dark…

The post I’m theme-ing of a dark Christmas… appeared first on Raspberry Pi.


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images