[Feature] Night mode / day mode

[nicogodet]

Hello !

Nice job you've done here !

After #93 is fixed, it could be nice to have a feature to be able to switch automatically from original theme (the white one) to Breeze dark at evening and switch back to white theme in the morning.
Instead of automatically, it could be user defined schedules.

I didn't look at the feasibility of a such feature (caching, sun set and sun rise times, ...)

Regards

[mwalbeck]

Hi,

I think this could definitely be done, but so far I've maintain the position that I prefer not to have any logic in the theme. Currently the theme is only Sass, except for the php needed to load the stylesheets. That means the worst that can happen if you install the theme, is that the stylesheets for your Nextcloud instance might break, but that's it. Now this is not a hard stance, but a decision taken in order to reduce complexity, in part because of time constraints, a lack of compelling features and/or a lack of demand for said features. I do have a few features, that could be interesting to add, to allow the end user more control over the theme. But alas, it'll be something for when I feel I have the time to properly develop and maintain it.

On a little bit different note, but kind of related, I would consider adding support for the newish prefers-color-scheme media query if a clear plan for the implementation can be made. It might in time (maybe already, I haven't looked), be able to accomplish the desired functionality with the help of OS, browser or browser add-on functionality.

A quick link to MDN for anyone who's interested:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[Thesola10]

To avoid logic into the theme, maybe you could make it so the theme only applies when selected in "Accessibility options" like the official dark theme?

[mwalbeck]

I would really love to implement per user theming like the official dark theme, instead of all or nothing, but I haven't found a way to do it so far. I need to have another look at the api to see what exactly is possible, but overall it seems full system theming through the app api wasn't really planned, it just kind of worked out.

It will without a doubt require some logic, if it's possible, but it's more or less the killer feature that I would change my current stance for.

[mwalbeck]

It must admit, I must have been staring myself blind on the solution. I had in my head that the official dark theme was part of the actual Nextcloud core, which in reality, it isn't. It's completely apart of the accessibility app. It seems like I can base a solution for per user theming on that, as API documentation for Nextcloud is definitely not one of Nextcloud's strong points. Now the accessibility app does use a few private API's but it doesn't look like they are needed for what I want to do.

I'll open up a new issue so this issue doesn't get completely sidetracked. When/If the per user theming functionality is done, then I would definitely be open to implementing this as well.

[gitaarik]

Hey @mwalbeck, I understand that by now per-user theming has been completed? Very nice work indeed :). So do you have an idea how to proceed with this feature, enabling/disabling the theme based on the system settings? I would like to give it a try too if you could give me some pointers.

[mwalbeck]

Hi @gitaarik, thanks for taking interest. Yes per-user theming is done, so there is nothing stopping this feature being implemented other than getting around to do it.

Currently for the per-user theming, the user is asked if the theme should be enabled or disabled, that value is then stored in the database and pulled to check if the theme should be enabled, if yes then the styling is added to the styling pipeline.

You can see the very simple main logic for the theme, that checks if the theme should be enabled, in lib/AppInfo/Application.php.

For storing config options, Nextcloud has a pretty nice and simple system for user and app settings. You can see how that is currently done in lib/Controller/SettingsController.php

For a user defined schedule, I imagine the a very similar process. Store the times and then figure out a simple check to run in Application.php to see if the theme should be applied based on system time.

It would probably make a lot of sense to handle all time in UTC and then convert it back and forth the local time zone of the user, when displaying or getting times.

Under lib/Settings you can find the 2 php files that calls the templates for showing the settings sections. The templates can be found under templates. I also use a bit of JavaScript, but only to make post requests when changing a setting, so the app sticks to the Nextcloud style of not really having any apply buttons.

I hope this little overview makes sense. Do let me know if you have any questions. I can also recommend having a look at the Nextcloud developer docs, it can give a nice overview of the Nextcloud app structure, but there are a lot of edge cases when it comes to this app/theme in particular, so don't hesitate to ask questions if you have any.

[gitaarik]

Hey @mwalbeck, thanks for your extensive explanation! I haven't found time yet to look into it, but I would like to do it eventually. Will keep you updated about it.

[auge8472]

What's with following the users system settings (if available) with the already mentioned prefers-color-scheme instead or as alternative to setting the daytime for theme changing in the users Nextcloud-settings? So there would be four ways.

1. follow OS-setting, otherwise …
2. light theme only (manually)
3. dark theme only (manually)
4. set time to change (manually)

If my operating system provides such setting I would not like to set it again and again for different services with their own solutions. I would prefer it if the software respects the decison I made on the side of my system.

[mhzawadi]

any news on this? I would love the theme to change as my laptop changes to dark mode, Im happy to test if needed.

[untbu]

@mhzawadi you can simply add the prefers-color-scheme css media query to Breeze Dark's css. If all the css is disabled, the normal one is used. I created a pull request with an option for it.

[mhzawadi]

Hey, just pulled the current master and the auto witch with system settings is amazing 😃

Then is it getting prime time?

[mwalbeck]

Hey, just pulled the current master and the auto witch with system settings is amazing smiley

Then is it getting prime time?

Yes! A new release is now out for both NC 21 and 22 with this feature included! Thanks again to @untbu for the pull request!