FriendsOfFlarum Night Mode

Valeyard

peopleinside Can I report a small issue maybe present also before?

Checkboxes like when you flag a post and need select an option or the check box to stay logged still have dark background if the light theme is active. Can be this fixed? The issue is resolved if the extension night mode is turned off.

Another small issue with the new extension is that night mode miss the night mode text.

Yes it can I've just reported this issue on the repo. In the meantime if you wish to fix it yourself use HTML Head Items to add:

<meta name="color-scheme" content="light dark">

It won't remove the wrong meta tat but adding a duplicate tag will fix the issue there, and then in Appearance > Custom Styles add this to your custom CSS:

:root {
  color-scheme: light dark;
}

Walys Can be hide via custom CSS?

#header .Header-controls>.item-nightmode {
  display: none;
}

datitisev

1.2.1

Fix inconsistencies in auto theme regarding forum vs browser styles (FriendsOfFlarum/nightmode58, Valeyard)
- Set the color-scheme property to dark/light depending on @config-dark-mode value

TB54

I didn't read all the 312 posts so maybe it has already been discussed, but a little feedback on this: the idea is great, but on some points, browsers "dark mode" extension handle things in a more interesting way, and it could be an inspiration for future update.

I mostly think about make the text bright/dark depending on what is behind (at least I think it's the reason).

Here is for instance a part of my forum on day mode:

Then in flarum's dark mode:

And here with "Dark Reader" firefox extension dark mode:

The text on the images stayed white.

Another example on "all topics" page.

In day mode;

In flarum's dark mode:

And in "Dark Reader" extension dark mode:

The left menu text has also been a little brighten up, more easy to read.

I have absolutely no idea of how much such a adjustment would be easy to integrate, of if it's something wanted by people making/using the extension, but I thought it would be good thing to share it.

luceos

TB54 the problem (or challenge) is that Flarum takes your primary and secondary color from your theme settings to base everything else on. This includes links. As such on Dark Mode the link color is based on a bright version of your primary color, this makes things harder to read. You could easily fine tune your theme with custom css/less. I think we could finetune this logic further, but it would require extensive testing with different color values.

TB54

luceos You could easily fine tune your theme with custom css/less.

That would indeed be pretty quick, and more easy than finding something which works fore very website, but I don't have access to the extension css on freeflarum (maybe you could put a field on the extension page to customize night mode css?).

luceos

TB54 go to Appearance - Custom Styles. You can browse this discussion for some ideas on how to customize the styling. Eg: https://discuss.flarum.org/d/21492-friendsofflarum-night-mode/275

TB54

luceos Oh ok, I already heavily changed the forum css but I didn't saw the (@config-dark-mode =true) mode. That's good, I will work on it, thanks!

Valeyard

TB54 Oh ok, I already heavily changed the forum css but I didn't saw the (@config-dark-mode =true) mode. That's good, I will work on it, thanks!

You can't use that in vanilla CSS. Ideally they would tag the light or dark mode onto the body element, but at present they don't - so there's no way in vanilla CSS (without the use of Javascript) to determine which setting the user has enabled.

I can make a feature request on github - the idea would be you add a custom class to the body like this:

<body class="no-touch fof-nightmode-light" ...> <body class="no-touch fof-nightmode-dark" ...> <body class="no-touch fof-nightmode-dynamic" ...>

Then you'd be able to select as usual using vanilla CSS:

@media(prefers-color-scheme: light){
  .fof-nightmode-dynamic a {
    color: navy;
  }
}
body.fof-nightmode-light a { 
  color: navy;
}
@media(prefers-color-scheme: dark){
  .fof-nightmode-dynamic a {
    color: blue;
  }
}
body.fof-nightmode-dark a {
  color: blue;
}

luceos you can use custom css with rules like these m4v3rick

Nope you can't, not in vanilla CSS. That's pre-compiled LESS and you need access to extend.php to do it that way.

DBurn

I like this option but unfortunately, I have made custom CSS under Appearance and I cant use Darkmode because of it. Could you add CSS override for dark mode, please? That would help in correcting what I modified for lightmode.

luceos

DBurn you can use custom css with rules like these m4v3rick

DBurn

luceos Thanks I have it all custom the way I want now.

clarkwinkelmann

Valeyard why do you need vanilla CSS support?

The Flarum "Custom CSS" field is actually Less. You can use and interact with all of Flarum's variables, including overriding their values. We named it "CSS" to prevent any confusion for people who don't know what "Less" is, but everything added by all extensions and that field all go through the Less parser.

TB54

Valeyard You can't use that in vanilla CSS. Ideally they would tag the light or dark mode onto the body element, but at present they don't - so there's no way in vanilla CSS (without the use of Javascript) to determine which setting the user has enabled.

Well it worked perfectly for me in the custom css field, i was able to adapt all as I wanted!

ash3T

How can I place the Night/Day Mode on the top navigation bar instead of under setting button? I see some flarum site has change the Night Mode on the top navigation bar.

TB54

ash3T How can I place the Night/Day Mode on the top navigation bar instead of under setting button? I see some flarum site has change the Night Mode on the top navigation bar.

Maybe this difference comes from the fact you're offline when visiting those forums?

Because for me, it displays night mode as a button only when I'm offline:

If I'm online, it becomes a part of the profile menu:

But no idea how to keep it the first way, sorry.

IanM

1.2.2

chore: use default settings extender, add missing import FriendsOfFlarum/nightmode59
Bump js deps

Updating

composer require fof/nightmode:"*"
php flarum cache:clear

davwheat

1.3.0

Add option to always have a theme toggle button on the forum header, even when logged in

Updating

composer require fof/nightmode:"*"
php flarum cache:clear

1.3.1

The last update introduced a JS bug which is fixed in this version.

Valeyard

Use the update command for updating:

composer update fof/nightmode:"*"
php flarum cache:clear

The benefit being you can update all FoF plugins at once using:

composer update fof/"*"
php flarum cache:clear

Which is probably what most people would prefer to be doing

clarkwinkelmann

Valeyard I would never include an "update all" command in official update instructions, for a few reasons:

More difficulty troubleshooting if an issue pops up after an update
Unexpected changes for the user if they have not read the changelog of the other extensions
Additional steps could have been suggested in the changelog of other extensions, like running migrations, executing a command or setting up new permissions

Forum owners are of course free to manage updates in any way they prefer, but blindly updating extensions via Composer can be dangerous because Composer itself has no mechanism to help with required or suggested pre- or post- update steps.

EDIT: as for the difference between require and update, in the context or a Flarum extension, require will actually update the requirement in composer.json if it isn't already *, while update will only constrain the version further down using the provided version. So while require vendor/package and require vendor/package:"*" save the version requirement differently, update vendor/package and update vendor/package:"*" have the exact same effect, making :"*" redundant.

davwheat

1.3.2

This update fixes an ongoing issue with Night Mode where stylesheet assets would not recompile on every request when Flarum was in debug mode. This issue has now been fixed. This issue mainly affects extension developers rather than production forums.

Updating

composer require fof/nightmode:"*"
php flarum cache:clear

« Previous Page Next Page »