FriendsOfFlarum Night Mode

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

hf06

peopleinside

First of all, both Flarum and the dark mode plugin are working in the latest version.

Currently, when I enter the site in incognito mode with Windows 10 and the latest Chrome (both with dark mode active), it still uses day mode as the "system default."

I should mention that I want first-time visitors to use day mode, so I set the default forum theme to "day mode" in the plugin settings. Perhaps this is where the issue lies, and if I could completely remove the "system default" option, my problem would already be resolved.

When I log into the forum, as I mentioned, it works as I want it to. I can switch between day mode (system default) and dark mode without having an extra unnecessary third option. It's not exactly what I want, but it works as I need it. At least if I change the system default icon to day mode with CSS, that would be sufficient for me.

However, when I enter the site as a visitor, things get complicated, and three different options appear.

Edit: By the way, in the video you sent, there’s also an unnecessary third option, and I don't like that. I just want to switch to dark mode with one click and switch to day mode with another click. It’s that simple. I don’t need to complicate things.

peopleinside

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.

hf06

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.

« Previous Page