The PR for per-device theme selection has been merged. However, I'd also like to improve the extension's dark theme system before releasing it.

Explanation

Currently, fof/nightmode has its own CSS that is mostly copied from flarum/core but with some changes - this CSS overrides the existing light theme when night theme is selected. The problem with this system is that it requires us to maintain a working dark theme & there are always issues and clashes with other extensions & styles. It also adds onto an existing large stylesheet file and makes it so either light or dark theme code is unused (as both are included).

The new system (FriendsOfFlarum/nightmode36) completely gets rid of our separate stylesheet. It overrides Flarum files (safely, not the actual files but acts as if they are) and creates two CSS files - forum-ID.css and forum-dark-ID.css (should work with other solutions, e.g. giffgaff who use forum.css?v=ID). The dark CSS file uses Flarum's own dark theme.

The problem with this new system is that it doesn't work very well with automatic detection & per-device settings. As the CSS file that is decided to be shown is through backend, that only has access to the global user theme (not per-device, cannot detect dark theme in browser either).

My current "fix" for this is to not include either CSS file & hide the forum until the extension's JS decides which theme to load & requests that file. Another solution would be to include both files and remove one once the page has loaded - this would increase load times though, and would look weird as well.

Update 07/19: I have chosen to include both CSS files when automatic mode is chosen. The browser chooses which to render through the <link> media query (it'll still load both files, seems to be the behavior in all browsers). Per-device settings will now be set to cookies so that the web server can access them.

Installation

!!! If you want to go back to the released version after testing this out, you WILL need to revert a DB backup.
!!! It is recommended that you install this version on a TEST forum and not a live one.

Either way, I'd like some people to test this new system out (includes per-device theme settings thanks to @davwheat) before it is released.
To test this PR, please make a backup of your database, then run

composer require fof/nightmode=dev-ds/use-less-variable
php flarum migrate

If you find any bugs, please check if it has been reported in other gamification versions by looking through the existing issues @ https://github.com/FriendsOfFlarum/nightmode/issues before reporting it.

    • [deleted]

    • Post #137

    datitisev Happy to test this. I'm just spinning up a copy of my live environment to do so.

      • [deleted]

      • Post #138
      • Edited

      datitisev First bug

      Error: Call to undefined method Flarum\Frontend\Assets::makeDarkCss() in /var/www/vhosts/phenomlab.com/dev.phenomlab.com/vendor/fof/nightmode/src/Content/Assets.php:24
        4 days later

        Some changes have been made to the test version that I wrote about earlier. It is close to release, if not ready yet.

          • [deleted]

          • Post #141

          datitisev I've been testing this with @datitisev - works fine with no issues. However, be warned that if you have a lot of custom CSS as I do, then you have some work to do 🙂

            4 days later

            0.5.0

            Migrating Custom Styles

            This update may break some custom styles on your forum, specially if you use the .dark class.

            If you are using .dark for a custom dark theme, use LESS variables instead.
            Examples:

            body {
 & when (@config-dark-mode = false) {
   // light mode
 }

 & when (@config-dark-mode = true) {
   // dark mode
 }
}

            or

            body when (@config-dark-mode = true) {
 // styles
 .CommentPost { ... }
}

            Changelog

            • Changed settings to automatic (browser/system), day, or night
            • Add per-device theme selection (FriendsOfFlarum/nightmode33)
              • Uses cookies to save theme selection
                • local storage not a good option because not accessible via PHP
            • Use LESS @config-dark-mode variable for night mode (FriendsOfFlarum/nightmode36)
              • Overrides some Flarum files
              • Requires dark mode to be turned off
              • Native Flarum dark theme

            Updating

            User settings should be properly migrated. If they fail to be migrated, everyone will just have the default theme (configurable in admin) by default.

            composer require fof/nightmode
php flarum migrate
php flarum cache:clear

              datitisev Thanks for the update. The appearance of the site is distorted when auto mode is on. No problem when one of the other modes is selected. there are no errors in the browser console.

                  mekici Did you run the command to clear the cache? If so, try uninstalling nightmode & reinstalling it.

                      datitisev
                      Steps

                      1. I removed the extension
                      2. I cleared the cache.
                      3. I uploaded again.
                      4. I cleared the cache.

                      The result is the same.

                          mekici Hm. I'm assuming your browser does not support the prefers-color-scheme query.

                          0.5.1

                          • Fix automatic mode looking wack in browsers that do not support the prefers-color-scheme (or something idk)

                          Updating

                          composer require fof/nightmode

                            Love the night mode, and I decided it was going to be the first EXT I try to debug. That said. Since I installed it, and I wanted it more as an option than a default theme. It has become my default theme for any user that's not signed in. I do not want this to be the case, has this been already addressed?

                              • [deleted]

                              • Post #150

                              L1fe Oh yeah... i reported this and i was hoping its in the latest update... crap 🙁

                                  L1fe [deleted] What guests see is the default option set in the admin settings. If it's set to automatic, it'll use the browser/system scheme. Changing that should change it for guests as well.

                                        L1fe Not in the appearance page, but in the extension settings. I assume you have my dashboard ext as the extensions page isn't shown, so go to Dashboard > FoF Night Mode, and click on the little settings icon.

                                          @datitisev

                                          mekici Have exactly the same problem, if "automatic" mode is selected, everything is destroid, like the picture of mekici.

                                          Also reinstalled the extension, with no success.

                                          Browser: Chrome