Changing the colors of Birdnet PI

[Hiemstra87]

Hi all,

I'm searching for all the places where I need to change color variables to give my Birdnet PI another look. I've found a lot of color definitions in the .css, and can adjust most background and button colors.

What I can't find is the place where I can define the color of the following:

Sorting buttons:

BG color of the created images for the "Overview"/daily charts/weekly report tabs

Someone care to point me in the right direction here?

Kind regards,

Bouke Hiemstra

[Hiemstra87]

Bit of fiddling, but did find it. Daily_plot.py has plotly colorscales (2places) that was easily set to Greys. I've now have 3 shades of grey defined and the Plotly color scale figured out. If i have time this weekend, i want to see if i can put them in a variable that i can set in the config page.

Next step after that would be to fiddle with the images.

[alexbelgium]

The best would be if we could link the colors to the config color_scheme variable of light/dark that we are using to set the themes, not sure if this is feasible...

[Hiemstra87]

Not a python expert, but how do we exchange the variable between Py and Php/css? Use a database or file to pass info back forth?

To define one of the predefined colors of Plotly, we can add a variable based on the used CSS

[alexbelgium]

mmh this might be tricky indeed... perhaps we can just keep as is then to avoid complexifying things

[Hiemstra87]

For now we let it rest, i'll dive in to some Plotly examples coming week to see if there is a simpler solution.

[Emmo213]

I actually just coded this today to switch the daily chart to use the color theme selector. I'll upload it tomorrow so people can have a look.

[lloydbayley]

When did we get a dark mode? I must have missed that! Just had a look. Not to my liking. I'll stick with light.

[Hiemstra87]

just wait till we get Pink mode up and running 😉

[lloydbayley]

Jesus! 👀

[alexbelgium]

Hi, here is the css (thanks chatgpt!), and the result
pink-style.css.txt

[lloydbayley]

You must LIKE hospital food..... Problem is, you're a long way away so I don't think you need worry about violence! 😁

[Emmo213]

Oof, I don't know about pink but a nice blue theme could be nice.

[alexbelgium]

Actually the thing is just to copy paste the initial CSS in chatgtp and ask to generate one in a hue of blue! And to generate several then choose the best :) with the way we have coded the light/dark mode adding new themes is extremely simple

[Hiemstra87]

Just add the pink to the collection, might make someone really happy.

EDIT:
Let's hope we can get the charts in the css too, that would finish the looks.

[alexbelgium]

Ahah the pink was more a joke, should I really add it??

[Emmo213]

Doesn't hurt. You have it done already, right? Hiemstra87 is right - somebody might love it.

[Hiemstra87]

My daughter might get interested in birdwatching with this..

[Emmo213]

I added a pink chart, and cleaned up the code a little so it's easier to add more themes in the future. Ideally the colors would be in the CSS but that's a larger rewrite I think.

[Emmo213]

Added a blue chart too for a future blue theme. I'm going to wait for any more until my PR is pulled, just in case.

[Hiemstra87]

Wow, nice collab! Can't wait to see the results with some extra colors.

[alexbelgium]

Ahah nice indeed! Is a transparent background possible for the colored part ? As the page background has already a color, it would therefore give it to the graph without needing one set of colors per theme. There could be therefore only light (black font) and dark (light font)

[Emmo213]

Good idea! I made that change so the chart background is now transparent.

Edit: although that messed with the dark theme so dark has a background and the other themes are transparent.

[Hiemstra87]

For using css for the color scheme, GPT said the following warning. Is this applicable for Birdnet Pi:

Note: Matplotlib does not support direct integration with CSS files. The code above uses CSS classes as placeholders for the color values you define in your CSS file. You need to find a way to link these CSS classes to the actual styles, which can be done with a web framework such as Flask or Django if you are building a web application, or by writing a custom parser that translates the CSS classes into matplotlib styles.”

[Emmo213]

I've created a new pull request to use the file based settings.

[alexbelgium]

Hadn't had much time to look lately but I'll have a bit more time soon