Dark/night Mode to ignore or add Less CSS on admin Dashboard

DownPW

Hi @all

Firstly, I'm a a beginner on Nodebb.

I use persona theme with default skin. I blocked the ability to change the skin to users on admin Dashboad.

I use a personalised css style on admin dashboard for default person skin :

I would like to add a dark/night mode who activate with a button/icon added at the top right next to the search for example.

I have find nodebb-plugin-night-mode by @psychobunny on github which corresponds to what I want:
https://github.com/psychobunny/nodebb-plugin-night-mode

But the only problem is that my custom CSS (on admin Dashboard) is always taken into account when I use dark mode.

Is there a possibility to force dark mode by ignoring it (Custom CSS admin Dashboard)? Or force another CSS style (dark) instead?

Sorry for my bad english.

Please pay attention to my request.

DownPW

Anyone have an idea?

PitaJ

There should be a class added to the body element .night-mode or something when it's enabled. You can put that before all of your CSS styles you want to apply only in night mode. Or you can use :not(.dark-mode) when you don't want it to apply.

DownPW

@pitaj

Thanks for your reply.

To understand well:

the directives that you give me are to be put in the CSS of the dashboard admin ?
or to modify on the file plugin?

Example: If I don't want this on Darkmode :

.categories>li, .category>ul>li{
    border: 1px solid #ffffff;
    border-radius: 5px;
    margin-top: 5px;
    background: #F5F5F5;
}

.topic .posts>li{
   border: 1px solid #ffffff;
   border-radius: 5px;
   margin-top: 7px;
   background: #F5F5F5;
   box-shadow: 0px 0px 2px #ddd; 
}

i wrote this:

:not(.dark-mode)
 .categories>li, .category>ul>li{
     border: 1px solid #ffffff;
     border-radius: 5px;
     margin-top: 5px;
     background: #F5F5F5;
}

:not(.dark-mode)
 .topic .posts>li{
    border: 1px solid #ffffff;
    border-radius: 5px;
    margin-top: 7px;
    background: #F5F5F5;
    box-shadow: 0px 0px 2px #ddd; 
 }

DownPW

@pitaj @psychobunny

Doesn't Work. have you an example of synthax please?

DownPW

I was found with body.lights-out directive on code of the plugin and it's work

Example:

body.lights-out {
 .categories>li, .category>ul>li{
     border: 1px solid #33FFA3;
     border-radius: 5px;
     margin-top: 5px;
     /*background: none repeat scroll 0 0 #191919;*/
     background: none repeat scroll 0 0 #191919;
    }
    
    
    .recent-cards .recent-card-container .recent-card {
    height: 200px;
    width: 100%;
    padding: 10px;
    position: relative;
    border: 1px solid #33FFA3;
    background-color: #191919;
    border-radius: 5px;
    margin-bottom: 10px;
}
}
```

dunlix

when you want to edit css without dark mode, edit it normally.
to edit stuff with dark mode, use

body.lights-out a {
YOURCSS
}

That is to edit the class "a"

the body.lights-out is the dark mode class for everything in that plugin you mentioned.

DownPW

@dunlix

body.lights-out a {
YOURCSS
}

doesn't work

just :

body.lights-out  {
YOURCSS
}

Work

How can I change with a wallpaper background?
My usual CSS code doesnt work this this synthax

DownPW

It's ok for me

dunlix

@downpw I meant for you to replace the YOURCSS