FriendsOfFlarum Night Mode

navindra It's probably due to your color theme settings. I don't remember right now exactly how the text/background colors are calculated from them, but I know that it doesn't always look great due to the contrast.

Wlork did you ever fix this? Mine does this as well, I’m going to disable the extension until it’s fixed or until I find a custom workaround.

My site experiences a bug when using this extension. If I don't have the default mode set in the appearance settings to light mode, the extension will not work. Toggling between dark/light mode when the default mode is set to dark does nothing.

Is there an ETA on a time for a fix on this issue? I prefer how my site looks dark, but I do want to have the option for people to toggle to light if they desire.

Can we use different logos in night mode and day mode?

https://discuss.flarum.org/d/29500-different-theme-different-logos

@Ralkage how can i change the colors from dark mode or light mode?
Doesn't seems to work with that code in CSS:

FAB3000 I don't think you can use .App--dark ... {} like this. As far as I can see it, fof/nightmode doesn't add a class somewhere in the scaffolding of the DOM. You would rather have to use a media query which checks for the preferred color scheme like this: @media (prefers-color-scheme: dark) {}. Please let me know if this helps, or you still have issues.

FAB3000 davetodave178 datitisev You're giving incorrect information.

You can write custom CSS for dark mode as follows using the admin panel:

/* DARK MODE - HEADER BLUR */
body when (@config-dark-mode = true) {
.App-header {
background-color: rgba(20, 25, 31, .7) !important}
}

/* DARK MODE - LINKS IN DARK MODE */
body when (@config-dark-mode = true) {
.a {
color: #4da6ff !important;}
}

huseyinfiliz I don't believe the information I linked is outdated/incorrect? Just another way of perhaps doing the same thing. Both work when I tested them locally.

To summarize, one can write the following in Admin > Appearance > Custom CSS (LESS) -- or in an extension when developing it:

body {
  & when (@config-dark-mode = true) {
    // Set app header opacity to 50% when in dark mode
    .App-header {
      opacity: 0.5;
    }
  }
  & when (@config-dark-mode = false) {
    // Set app header opacity to 100% when in light mode
    .App-header {
      opacity: 1;
    }
  }
}

The following accomplishes the same thing:

.App-header when (@config-dark-mode = true) {
  opacity: 0.5;
}


.App-header when (@config-dark-mode = false) {
  opacity: 1;
}

Or this as well:

.App-header {
  & when (@config-dark-mode = true) {
    opacity: 0.5;
  }
  & when (@config-dark-mode = false) {
    opacity: 1;
  }
}

huseyinfiliz I didn't say your statement was harsh? I was just confused as to what you were talking about.

I still think there's some confusion somewhere - the code you wrote is LESS, as is the one in my reply afterward. The "Custom CSS" field in admin actually takes in LESS -- the selector when (@config-dark-mode = ...) does not work in regular CSS since it references a LESS variable.

I also don't believe I claimed something could not be done a certain way? The main reason I restated your & davwheat's answer in my post was to consolidate it in a single place.

datitisev You are right, I apologize. I didn’t know that the CSS code I provided was LESS. As I mentioned, I am new here, and I misunderstood your initial response as 'you can't do this with Custom CSS.'

I thought that the 'Custom CSS (LESS)' mentioned in your first instruction referred to a feature added by a plugin rather than the default Custom CSS option.

In summary, you are right, and I apologize for the misunderstanding.

1.6.0

What's Changed

• chore: enable phpstan by @IanM in FriendsOfFlarum/nightmode72
• chore: refactor settings, general cleanup by @IanM in FriendsOfFlarum/nightmode75
• feat: Provide an option to display the sun or moon icon in solid by @IanM in FriendsOfFlarum/nightmode76

Full Changelog: FriendsOfFlarum/nightmode1.5.3 → 1.6.0

I love this plugin and am absolutely in love with dark tones, more specifically dark mode. This is because I suffer from migraines, and I feel like my symptoms are triggered more when I stare at white light for long periods of time.

Anyway, as much as I love your plugin, I can’t seem to fully grasp how it works. When I log in as a member, I can switch between dark mode and system default (day mode). However, when I visit the site as a guest, I enter in system default (day mode), and when I toggle between dark and day modes, it stays in dark mode.

So, does system default mean the browser/operating system’s dark mode, or does it refer to a default mode set by the admin panel? I can’t figure it out.

I would like to remove the system default option completely and just have the option to switch between day and dark modes in the menu. Otherwise, even as the site admin, it’s confusing for me.

Could you please provide some clarification on this matter?

I understand you.
Currently seems it's not possible to decide to exclude, from the plugin the settings to adapt the night mode to the operative system mode.

It's an useful option but maybe not for you but this seems cannot be directly excluded at the moment.

peopleinside Yes, I was trying to learn this too. So, whether it's possible or not. In all the CMSs I've used so far, the system worked like this:

If there was a dark mode that would work according to the system, and if the system was in dark mode, it would open the site in dark mode, and the user could switch to light mode with a click, and back to dark mode with another click.

So, if we can see the user's system default, let's start directly with either dark or light mode, and the user can switch to the other appearance mode whenever they want. I think having a third "system default" button for switching is unnecessary in any case.

Perhaps I missed the post that explained this, but I how can I customize the colors for the dark mode?