kint icon indicating copy to clipboard operation
kint copied to clipboard

New color scheme with hybrid dark mode support

Open DRSDavidSoft opened this issue 1 year ago • 1 comments

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.

DRSDavidSoft avatar Sep 30 '24 00:09 DRSDavidSoft

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

jnvsor avatar Sep 30 '24 07:09 jnvsor