botoxparty/XP.css

Importer for resources in .msstyles files.

sirocyl opened this issue · 5 comments

The premise is rather simple - .msstyles files are Windows PE non-executable binary files (it's the same format as a .exe) containing embedded graphical resources. These can be browsed using a resource editor like Resource Hacker, and I believe there are dedicated theme editors for this on Windows.

The format can easily be understood - this JS provides a clean example of how to parse a PE file.

Windows XP type .msstyles present their graphical resources as RT_BITMAP type with basic, fixed metadata, whereas Windows Vista/7 Aero.msstyles contain PNGs as well, and extendible, embedded metadata.

Enabling this would allow users to easily swap the base XP theme with Olive/Silver, solving #4 - and, also, other MS themes such as Royale/Energy Blue, Royale Noir, Royale Embedded and Royale Zune.

There should be two options handled by the same js import library, "static" and "dynamic". Static is preferred to implement first.

  • Static would run at build-time, to convert all .msstyles themes in the theme directory, extracting the bitmap resources to compatible .png files, and importing the theme/color data to a theme CSS for xp.css to use.
  • Dynamic would be included at runtime, in the browser, and would load a given msstyles file and populate the active theme CSS and bitmap assets internally.

Are you suggesting here some kind of library that can convert .msstyles files into a CSS sheet?

That would be really cool considering how many custom msstyles there are out there!

I just tried to do it but i'm unsure how to use windowspe.js to lookup the values that i can using an editor like this.

Any pointers?

@jdan this also might pique your interest.

jdan commented

cc @tpenguinltg the theme afficiando :)

I don't know much about msstyles, but I do know that the format for the XP Visual Styles graphics is quite easy to translate into a CSS sliced border image (probably directly, if my memory serves me right). That said, a border image might not be the best approach given that the titlebar has elements inside it. Other window elements whose look is not provided for by bitmaps is controlled by the [Control Panel\Colors] section of the theme file/registry, just like in Windows Classic.

If my records are correct, these are the Control Panel\Colors values for Luna Blue:

[Control Panel\Colors]
ActiveTitle=0 84 227
Background=0 78 152
Hilight=49 106 197
HilightText=255 255 255
TitleText=255 255 255
Window=255 255 255
WindowText=0 0 0
Scrollbar=212 208 200
InactiveTitle=122 150 223
Menu=255 255 255
WindowFrame=0 0 0
MenuText=0 0 0
ActiveBorder=212 208 200
InactiveBorder=212 208 200
AppWorkspace=128 128 128
ButtonFace=236 233 216
ButtonShadow=172 168 153
GrayText=172 168 153
ButtonText=0 0 0
InactiveTitleText=216 228 248
ButtonHilight=255 255 255
ButtonDkShadow=113 111 100
ButtonLight=241 239 226
InfoText=0 0 0
InfoWindow=255 255 225
GradientActiveTitle=61 149 255
GradientInactiveTitle=157 185 235
ButtonAlternateFace=181 181 181
HotTrackingColor=0 0 128
MenuHilight=49 106 197
MenuBar=236 233 216

So I managed to crack open the msstyles file for the Luna (XP) theme.

Great for grabbing the bitmaps for buttons rather than my old technique.

Not really sure what this ticket should be resolving so will close for now.