To confirm, this now automatically switches to dark mode if your device/browser is set that way? If yes, which previous version would be best to install where it’s manual. I don’t like the way dark mode looks for my forum and so I don’t want it to be automatic. But, I want the option available.
FriendsOfFlarum Night Mode
- Edited
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 { ... }
}
5 days later
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.
- Edited
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. 
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 ?
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.
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).
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
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.
danielunited
Yes, yes, I hope so too.
em... I executed this：composer require fof/nightmode:^0.4.0
- Edited
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.
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)
17 days later
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!