search

1j01 / jspaint

🎨 Classic MS Paint, ＲＥＶＩＶＥＤ + ✨Extras
https://jspaint.app/about
MIT License
7.22k stars 562 forks source link

[REQUEST] Modern Dark Theme #186

Closed TheAwesome98-Real closed 6 months ago

TheAwesome98-Real commented 4 years ago

Dark theme, but it’s modern

Octopus1348 commented 9 months ago

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 commented 6 months ago

@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 commented 6 months ago

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!