FriendsOfFlarum Night Mode

Operator

To confirm, this now automatically switches to dark mode if your device/browser is set that way? If yes,

Yes.

which previous version would be best to install where it’s manual.

No need to install previous version as this new update is very robust.

But, I want the option available.

In admin panel go to extension settings, click on the three dots and change settings by choosing either; Automatic (based on browser or device options), Day Mode, or Night Mode.
In your case; select Day Mode which would keep your current theme. Meanwhile this changes would affect only existing users who have not manually selected a theme.
Which means other users including you whom your device has automatically selected a mode would have just a simple task of selecting Day Mode to use current theme this time as a front-end user.
Note: This setting is also available for each user in the Profile Settings.

I don’t like the way dark mode looks for my forum and so I don’t want it to be automatic.

Have you thought of customizing your theme to suite your needs in Night Mode?

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 { ... }
}

010101

Operator In admin panel go to extension settings, click on the three dots and change settings by choosing either; Automatic (based on browser or device options), Day Mode, or Night Mode.

Ooo, didn’t realize there were settings. Thank you!!

Night mode looks fine at my forum it’s just that I’d prefer day mode to be default no matter what. If someone wants to change to night mode, at night, for easier reading they may do so.

I’m not sure how I feel about the latest trend where you set your device or browser to dark mode then sites with this feature are automatically dark all the time. When iPhone first came out with this I thought I’d love it. I immediately put my iPhone into dark mode. Then one day I was like, “Hmm, I’m tired of all of my apps having a dark background ALL of the time.” So I switched my iPhone back to normal.

I think this dark/night mode stuff should be time based or always manual via a switch per site. I don’t want to always be in the dark.

Now with this extension I know individual users can also adjust things in their settings so that helps. I just over worry about folks who may not know how to do that. Or losing a visitor because of it. Example probably extremely rare scenario: Person doesn’t realize they have night mode turned on within their device settings. Or, they don’t realize this will automatically turn some websites dark. They stumble upon my forum, it’s automatically dark in the day time and they think, “I don’t want to join this forum if it’s always these colors.”

It may be a non-issue. I tend to make up these rare scenarios in my head which may never happen. 🤪

Gatsu

datitisev Hi, thanks you for this update.
I think it doesn't work with a custom CSS theme.
I had change background's color and if I active night mode, I see only a widget (welcome statics widget) in black, not other.

Operator

Gatsu

I think it doesn't work with a custom CSS theme.

It works.

I had change background's color and if I active night mode, I see only a widget (welcome statics widget) in black, not other.

Just as you configured a custom theme for your current design, you need to also create another style for what happens when it is in night mode.
For example;
Let's say I have a custom CSS

.body {
background: #FFF;
}

Which means if I want this colour to change in Night Mode, I would the add another rule to the custom CSS

body when (@config-dark-mode = true) {
.body {
background: #000;
}
}

My Final CSS would then have 2 Rules to the same class name at different instances.
My custom CSS

.body {
background: #FFF;
}

body when (@config-dark-mode = true) {
.body {
background: #000;
}
}

The above code would display a white (#FFF) background in Day Mode and a black (#000) background in Night Mode.

Gatsu

Operator Thank you very much.

datitisev

iwoow I will not be adding the .dark class back, and we won't give support if you're using an earlier version (I see you installed ^0.4.0, so this is why I'm saying this).

You can customize the styles for light mode & dark mode separately by either using the Flarum CSS variables @ https://github.com/flarum/core/blob/v0.1.0-beta.13/less/common/variables.less like background-color: @body-bg or following the code shown by me (datitisev) and Operator (Operator)

Kylo

010101 you've got a point there. I may never know the discuss got this extension installed if luceos doesn't mention it in the "Dev Diary: Beta 14" discussion.

datitisev

010101 Kylo The day/night mode button in your session dropdown still exists - this should be an easy way to find that the site has a dark mode.

010101 Example probably extremely rare scenario: Person doesn’t realize they have night mode turned on within their device settings. Or, they don’t realize this will automatically turn some websites dark. They stumble upon my forum, it’s automatically dark in the day time and they think, “I don’t want to join this forum if it’s always these colors.”

Are you suggesting some feature here? Users can override the forum's selected color scheme (through extension settings) by going to their settings page or clicking on the day/night mode button in the session dropdown.

Kylo I may never know the discuss got this extension installed if luceos doesn't mention it in the "Dev Diary: Beta 14" discussion.

I don't think the site should be screaming the fact that you can enable/disable a dark theme - that seems to obnoxious. Won't most users see the option when they click on their name for their profile or settings ?

tankerkiller125

010101 I think this dark/night mode stuff should be time based...

Fun fact Android can do this in version 10/11 I believe. Also as noted by @datitisev this extension does in fact give the user power over it via the drop down.

Kylo

datitisev I don't think the site should be screaming the fact that you can enable/disable a dark theme - that seems to obnoxious.

Well it's an opinion. I was thinking about this sometime in the past and ended up adding sun/moon icons right next to the notification bell icon (this is not a suggestion btw).

010101

datitisev Are you suggesting some feature here? Users can override the forum's selected color scheme (through extension settings) by going to their settings page or clicking on the day/night mode button in the session dropdown.

No feature suggestion. I did not have the latest version installed where you now have an admin setting to turn off automatic based on device settings mode. So, I’m good now.

Gatsu

Dark mode works perfectly with chrome desktop mode.
But if I go with chrome mobile (android) dark mode is not complete, the background below remains white

iwoow

When I switch to night mode, I want the body tag to change from <body class="no-touch"> to this: <body class="no-touch dark">
Because I find it easier to customize the night mode css this way.
How should I modify the plugin code? Which file to modify?
Thank you.

iwoow

danielunited
Yes, yes, I hope so too.

iwoow

em... I executed this：composer require fof/nightmode:^0.4.0

ctml

Is it possible to use a different forum logo with dark mode toggled on? I have black in my logo and it is understandably very difficult to see/read with dark mode enabled. I saw this in another thread but automatic day/night mode based on time of day would be a cool feature! Great work here btw!

MartinJD

ctml i would also really like a way to change forum logo for light and dark if possible please...

datitisev

ctml MartinJD What you could do is use a background image through CSS instead of the actual logo. through the Flarum admin. Then you can check the @config-dark-mode variable and change the value of either a variable with the URL or the CSS itself for the logo.

TeddHUN

I installed the Extension but i got server error 🙁

datitisev

TeddHUN Are you on beta 14? This extension is not yet compatible with beta 14.

« Previous Page Next Page »