Proposal: Dark mode theme

[cesagonchu]

For some time, surely because of the time spent on the screen, the dark mode in the themes has become a must. Can you add a dark mode theme for Xoops?

[alain01]

Hi Christelle, There are yet dark themes with xswatch4 if you choose :
cyborg Darkly Slate => monxoops.fr use this theme Solar Superhero

[alain01]

Customize xSwatch:

21 themes in 1 theme (Preview : Bootswatch) In the file tpl/xswatchCss.tpl, edit the bottom line to match the Bootswatch theme of your choice. By default, the line reads css-cerulean. To change to a dark theme, like the one used in the original xswatch for example, change it to css-slate. You can pick from any of the 21 variations listed in the comments in tpl/xswatchCss.tpl

[alain01]

The answer is ok for you ? Or do you mean that you want to switch from light theme to dark theme ?

For exemple css-cerulean to css-slate with a switch button ?

[cesagonchu]

Thank you for your answers Alain. I would like a theme incorporated into Xoops. A theme that can be activated when you have tired eyes. Also think about those who don't see colors the same way.

[alain01]

IMO a bad solution is to copy xswatch4 theme with a dark theme by default

Like: xswatch4-light (css-cerulean for example) xswatch-dark (css-darkly for example)

Same theme, 1 word different in the tpl/xswatchCss.tpl Is it to hard to modify 1 word to change the theme ?

You mean for beginners, it's too difficult, so we need a dark theme by default, without touch anything ?

[cesagonchu]

Exactly :-P

[alain01]

Ok, I think there are 3 solutions :

1. New dark theme, best solution but need huge work to create the theme, test it and add overload templates for lot of modules
2. Add a xswatch4-dark theme using "darkly" (exactly as xswatch4, just 1 word changed, but all is duplicated) - bad idea
3. Add a xswatch4-dark theme using "darkly" (just the darkly csss files,) - Not a good idea but easy to make
4. Other thing ?

Let's wait for the boss to find a good solution If they choose solution 2 or 3, I can make it and open a PR.

[geekwright]

I've been playing with media queries, specifically prefers-color-scheme

With this, the browser asks the system (Windows, for example) if the user prefers light or dark themes. That answer is used to answer the media query in the css that looks something like this: <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="some-dark.css">

Here is are example screen grabs. The left edge is Chrome, then there is Firefox, and on the right is Ubuntu settings.

This is what happens when the system appearance is set to dark:

Firefox is paying attention, and switched prefers-color-scheme to dark, causing xswatch4 to switch to slate. Chrome (on linux) is not paying attention, and doesn't have its own control setting, is still displaying with cerulean. From what I understand, Chrome everywhere but on linux desktop supports this. So does every other major browser, see: https://caniuse.com/?search=prefers-color-scheme

Zero configuration, all done but documentation, and it should just support the users preference automatically by default. It also can be easily turned off and be locked to any theme.

Interested?

[alain01]

Waouuuuu ! The boss is here ;-) !

Richard, If I understand, we can add 3 lines with href="<{xoImgUrl}>css-darkly/xoops.css"> href="<{xoImgUrl}>css-darkly/bootstrap.min.css"> href="<{xoImgUrl}>css-darkly/cookieconsent.css">

BUT for a maximum optimization, no hard coded, Is it possible to use 2 smarty variables first for light theme 2nd for dark theme

so we can use

href="<{xoImgUrl}><{$xswatchCss-dark}>/xoops.css"> ? where <{$xswatchCss-dark}> could be

• cyborg
• Darkly
• Slate
• Solar
• Superhero

[geekwright]

The way it is working is with a new file xswatchDarkCss.tpl to hold the dark mode theme name.

If it is empty, everything will go on unchanged using only the theme specified in xswatchCss.tpl

If both are set, the directory specified in xswatchCss.tpl is used for light and the one in xswatchDarkCss.tpl is used for dark.

There are two sets of the three basic theme specific <link ... > tags, one with media="(prefers-color-scheme: light)" and the other set with media="(prefers-color-scheme: dark)"

With that everything just works according to how the user's browser answers the query. It is actually very smooth. Toggle the your system preference and if just follows along -- no reload needed, it just works.

I'll have PR to play with shortly.

[alain01]

Okayyy I understand the schema and it's very clear for me, a great solution (and automatic solution) and I'm too impatient ! ;-)

[alain01]

Ok ! All is ok now on Microsoft Windows 10 (Pro 64b). By default : light : cerulean xswatchCss.tpl / dark : slate (xswatchDarkCss.tpl)

On w10, change light to dark then see xoops theme : Automatic change !

Amazing Boss ! Thank you Richard

[cesagonchu]

Thanks!

[cesagonchu]

All that's left is to add a completely Dark theme on the administration side. The one we have has only the header in dark grey.

[alain01]

@cesagonchu The front end dark theme is ok now, May be you could close this issue, no ? For admin dark theme, you can follow https://github.com/XOOPS/XoopsCore25/issues/950 and participate.

[geekwright]

I'm in my corner hacking away, look back and the issue is closed. Sigh

[geekwright]

I do think a responsive theme is by far the most needed improvement, I have a soft spot for tired eyes wanting dark tones.

The dark theme in #1010 is a relatively small change. If it looks good, most of what is left is to update the colors in the less files and rebuild. Not a huge task.

[cesagonchu]

Sorry, I closed the topic because I didn't want to disturb any longer with my requests. If I had to clarify, sometimes my eyes hurt when I have white on the screen. The xswatch4 Dark theme is fine but the text fields are white. Concerning the administration side, I will test the themes proposed in Dark with pleasure.

[cesagonchu]

Thank you for this Theme proposal in https://github.com/XOOPS/XoopsCore25/pull/1010, there is progress. Thank you for taking the time to address the concerns of people with eye problems. Concerning the Dark admin theme: The contrast of the black with the colors is still a bit aggressive.

I advise you this great tool proposed on paletton.com:

The colors can be set to soft and in addition you can make simulations for people with eye diseases.

[mambax7]

I've made a quick hack of the Default theme, if somebody is interested. Maybe our theme artists could make it better? https://github.com/mambax7/defaultdark

[cesagonchu]

I will test tomorrow, thank you!