A friend of mine showed me Windows 93 today. I have to admit that it’s fairly impressive, but I found it to be quite coincidental that my friend shared it because I’ve had the idea of doing something like that for a long time.
Due to other priorities, and with hopes that new advances would make recreating the look much easier, I shelved the project. The next time I thought about reviving it was when I made a winmine (Minesweeper) clone in Java that looked almost exactly like the XP version, which I lamely called “Losemine” (whose source code I may or may not get around to publishing).
Still, I didn’t end up doing anything with the clone project except think that I could make a DHTML port of Losemine and have that as one of my applications for the Windows clone.
Unwilling to go on without making some sort of attempt to ease theme development, I started work on the theme designer. Even from the conception of the Windows clone project, I wanted everything to look as close to the original as possible, even down to the pixel, much like the winmine clone. With the thought in mind that the theme engine will be crucial to the Windows clone project, I’m writing the code with the intent to reuse it in the Windows clone project with minimal edits.
This is what I have so far, as of writing this post (rendered on Pale Moon 24.7.2):
Compare that with the original:
Apart from the “Selected” text, whose look I kept from previous versions of Windows to make it more useful, it’s actually a fairly accurate reconstruction. The only things I need to work on are the font details and the dialog window button. Overlaying my reconstruction with the original yields this:
I spent a good month or so playing around with the titlebar and buttons just to get them to look right. Although it may not appear so, the titlebar gradient does not stretch from one end to the other; instead, it only spans the title itself. The left-most area with the icon and the right-most area with the window controls have solid-colour backgrounds, namely the left and right endpoints of the gradient. The window controls also would not have a predetermined width, since there aren’t always just the three window control buttons. These requirements made stretching the title area by floating the icon and window controls impossible as a solution. I tried using a CSS table, but that made the window control buttons flow vertically. After weeks of searching, I discovered that flexbox was exactly what I needed.
The buttons were also a fairly time-consuming element, although not as much as the titlebar. The problem with the buttons is that they require a compound border. CSS only provides a single border, so the hack that I settled with was using multiple solid box shadows. Box shadows don’t displace anything, so each button has to have at least a 2px border to compensate (which is probably why the dialog button in my reconstruction is off).
About a week ago, I decided to rewrite my stylesheets to use SCSS/SASS. SASS supports variables, and variables are very useful when certain elements should take the same colour all the time. In fact, that’s what Windows does: in a standard theme file, there’s a section (
[Control Panel\Colors]) that defines the various colours used throughout Windows. It contains something like the following:
ActiveTitle=10 36 106 Background=58 110 165 Hilight=10 36 106 HilightText=255 255 255 TitleText=255 255 255 Window=255 255 255 WindowText=0 0 0 Scrollbar=212 208 200 InactiveTitle=128 128 128 Menu=212 208 200 WindowFrame=0 0 0 MenuText=0 0 0 ActiveBorder=212 208 200 InactiveBorder=212 208 200 AppWorkspace=128 128 128 ButtonFace=212 208 200 ButtonShadow=128 128 128 GrayText=128 128 128 ButtonText=0 0 0 InactiveTitleText=212 208 200 ButtonHilight=255 255 255 ButtonDkShadow=64 64 64 ButtonLight=212 208 200 InfoText=0 0 0 InfoWindow=255 255 225 GradientActiveTitle=166 202 240 GradientInactiveTitle=192 192 192 ButtonAlternateFace=192 192 192 HotTrackingColor=0 0 128 MenuHilight=0 0 128 MenuBar=192 192 192
That is, the variable, followed by an equals sign (
=), followed by space-delimited decimal RGB values.
Converting that into SCSS and formatting it nicely (and sorting, because it’s a mess otherwise) results in this:
$ActiveBorder: rgb(212,208,200); $ActiveTitle: rgb( 10, 36,106); $AppWorkspace: rgb(128,128,128); $Background: rgb( 58,110,165); $ButtonAlternateFace: rgb(192,192,192); $ButtonDkShadow: rgb( 64, 64, 64); $ButtonFace: rgb(212,208,200); $ButtonHilight: rgb(255,255,255); $ButtonLight: rgb(212,208,200); $ButtonShadow: rgb(128,128,128); $ButtonText: rgb( 0, 0, 0); $GradientActiveTitle: rgb(166,202,240); $GradientInactiveTitle: rgb(192,192,192); $GrayText: rgb(128,128,128); $Hilight: rgb( 10, 36,106); $HilightText: rgb(255,255,255); $HotTrackingColor: rgb( 0, 0,128); $InactiveBorder: rgb(212,208,200); $InactiveTitle: rgb(128,128,128); $InactiveTitleText: rgb(212,208,200); $InfoText: rgb( 0, 0, 0); $InfoWindow: rgb(255,255,225); $Menu: rgb(212,208,200); $MenuBar: rgb(192,192,192); $MenuHilight: rgb( 0, 0,128); $MenuText: rgb( 0, 0, 0); $Scrollbar: rgb(212,208,200); $TitleText: rgb(255,255,255); $Window: rgb(255,255,255); $WindowFrame: rgb( 0, 0, 0); $WindowText: rgb( 0, 0, 0);
Since the only things that change are the colours (and the fonts and font sizes, but that’s more advanced), I created a template file as a SASS partial and added an include directive for the template at the end of every theme file. This modular approach is nice because if there’s an error in the template, I only have to change it once in the template instead of once for every theme.
The next challenge is to figure out how to implement a scroll bar. If it weren’t for the little square in the corner when there are two scrollbars, absolutely-positioned elements would have done the trick.
After that, the preview is more or less done, but that’s only half of the project. The second part is the actual configurator, using jQuery to make it dynamic.
It’s interesting to note that this project is completely text-based, even the images. The window control buttons, and eventually the scrollbar buttons, are SVG images, which is an XML-based format (and XML is text-based). Using SVG allows the buttons to scale cleanly when necessary and be recoloured dynamically.
It may take months to finish the theme designer, and it’ll probably take a few years for the Windows clone to surface, but when it does, it’ll be worth it.