openSUSE / wiki

openSUSE Wiki
http://en.opensuse.org
25 stars 17 forks source link

Disable dark theme until it works properly across all sites. #56

Open simotek opened 4 years ago

simotek commented 4 years ago

Hi,

I think we need to disable the dark theme (or have it as a separate option) until we get to the point where it works on every site well, currently search.opensuse.org looks kinda average with it and that is the default page for alot of users which is not a great user experience. Screenshot for reference.

https://www.enlightenment.org/ss/display.php?image=e-5e8d04c44db9f0.96191872.png

guoyunhe commented 4 years ago

We do have some positive feedback on the dark theme. If it is related to https://github.com/openSUSE/search-o-o or https://github.com/openSUSE/chameleon , we can improve them if you can point out the specific issues, like colors, contrast.

simotek commented 4 years ago

While the black with white text works ok for somewhere with lots of text such as the wiki, if you look at UI's that do dark themes well rather then using straight black they tend to favor using various shades of grey or other darker neutral colors. (I generally like dark themes so I have a bunch open) some examples to look at are, https://discordapp.com/ https://atom.io and spotifys web player. (the atom and discord apps also have really good dark themes).

As part of the branding / logo refresh id like to end up with a color palette where dark and light themes are equally easy to work with, and it will still look unified if say the wiki is using a dark theme but search-o-o and build.opensuse.org aren't for example.

I think what you have is a good starting point and i'd love to help polish it further but I was kinda waiting for us to settle on our new color palette (I have also been working on lots of other things that i'm just finishing up).

So I think for now it would be great if there was 3 theme options that users can select (chameleon [default], chameleon-dark, and bento) going back into the archives of somewhere I think I once made a PR to get bento to follow our branding guide but was never able to get it applied.

An alternative could be to disable the dark switching by default but give users the option to enable it or maybe the light theme could just be forced on some subdomains.

As for some specifics on search-o-o currently the blue banner with the news, the grey and the black amd logo all clash, the search button also doesn't really fit. I'm not really sure how easy it is to fix these just with styling atm. The wiki also heavily uses that slate grey which clashes with the black a little, rather then the black a much darker shade of that grey would work better in that context. But then the black works well with the bright green at the top where as a darker form of that grey probably wouldn't so I think in the current state either we can get one part right or the other part right but not both which is where having a well designed color palette for branding would address that issue but making the greys less blue might also help in the shorter term.

guoyunhe commented 4 years ago

We are gradually migrating sites to new theme. For example, last month, the news.opensuse.org site has been updated and the dark theme works very well. And we can only work on sites one by one.

Here is no way to unify all sites in the same time. Dark theme is a very good feature to protect users' eyes and fit the desktop dark theme.

Firefox takes the same approach. Some of its built in pages, like the preferences page, are dark theme enabled. But many other pages, like starting page, doesn't support dark theme yet. Only when users are using it, we get feedback.

So we will not disable dark theme. And will try to support more sites in the future.

CC @hellcp

hellcp commented 4 years ago

As a sidenote, there is a patch in jekyll-theme's css to support dark theme in the thing I added there, but since search-o-o doesn't really use any colour impacting css, it would be good to fix any issues that arise in search-o-o in chameleon itself (and search-o-o doesn't look great in dark compared to how good it looks in white)

simotek commented 4 years ago

To be clear, I like the concept of having a "dark theme" I also like the concept of having a unified look and feel across all openSUSE websites its been something i've been trying to do for the last 10 years.

However, in the current implementation the "light" version that I can see in chromium looks really clean polished and professional for both news.opensuse.org and search.opensuse.org, however the dark versions much less so. I don't think they are at the professional quality we need as an organization. Particularly on news.o.o the washed out white banners really don't sit well on the dark theme, i've shown a couple of other people who were getting the light version of the site and they agree. I think by using better colors and branding we can make it much better (but even then users should be able to force the light theme)

So my proposal for a way forward is to temporarily disable the dark theme (or make it optionally selectable but not default for now.) Then rework openSUSE's branding https://opensuse.github.io/branding-guidelines/ to have a color palette that will work well for both light and darker UI. Once we then update chameleon to use openSUSE's new branding for both light and dark themes we can then enable the dark theme the way it is now (but with an option to switch to light somewhere). Generally using the live website isn't the best way to try and get feedback from people so we might aim to start with something that people can try first and once we have a general agreement.