kint-php / kint

Kint - Advanced PHP dumper
https://kint-php.github.io/kint/
MIT License
2.77k stars 291 forks source link

New color scheme with hybrid dark mode support #428

Open DRSDavidSoft opened 4 days ago

DRSDavidSoft commented 4 days ago

Originally discussed in: https://github.com/kint-php/kint/issues/422#issuecomment-2381454524

In Kint 6, we can drop IE support and use CSS variables together with media queries to detect dark mode support by the device or the browser and automatically apply a cool looking dark variant of that theme:

@media (prefers-color-scheme: dark) {...}

This preferably needs to be applied to all themes currently residing in the resources directory.

While at it, the color scheme can be refreshed for a more modern and streamlined look, with more contrast.

jnvsor commented 4 days ago

then use JS to detect enabled dark mode and load that one

This would require kint to have a controller or endpoint of some sort which we don't have without potentially breaking things for the user (Or try downloading styles from github on the fly... Ew!)

So all the variables would need to be present on every dump from the start

I just need some basic information about the layout and structure of the scss files, I can refactor to use CSS variables and then add dark mode into it without any worries.

Well that shouldn't be too hard - right now the scss is just a _base.scss with some starter variables that get overridden in individual themes with some extra custom stuff. Shouldn't be too hard to change those into CSS variables and add an @media tag