Dark Mode Issue - Clean Theme

[mansoorih]

Hi Felix,

I few months back, I had reported dark mode issue when an update to Clean theme had been rolled out. There was an update provided back then and it resolved. However, with the most latest updated to the Clean Theme once again the issue has resurfaced. I have Clean Theme and Dark Mode Module installed. It's almost impossible to read. Please see screenshot.

[mansoorih]

One more screenshot

[marc-farre]

@mansoorih Thanks for reporting this issue.

I'm aware of it, but I'm missing time to support the dark mode for this Clean Theme module.

It's because of the new Clean Theme module configuration, which allows choosing the theme colors.

Maybe we should add colors for dark mode, like it was done for the Flex theme: https://github.com/felixhahnweilheim/humhub-flex-theme

Or automatically generate dark colors from the selected light colors.

Since it's a free module, feel free to participate in the code, or pay a developer for it, or make a donation that could help us work on it.

[mansoorih]

Thanks for sharing the update. Sadly, I'm not a developer, so would be unable to contribute to the code. Being a free website with just 135+ members, I have collected just $50 donations this year. So unfortunately, I can't pay a developer or donate for theme development. I still have to collect some more funds to renew modules that expired last month.

[mansoorih]

The last application code I wrote was back in 1997. There was no PHP back then. I wish I could have had a chance to continue coding.

[marc-farre]

@mansoorih thanks, I understand of course.

I personally prefer spending time on working to integrate the Bootstrap 5.3 native dark mode: #56 (comment)

[mansoorih]

Appreciate for sharing the active conversation update on this topic, @marc-farre.

[felixhahnweilheim]

Just for your information, using HumHub (dark) in the Dark Mode module settings looks a bit better than clean-theme (dark). But this is only a temporary thing.

I will see if I can create a PR to fix the issue next week.
Making the dark mode colors also configurable would be the best option but probably too much effort (for a free module).

[mansoorih]

Yes, HumHub default theme in dark mode works. However, I personally liked the Clean Theme, since it gives a wider screen canvas and spacing compared to the default HumHub theme which I think shrinks the width to 1024 pixels.

[felixhahnweilheim]

fixed in cuzy-app/clean-theme#24

[marc-farre]

@felixhahnweilheim Thank you very much, great job!
I've released version 2.0.3: https://github.com/cuzy-app/clean-theme/releases/tag/2.0.3

I have removed CSS about the #topbar-first and #topbar-second as they don't exist on the Clean theme and added CSS for the bottom bar because it wasn't contrasted enough:
https://github.com/cuzy-app/clean-theme/blob/master/themes/Clean/css/dark.css#L77-L90

I also removed the dark CSS non minimized because the gain was only 2 Kb and since there is no automatic minifier in the compiler script, I though we might forget to compile it. Moreover, each time I save the file with phpStorm it refactors the file (unminimizes)...

[mansoorih]

Gents, thanks, I upgraded Clean Theme, but looks like something still missing.. just for me to double-check, I had the Clean Theme under Appearance selected, and Clean Dark under the Dark Mode module selected.

[marc-farre]

@mansoorih thanks for sharing.
I've also seen small issues here:

Maybe we should list them all, and when someone has time to fix them, I'll release a new version of the module.

[mansoorih]

Few more screenshots to add to the list.

[marc-farre]

@mansoorih @felixhahnweilheim I've released version 2.0.4 which fixes dark colors

[mansoorih]

Thanks, just updated and will check all places. Just did a quick check with Reactions module that I purchased a few days back. There seems to be issue, not sure if it is with the Reactions module or Dark theme or Clean theme, but hard to read text. Screenshot pasted.

[marc-farre]

@mansoorih Thanks for reporting this issue with the Reaction module.
Just released version 1.2.3 which now uses CSS variables too.

[mansoorih]

Thanks, @marc-farre and @felixhahnweilheim for all your attention and support.

[mansoorih]

Strangely, I noticed this issue in the message module.

[marc-farre]

@mansoorih Fixed by @felixhahnweilheim in PR cuzy-app/clean-theme#25
Will be available in next release.

[mansoorih]

Something still is broken in dark mode. Can't read filename when attached.

[felixhahnweilheim]

I can not reproduce this in HH 1.16
Which versions (HumHub, Dark Mode, Clean Theme) do you have?

[mansoorih]

HumHub Community Edition Version: 1.16.2
Clean Theme Version 2.0.6
Dark Mode Version 1.0.8

[felixhahnweilheim]

Please update Clean Theme to v2.1
I think the issue is solved, if not let me know.

[mansoorih]

Surprisingly, after I upgraded HumHub to 1.16.2 when it was released, I have seen no updates for any of the modules visible to me, including the Clean Theme.

[marc-farre]

@mansoorih Clean Theme version 2.1 is for HumHub 1.17 which is still in beta (but already quite stable).