botoxparty / XP.css

A CSS framework for building faithful recreations of operating system GUIs.
https://botoxparty.github.io/XP.css/
MIT License
2.24k stars 106 forks source link

Importer for resources in .msstyles files. #11

Closed sirocyl closed 4 years ago

sirocyl commented 4 years ago

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.

botoxparty commented 4 years ago

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?

botoxparty commented 4 years ago

@jdan this also might pique your interest.

jdan commented 4 years ago

cc @tpenguinltg the theme afficiando :)

tpenguinltg commented 4 years ago

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
botoxparty commented 4 years ago

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.