FriendsOfFlarum Night Mode

Wlork

By fixing Pallet Theme, we found a bug on this extension FoF/Night Mode.

If you force dark mode in Admin, it won't switch correctly to light mode.... However, the reverse works, If you clear dark mode in Admin, it works....

BrodyStone21

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.

datitisev

PARADOX Not sure if you resolved this. There should be errors in your Flarum log any time this happens, but since this seems to be a wider issue than this extension, I'd recommend creating a discussion inSupport.

Chato

Would it be possible to update the readme of the extension to show how to edit variables in light and dark mode?

MrCaspan

Question is it possible to add a .night-mode class to the body tag so that users can write custom CSS to target items only while in night mode? I don't want to edit the extension becuase an update will jsut overwrite it so if I do custom CSS for the 5-6 items that i want to look better in nightmode this works better!

navindra

I wonder if anyone might have some insights on why night mode doesn't work for me?

This is Day Mode:

This is Night Mode:

Fundamentally, what is the reason this doesn't seem to work correctly i.e. some parts of the site become unreadable?

If I were to attempt to fix this, should I approach this as a bug in the extension or a bug in my site?

Thanks!

datitisev

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.

BrodyStone21

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.

Umutcan

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

Umutcan

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

FAB3000

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

`/* Dark Mode - Change Background and Text Colors /
.App--dark {
--background-primary: #1e1e1e !important; / Page background color /
--background-secondary: #2b2b2b !important; / Boxes or secondary sections background /
--color-primary: #ffffff !important; / Main text color /
--color-secondary: #cccccc !important; / Secondary text color */
}

/* Links in Dark Mode /
.App--dark a {
color: #4da6ff !important; / Link color */
}

/* Change Button Background in Dark Mode /
.App--dark button {
background-color: #3a3a3a !important;
color: #ffffff !important; / Button text color */
}

/* Navbar Background in Dark Mode /
.App--dark .Header {
background-color: #252525 !important; / Navbar background /
border-bottom: 1px solid #444444 !important; / Navbar border */
}

/* Adjust Post Boxes and Streams in Dark Mode /
.App--dark .PostStream-item {
background-color: #333333 !important; / Post background color /
border: 1px solid #444444 !important; / Post border color */
}`

davetodave178

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.

datitisev

FAB3000 You should be able to use LESS to achieve this - see davwheat's answer for how to.

hf06

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

datitisev

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

hf06

datitisev The issue is that it seems like they don't want to use LESS code. Additionally, doing this would be more complicated for beginner users. In the other response, it also references the complexity of this.

Moreover, I don't think my statement was harsh. I said you provided incorrect information because I thought you made definitive claims.

I started with Flarum a month ago, and I've struggled a lot with simple tasks due to people like you, who make simple things harder by giving directions that claim something "cannot be done" in a definitive manner.

datitisev

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

hf06

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.

IanM

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

hf06

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?

peopleinside

hf06
Hi 😊

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.

I'm unable to replicate the behaviour you are facing as guest, I tried using Windows light and also Windows dark mode but all works as expected. What version of Flarum and of Dark mode are you using? Latest versions?
I tested with the latest Firefox and Edge.

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.

This regards your operative system dark or light mode, the forum will adapt his color to your operative system color schema.
As guest on incognito browser I can see all works fine.

You can watch a demonstration video here: https://mbcloud.peopleinside.it/nxtc/index.php/s/Ey9A6s7BATtnBFg

« Previous Page