Dark Mode

[ShadowFM]

Hi!

I would really like to have a whole "dark mode" only a few items have a inverted mode but not everyone.

I would really like to have all of them as a inverted mode or a simillar way to get them all dark.

[lubber-de]

This "just" needs a completely new theme. Volunteers with a proper PR are welcome 😉

[luki1412]

I had to add a lot of custom css code to make all the ones I needed dark.

[naterexw]

Great work. @lubber-de How to add to Fomantic documentation after PR gets approved?

[lubber-de]

@naterexw By providing another PR at the docs repo. At least to be added to the index page

https://github.com/fomantic/Fomantic-UI-Docs/blob/master/server/documents/index.html.eco#L200-L210

[tonimelisma]

@lubber-de it seems like the PR has been stale for 6 months, and won't be finished. Time to remove it and add back the tag help wanted? Am I correct to assume that all that's missing is the theme? And is there existing code which will chose the theme based on a media query indicating light/dark mode support?

[lubber-de]

@tonimelisma Yes, only the theme is missing. For usage of media query for dark/light mode i suggested a simple solution at #1022 (comment)

[tonimelisma]

@lubber-de so the developer would need to link three different stylesheets to the head of the HTML page? Do you think it would be possible to just do a similar trick within one CSS file, kind of like water.css does it:

https://watercss.kognise.dev/

The CSS basically defines the light color scheme, block by block, and after each block, has another with @media (prefers-color-scheme: dark) which then overwrites the light color scheme with dark versions, if the user so wants. This is automatic for both the developer as well as the end user, and is also compliant with browsers (IE) that don't support the media query (they just end up using the light color scheme).

Would something like this fit fomantic architecturally?

[lubber-de]

@tonimelisma watercss uses the css variables approach.
Providing light+dark values (as well as using css variables instead of LESS variables) for every possible element block by block inside the same theme would mean you always have to maintain both schemes inside one single theme. That said, we could perhaps also question/discuss the existence of inverted elements then.

As you can see in the above mentioned dark theme PR, it's not that easy to provide a new theme which covers all components, so it needs even more effort to implement everything inside only one theme. (Volunteers? 😉 )

However, it would be a complete different design approach and at least not backward compatible for FUI/SUI 2.x. That was the reason i suggested the simple imports of separate themes per media query which is backward compatible and each theme is still maintainable on its own.

We discussed new ways of theming for v3 in #441

[tonimelisma]

Right, so perhaps "built-in support" for the media query in v3, but until then, the fomantic approach is just to have two themes which are linked separately in - did I understand this correctly?

[lubber-de]

Yes... that's at least my opinion 😉

[Jiab77]

I've deleted my previous comment because nobody reacted and was probably mistaken for promotion. What I mean is that your framework already contains everything to make a cleaner dark mode. On my project related to yours and apply the dark mode theme on the fly, I'm using @media (prefers-color-scheme: dark) to detect the user preference on page load, then will simply apply your magic inverted class over elements that has to be changed.

The advantage I'm seeing with this approach is that you don't have to write any specific CSS file to manage elements that has to be styled dark. The current implementation is not the best but while reading comments in this issue I'll probably use a JSON file.

Anyway, all of this to say that your framework is really nice and with skilled guys like you, I'm sure you'll made a dark mode just perfect ;)

[Jiab77]

@lubber-de I leave my comment above but by looking at #441 (comment), this structure seems to be a good idea. it would eventually make the toggle between light and dark very simple :)