FriendsOfFlarum Night Mode

therealsujitk

[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]

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

Ralkage

0.4.0 ⬆️

UI fixes for mobile view (FriendsOfFlarum/nightmode26).
Night Mode is now enabled for guests based on their device preference (FriendsOfFlarum/nightmode27) (no more being blinded late at night!).

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

Updating

composer require fof/nightmode

tolgaaaltas

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]

@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

tankerkiller125

[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.

[deleted]

tankerkiller125 excellent. Thanks

[deleted]

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

tolgaaaltas

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

tankerkiller125

[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]

tankerkiller125 Excellent. Thanks very much ! Let me know if you want me to test anything.

tankerkiller125

[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

[deleted]

@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 ?

Ralkage

[deleted] crack open an issue on GitHub so we can track it 😉

[deleted]

Ralkage Done - FriendsOfFlarum/nightmode29

[deleted]

tankerkiller125 no issues at all. Work takes priority.

User39

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.

tolgaaaltas

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

tolgaaaltas

For Flags:

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

Old:

New:

[deleted]

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?

Ralkage

[deleted] a change/feature was recently added where it now applies dark mode for guests depending on their device preference 🙂

I am slowly thinking about added an option to force enable or disable this feature for those of you who just want to have it as an option instead.

« Previous Page Next Page »