Feature proposal : darkmode

[alexbelgium]

• [x] create dark-style.css
• [x] modify views.php to take into account dark-styles.css instead of styles.css
• [x] create option in config.php and link with birdnet.conf (to align with how other options are managed)

Proposed style :

[alexbelgium]

Hi, still in draft but what do you think would you be interested?

it would be super simple : have a dark-style.css, a variable in birdnet.conf that says if light (default) or dark, and an icon to switch between both

[alexbelgium]

css should be OK as long as people like the colors :-) of course we can adapt easily ; for example if people prefer a greener gray

[alexbelgium]

Ok, all should be good now. In the way the code is set, we could even create additional color schemes and allow users to change colors beyong light/dark. There is no automatic switch as it might be quite complex to implement.

[Nachtzuster]

Hi, still in draft but what do you think would you be interested?

I don't care much about dark themes personally, but I guess BirdNET-Pi users might :-)

I'll look into this later this week

[alexbelgium]

Thanks!

Optimisation of css remaining :

• drop-down selection in options are less readable, but i tried to avoid modifying the php pages. It would require to set a style I think specifically for those to correct their background
• logo background on smaller screens

[Nachtzuster]

Code-wise this looks fine. I'm guessing you're still finetuning for now, so let me know when you're done

[alexbelgium]

Thanks! I have solved the issues that I was raising above and will just have last look end of the week to be sure all is fine

[alexbelgium]

I guess it's good enough to merge. I don't see anything standing out and I've added an auto reload (same as for site name change) so that users directly see the impact of changing the color scheme

[Nachtzuster]

... so I went to the dark side: a couple things are still 'light themed' tools->System Info, tools->File Manager and tools->Database Maintenance

These are kinda expected, these are not trivial to convert, I guess. The plan is to keep these as-is for now?

[alexbelgium]

Well I had a look but it would probably require changing the logic of how to pages (filebrowser and systeminfo) are called. Currently it seem a light theme is hard coded, so we might have to call them those with a specific argument from which they derive their color scheme. I can do that but it would a bit complexify the system

[Aixsponsa]

I was working on a better theme with dark mode support awhile ago but scrapped it. I'm not the best with Git but I would imagine it's somewhere in my long list of commits (I was doing a lot of testing at the time). It worked really well if I remember correctly. I just had to do a lot of changes to make everything look polished, which is when I stopped.

[alexbelgium]

Thanks ! I'll have a look. I didn't really want to recreate everything, just change the main css in a quick manner ;) I don't have that much time either to really develop a whole new theme... But we can start like that and move on to something more complex later !

[Nachtzuster]

Well I had a look but it would probably require changing the logic of how to pages (filebrowser and systeminfo) are called. Currently it seem a light theme is hard coded, so we might have to call them those with a specific argument from which they derive their color scheme. I can do that but it would a bit complexify the system

I'm fine with merging your work as-is, just say the word

[alexbelgium]

Then let's go! And if I find a fast & easy solution for the third party tools (filebrowser and phpsysinfo) i'll make another pr - anyway it is not a core functionality

Thanks!

[bdeschut]

@alexbelgium It's silly, but wanted to let you know anyway. When using dark mode, the "X" to close the little detections over 30d graph is almost invisible:

[bdeschut]

@alexbelgium Same for the drop down menu's in tools > settings:

[alexbelgium]

Thanks, I'll start a pull request to improve