This week I’ve been focusing on getting QW to an alpha stage where other people can start to use it and test it out. To that end I’ve been working on the now most requested feature, a dark/night theme/mode.
I’ve had to take a broader view with regard to a night mode however, there are a number of features that I need to accommodate, namely:
- Images used in the UI need to be scalable. An infrequent but regular request is the ability to change the size of the UI font but if the font size increases then the images should increase in size as well.
- Most images need to be able to change color, so night mode images can have a different color to normal mode.
- The images used allow for the use of look-n-feel theming. In short other people should be able to create a theme for QW and be able to use their own images.
The only types of images that allow for all of the above are SVGs, which technically speaking are not images, they are instructions for how to draw an image. As such SVGs can scale infinitely since all you need to do is apply a transform to the instructions to increase or decrease the size.
JavaFX however doesn’t have built-in SVG support, I did find a project that allows SVGs to be used as images but I had issues with the scaling so that was out. Instead I’ve used a feature within JavaFX that allows for a SVG Path to be used to draw the image. This is a set of drawing instructions that will draw a shape, for example the text:
M 14,0 H 0 V 32 H 24 V 9.998 Z M 4,28 V 4 h 8 v 8 h 8 v 16 z
will draw the shape that is used for the chapter icon. The shape can also have a color specified in the CSS so that takes care of theming/night mode.
A scaled up example is shown below (not all images have been replaced with SVGs yet and the green is just used to determine which icons have not been changed over to SVGs, the blue is my desktop background):
The important thing to note here is that the images are still crisp even though the UI has been increased in size.
And by changing one setting, night mode icons will look like this:
However there is flexibility to allow for different colors on a per-icon basis, so if a theme designer wants the Chapter icon to be hot pink and the Idea Board icon to be light blue then they will be able to individually style each icon, they will even be able to provide their own icons.