Add dark mode feature

[tomasoignons]

I added a dark mode feature, adding a dynamic button on the sidebar, and using tailwind dark mode class system.

Here are the previews :

Edit : also added dark theme in the testing, did'nt know they were custom components

What needs to be done to perfect :

• Polish the colors. I made some decisions about the colors, to keep the blue spirit, and for the moment I am satisfied with the result. However, there are some colors that I didn't change (for example the orange one).
• Rework the gifs and images to not have the white border, which is really ugly in dark mode (that is the number 1 priority)
• Rework the Light logo to have a transparent background

Otherwise I am satisfied about how it turned, it may not be perfect, but it is better than nothing.

I also integrated a new sunIcon, taken from https://tablericons.com/, a really cool website with a lot of open source icons.

this pull request directly respond to the issue #387

[martinjaggi]

amazing, thanks!

[JulienVig]

Amazing work!! It's looking great, thanks a lot!

I have a few thoughts on the design, let me know what you think:

1. I think that we should be careful about not going too hard on the blue as almost everything is in currently blue (I'm suggesting some ideas in the following)
2. The text color isn't very consistent throughout the website (sometimes white, blue and gray). I think homogenizing it to white may be more legible (and stand out more). In my opinion, the more important the text is (e.g. titles) the more it should stand out, e.g. the whiter it should be. Less important text can be darker shades of white and gray. This is up for debate of course, I'm not an authority on this:

• "stributed" and "llaborative learning" could be brighter (e.g. text-slate-300)
  
• Same thing for the text in the information page (the text in the next tabs looks great).
  
• Same for the text of the progress bars throughout the webapp. Also the active icon isn't put in orange in the dark theme
  
  I think the TaskList is looking great:
  

4. I prefer the ButtonsCard title in white rather than light blue:
   
   

5. The task title could be lighter in my opinion
   

6. The federated and decentralized GIFs in the information page could keep a light background until they are compatible with a dark background. Right now they aren't legible. For example when adding <FederatedGIF class="bg-slate-100 rounded-lg border-slate-300 border-4"/>
   

7. What do you think of doing something similar for the Disco logo until it gets handled (<DiscoGIF class="bg-slate-100 rounded-lg pb-16 px-4"/>. It's definitely not perfect but in my opinion it's better than the pixels
   

8. The file selection fields are not dark-theme compatible yet
   

9. The ButtonsCard's shadow or border isn't displaying well (on Firefox at least) in the model evaluation page
   

10. I think the training charts aren't looking very good with the default settings in the dark theme. The text could be whiter too
    

11. The Testing page isn't fully dark-theme compatible yet
    

12. Same for the inference and for image tasks like lus covid
    

[JulienVig]

Is the PR ready for review @tomasoignons?

[tomasoignons]

Yeah @JulienVig, i did all the requested changes I think

[JulienVig]

Great! In general you can re-request a review via github when you're done addressing comments to let the reviewer know it's ready for another review round.

[JulienVig]

Very nice! I actually quite like how the federated and decentralized GIFs look like with the light background

There are a few things left to adapt to the dark theme, I've left comments through the code. Additionally could you add a light background to the MLO logo in the About Us page? I'm in contact with our graphic designer, we should get the new figures soonish.

While you're changing the UI can I ask you fix something I've noticed? The component displays too close to the next word sometimes, could you add a space where needed?