[deleted] The black text seems to be a problem only with the night mode extension..

This is the text when night mode is turned on in administration:

This is the text when night mode is turned on using the extension:

This black text only appears inside the FoF/BestAnswer block, everywhere else it's fine.

      • [deleted]

      • Post #45

      therealsujitk yes, it's because there is no CSS for this extension.

        11 days later

        0.4.0 ⬆️

        📣 Shoutout to @tankerkiller125 for his Flarum-wide contributions!

        Updating

        composer require fof/nightmode

          • [deleted]

          • Post #47

          @Ralkage @tankerkiller125 is there any chance we can have a setting for either dark or light (or day / night) where we can force a theme for those who are not logged in ? Currently, I set this to night mode by default and every time I update the extension, I have to manually change it ☹️

          Thanks

            [deleted] I don't see why not, we would have to add a settings Module in the admin area and add a setting, but that shouldn't be to difficult. I can probably pull it off in a night or two.

                5 days later

                I hope this can fix all white areas.

                // For dropdowns
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;
}
// For back button (optional)
@media (max-width: 767px) {
.App-primaryControl>.Button, .App-backControl>.Button {
    color: #ededed !important;
}
}
// For user mention
body.dark .PostMention, .UserMention {
background: rgb(36, 36, 36) !important;
}
// For tags in posts
body.dark .DiscussionHero .TagsLabel .TagLabel.colored {
background: rgb(36, 36, 36) !important;
}
// For reply and view counters
@media (max-width: 767px){
body.dark .DiscussionListItem-count, body.dark .item-discussion-views {
        background: #2b2b2b;
}
}
// For discussion hover
@media (max-width: 767px) {
body.dark .DiscussionListItem-content:hover {
        background: rgb(36, 36, 36);
}
}

                Ralkage UI fixes for mobile view (FriendsOfFlarum/nightmode#26).


                Dropdown colors are wrong. If you visit Flarum with tablet, you can see tags are looks like a button with current codes. It should be like this.

                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;
}

                  • [deleted]

                  • Post #53

                  tankerkiller125 I don't see why not, we would have to add a settings Module in the admin area and add a setting, but that shouldn't be to difficult. I can probably pull it off in a night or two.

                  Any thoughts on this ?

                  Thanks

                      [deleted] I have a local fork right now that has the settings module. I have to get the setting passed to the front-end and add the logic and from there this should work. I might be able to do that this weekend.

                          • [deleted]

                          • Post #56

                          @tankerkiller125 In vendor > fof > nightmode > resources > less > forum > extension.less line 115 - each time I update this extension, I have to override as below

                              .App:before {
        background: rgba(0,0,0,0.1);
    }

                          This is required to match my existing theme - otherwise, the header is loaded with a style that seems to override which is in custom CSS. Can this be looked at also ?

                            [deleted] Unfortunately I won't be able to get around to finishing this PR this weekend, work has a critical customer facing issue that I need to find a resolution too and immediately start to resolve before the Chrome 80 release drops

                                I'd like a third option to set the night/day mode when logged in to "auto" or "system" so that it'll switch for the OS dark/light in the same way non-logged-in users have.

                                For Byobu and Polls extensions;

                                // FoF Byobu and Polls dark mode
body.dark .RecipientLabel, body.dark .DiscussionComposer-poll .PollLabel {
background: rgb(128, 128, 128);
color: rgb(255, 255, 255);
}
body.dark .DiscussionComposer-poll .PollLabel.none {
    background: transparent !important;
    color: #808080 !important;
}
                                14 days later

                                For Flags:

                                body.dark .FlagPostModal .checkbox strong {
color: #ffffff;
}

                                Old:

                                New:

                                • [deleted]

                                • Post #65

                                When you don't log in, the black color on your phone is mandatory. Can't choose day mode? How can I solve this problem?