FriendsOfFlarum Night Mode

datitisev

mekici Hm. I'm assuming your browser does not support the prefers-color-scheme query.

0.5.1

Fix automatic mode looking wack in browsers that do not support the prefers-color-scheme (or something idk)

Updating

composer require fof/nightmode

L1fe

Love the night mode, and I decided it was going to be the first EXT I try to debug. That said. Since I installed it, and I wanted it more as an option than a default theme. It has become my default theme for any user that's not signed in. I do not want this to be the case, has this been already addressed?

[deleted]

L1fe Oh yeah... i reported this and i was hoping its in the latest update... crap 🙁

datitisev

L1fe [deleted] What guests see is the default option set in the admin settings. If it's set to automatic, it'll use the browser/system scheme. Changing that should change it for guests as well.

L1fe

datitisev That's not the case for me. imageofappearance

datitisev

L1fe Not in the appearance page, but in the extension settings. I assume you have my dashboard ext as the extensions page isn't shown, so go to Dashboard > FoF Night Mode, and click on the little settings icon.

SecurityDog

@datitisev

mekici Have exactly the same problem, if "automatic" mode is selected, everything is destroid, like the picture of mekici.

Also reinstalled the extension, with no success.

Browser: Chrome

datitisev

SecurityDog

If this happens to you, can you check if both files exist?

If you look at the source code of the page, you'll see two elements like this in <head>

<link rel="stylesheet" media="not (prefers-color-scheme: dark)" class="nightmode-light" href="<HOST>/assets/forum-ID.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" class="nightmode-dark" href="<HOST>/assets/forum-dark-ID.css">

Or you can run the following in the JS console (still developer tools) to get the links to the CSS files.

$('.nightmode-light, .nightmode-dark').map((i, o) => o.getAttribute('href')).each(console.log)

SecurityDog

datitisev Both exists.

datitisev

SecurityDog Do you have a live URL where I could reproduce the issue? If you don't want to post it here, my discord is datitisev#7559.

datitisev

0.5.2

Fix issues with automatic mode & light theme in Chrome
- Reverted changes from 0.5.1
- Completely removed media query for light theme
  - not doesn't seem to be supported
  - the dark theme overrides light theme if prefers-color-scheme: dark matches

Updating

composer require fof/nightmode

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.

wloot

code block looks buggy in dark mode.

datitisev

wloot This extension's "night mode" is just Flarum's dark mode now. Barely any CSS issues will be because of this extension. Any styles issues will be because of custom extension/forum CSS or Flarum's own CSS.

To add onto that, I cannot reproduce that issue locally.

danielunited

Hey, can you restore adding the 'dark' class to the body if the night mode is turned on? It makes additional CSS customization possible.

Kyrne

danielunited you can do custom LESS like this in place of .dark:

body {
 & when (@config-dark-mode = false) {
   // light mode
 }

 & when (@config-dark-mode = true) {
   // dark mode
 }
}

body when (@config-dark-mode = true) {
 // styles
 .CommentPost { ... }
}

iwoow

danielunited
Yes, yes, I hope so too.

010101

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.

robinodds

010101 0.4.0

Operator

010101

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

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)

« Previous Page Next Page »