Night Mode by FriendsOfFlarum

GitHub license Latest Stable Version Total Downloads OpenCollective

Extiverse

A Flarum extension. Add a Night Mode 🌙 for your users to use on your Flarum forum! (THE LIGHT 🌞, IT BUUUURNSSS!!!)

  • A new "Night Mode" menu option will appear in your user options when you click on your avatar next to the notifications icon.
    Night Mode Option
  • A "Day Mode" option has been added as well to make the light appear again! (BEGONE, DANKESS!)
    Day Mode Option

Installation

Install manually with composer:

composer require fof/nightmode:"*"

Updating

composer update fof/nightmode

Links

OpenCollective

An extension by FriendsOfFlarum.

    • [deleted]

    • Post #2

    Does this automatically remove the reflar version ?

      I've noticed that there are other parts of the Night Mode setting that needs some love too and I will address them when I am able to. The goal is to make it look exactly like the native "Dark Theme" setting which is already in Flarum core and we are nearly close to having that happen!

      What I noticed is still missing:

      • Notification count indicator on the actual bell should not be white.
      • Switches such as those in the Settings area still resemble the "Day Mode" setting.
      • UserCard control drop-down (not clicked on) should be more transparent/lighter like in the actual Dark Theme.
      • Upload/edit avatar icon should actually be white.
      • Possibly add Night Mode to the Admin CP as well because Admins need a little love too especially late at night 💝

        Quick fix for mobile experience:

        1. Go Administration
        2. Click Appearance tab
        3. Click Edit Custom CSS buton and add this code 
          // FoF Night Mode sorunları
body.dark .Dropdown-menu > li > a:hover, body.dark .Dropdown-menu > li > button:hover {
    background: rgb(33, 33, 33) !important;
}

body.dark .Dropdown-menu > li > a:hover, body.dark .Dropdown-menu > li > button:hover {
    background: rgb(33, 33, 33) !important;
}
body.dark .Dropdown-menu > li > a, body.dark .Dropdown-menu > li > button {
    background: rgb(26, 26, 26) !important;
}
@media (max-width: 767px) {
.App-primaryControl>.Button, .App-backControl>.Button {
    color: #ededed !important;
}
}
body.dark .PostMention, .UserMention {
background: rgb(36, 36, 36) !important;
}
body.dark .DiscussionHero .TagsLabel .TagLabel.colored {
background: rgb(36, 36, 36) !important;
}
@media (max-width: 767px){
body.dark .DiscussionListItem-count, body.dark .item-discussion-views {
        background: #2b2b2b;
}
}
@media (max-width: 767px) {
body.dark .DiscussionListItem-content:hover {
        background: rgb(36, 36, 36);
}
}

          I hate to double post but it seems this issue is with anything that has a drop-down menu or count like the notifications bell/charm 😂 🤦‍♂️ 🤦‍♂️ 🤦‍♂️

          @tolgaaaltas if you find any other oddities, please continue to report them 🙂

          [deleted] care to share what you've noticed is still broken/not working? I think the goal here is so that you don't have to rely on adding your own fixes and the more that is reported, the quicker these issues can be addressed and everyone can be happy in the end 🤗

              kolyasapphire just read about this particular media query after your post 🙂 only issue I see is that Night Mode can only be activated by a user that is logged into your forum as it is a user action so guests wont reap the benefits of this extension. This is also due to the fact that a new user preference key is added to a user who clicks on the "Night Mode" button for the first time accompanied by a true or false value indicating whether or night Night Mode is enabled or disabled.

                  15 days later

                  Great extension, this functionality should be in core really. A few suggestions that I think would greatly improve this extension:

                  • It doesn't work if you use dark mode by default. Should it check for dark mode and offer a light mode toggle instead in this situation?
                  • Being able to use different logos between light and dark mode would help greatly in situations where you normally present a logo with black or white text.
                  • Being able to adjust the theme colors for light and dark mode independently. Having a darker accent color in light mode and a lighter accent color in dark mode would improve visibility.

                    Tiixxel yes, this issue was already brought to our attention and a fix is coming soon to address that 😉

                    SqueakyBlum I don’t completely understand your 3rd suggestion but would you be able to provide some examples (or mockups) so I may better understand this suggestion? 🙂

                          Tiixxel All this little problems can be easylly fixed with a little bit of css on body.dark .Dropdown elements.

                            Ralkage I thought about this more and how it could work within Flarum's options and UI. The Appearance tab assumes a single appearance is being used because Flarum isn't designed to have user selectable themes. Lots of these options become confusing when this toggle is introduced.

                            I made a mockup for how my ideas might be implemented in the admin panel through an extension. Admittedly this strays a bit from the name "Night Mode" but it covers the same and more use cases by addressing some of the potential problems I mentioned.

                            Sorry about the colors. I couldn't actually use these colors as-is with a toggle despite them looking decent in dark mode because that green looks terrible on a white background. As-is you need to pick your colors around this toggle when ideally you would be thinking about which colors work best together in each given appearance.

                              8 days later