Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New color scheme with hybrid dark mode support #428

Open
DRSDavidSoft opened this issue Sep 30, 2024 · 1 comment
Open

New color scheme with hybrid dark mode support #428

DRSDavidSoft opened this issue Sep 30, 2024 · 1 comment

Comments

@DRSDavidSoft
Copy link
Contributor

Originally discussed in: #422 (comment)

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
Copy link
Member

jnvsor commented Sep 30, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants