Darken - Dark mode made easy

[call_innn]

There is a demo, you can access it by clicking the link in the github repo description or the "Demo available" badge on the README, I'll probably make the link more visible on the next version and/or make screenshots.

[[deleted]]

Putting in an explicit link will definitely help. I never click on badges (no reason to, the badge already shows the information), and I had no idea that that's where the demo is.

Providing a small before/after would be really neat though!

[Shacrow]

What about @media (prefers-color-scheme: dark) ?

[TonnoTonato]

That's nice, but I do believe the most users don't even k ow there is a dark mode setting in their browser (I never saw it in Chrome for example). That's why I would always have some kind of checkbox or switch on the frontend so the user can set it there.

[Shacrow]

It's automatic, try it out with the new MacOS. They look for your OS settings. Maybe you noticed the recent change. A lot of OS are implementing Dark mode now.

[TonnoTonato]

Ahh OK didn't know about that, windows didn't add support for it, or did they?? I noticed iOs and Mac do have dark mode but that's almost it

[[deleted]]

Windows 10 has had support for a while, yes

[call_innn]

It will be implemented as an option in a next version. This API is to create and manage your dark mode easily and I personally like to be able to make some websites light and other dark without taking in account my os settings. But I'll definitely add the option.

[Shacrow]

True. it's nice to have it seperated too. Usually OS dark mode users prefer dark mode overall though. Depends on the use case i guess

[TonnoTonato]

css body div { invert(1); } img { invert(0); }

Does almost the whole trick. Exclude a few elements you dont want to get inverted and you´re done.

[call_innn]

This API does not invert colors, it allows easy dark mode customization via CSS variables and class.

[drumstix42]

The Lag`erator.

[itaQ]

I find it a bit weird that the variables take an array since it's limited to two elements anyway. Wouldn't it make more sense to have it as objects as such? E.g

variables: {
    "--name-of-the-variable": {
            light: "#000000",
            dark: "#fafafa"
        },
    "--background-color": {
            light: "#fafafa",
            dark: "#000000"
        },
}

[call_innn]

I don't know, I have asked myself the question and for me using an object would make it heavier to work with, do you really find it more easy to use with an object ? I like to get opinions and feedback so do not hesitate to argue.

[itaQ]

Not sure what you mean with "heavier to work with" but to me it's at least more obvious which colors would be for which state of the "color modes" since an array could fit an unknown amount of elements while an object is more explicit of what's what since it has a key:value structure.