[REQUEST] Modern Dark Theme

[TheAwesome98-Real]

trafficstars

Dark theme, but it’s modern

[LiterallyEarth]

I am currently working on it and want to make a pull request, but I don't understand how the dark theme makes all stuff go gray. I have experiemented by copying CSS code from dark.css to the new (modern-dark.css) theme, but I could only change the color of window (like Help > About) contents. I also couldn't change the button color (like the Ok button included also in about) and don't know how.

[1j01]

@Octopus1348 Thanks for your efforts, but I found it easier to implement myself than understand what trouble you were running into and, more importantly, explain how I'd want it done. It would be a serious maintenance burden to add a new theme by copying and pasting too much, but by refactoring the Modern theme to use CSS variables, it shouldn't be too bad (though it's still another theme to test for contrast issues.)

I've added a Modern Dark theme, and will be releasing it soon. It's on a branch 186-modern-dark-theme if anyone wants to take a look. I designed a new vector icon set based on the Windows Vista icons, and customized it for both Modern themes. I renamed the other themes to match (Classic Light, Classic Dark, Modern Light, Modern Dark), and I also updated the Classic Dark and Occult themes while I'm at it.

There's still work to be done, such as styling the buttons, as you mentioned. This needs brand new styles for button and related selectors, as buttons are currently left totally unstyled in the Modern theme(s); that is, they're left to the browser's defaults. The Classic themes have button styles defined by OS-GUI's windows-98.css, which includes some rather elaborate selectors like button:not(.lightweight).toggle:enabled:hover:active, button:not(.lightweight).pressing; I don't know exactly how much of the button style complexity needs to be carried over, but for example, the Help window uses lightweight (borderless until hover) buttons.

[1j01]

OK the buttons were a lot easier than I made it out to be. I just added color-scheme: dark and this styles all the native controls. It looks different between Firefox and Chrome, but both look good in different ways. Just published the theme updates!