FriendsOfFlarum Night Mode

danielunited

Would it be possible to match night mode according to the user's OS theme? Similar to what duckduckgo.com did.

tankerkiller125

danielunited there is currently a pull request for this right now

Ralkage

danielunited as tankerkiller125 stated, there is a PR under review that I need to make time for, but it will be looked at soon 🙂

danielunited

Ralkage That's amazing. I've said it multiple times here, but I find it absolutely mind-blowing how dedicated and involved you guys are. I'm new to open-source projects and it's just heartwarming to see the effort you put in. Sorry if I'm being over-dramatic 😆

therealsujitk

therealsujitk What about the issue I mentioned here?

[deleted]

therealsujitk you can change that with css

therealsujitk

[deleted] Alright! Thanks

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

« Previous Page Next Page »