Dark theme draft, Flat UI

[bfmvsa]

Hello team,

Please check out dark mode for INAV. To select dark mode please use the selector in the options tab:

Sorry for the huge commit, but I'm not sure how to do it properly in another way.
General changes in this PR:

1. Created 2 CSS files with CSS variables (for dark mode and regular one).
2. Partially updated existing CSS files to use variables.
3. Removed gradients and box shadows to make UI flat.
4. Updated some svg images to look good on the dark and light background.
5. Updated Open Sans font to use font-weight property instead of using different font families for bold text.
6. Different small fixes, and improvements.

Please note that tabs Mixer, Tunning, Advanced Tunning, and Alignment are not fixed according to dark mode. These tabs are not accessible to me for some reason at the moment (Infinity loading). [Fixed]

These changes are phase 1.
In the second phase, I'm planning to create common classes for generic elements such as buttons, tables, grid system, etc and replace a lot of existing CSS + HTML with them.

Some screenshots:

[mmosca]

Try reseting the settings cache, as that can cause issues. Also, make sure your fc has a recent inav8 firmware

[b14ckyy]

Personally not a Dark Mode user but that looks great! Especially OLED Laptop screen users will be thankful.

[bfmvsa]

Hi @mmosca
Thanks, looks like resetting cache fixed issue with Alignment tab, bu It still have the issue with Mixer, Tunning, Advanced Tunning. The problem looks like the same for all tabs:
RangeError: Offset is outside the bounds of the DataView

[bfmvsa]

Regarding inav8 firmware for fc, where can I find it? please advice.

[b14ckyy]

@bfmvsa

https://github.com/iNavFlight/inav-nightly/releases

[bfmvsa]

@b14ckyy Thanks, I just temporarily commented that line of code and it worked for me.
Now tabs do not look so much bright as they used to, but look good for dark as well

[mmosca]

Hi @mmosca Thanks, looks like resetting cache fixed issue with Alignment tab, bu It still have the issue with Mixer, Tunning, Advanced Tunning. The problem looks like the same for all tabs: RangeError: Offset is outside the bounds of the DataView

You should stil try firmware 8.0.0.

Your issues are likely caused by running new configurator against older firmware.

[bfmvsa]

@mmosca thanks. BTW why firmware version for inav 8 is not visible in the configurator 8?

[mmosca]

@mmosca thanks. BTW why firmware version for inav 8 is not visible in the configurator 8?

Because it is not a stable release. you need to select the option to show pre-release firmware.

[bfmvsa]

@mmosca I completely forgot about this checkbox, it helped, thanks a lot!

[mmosca]

@bfmvsa did you cover all tabs now, or are you still having issues?

[bfmvsa]

@mmosca I've covered everything I could see. I've used plane and multirotor targets for tests.

Please note that I didn't spend a lot of time on some small issues like a little bit of different padding or responsive design, because I'm planning (already have started the work) to create some app-wide classes for tables, inputs, grid system, etc. and use them across the configurator

[bfmvsa]

Hi @mmosca @b14ckyy
If you don't mind I'll delete this PR and replace it with PR with proper attention to detail. But another PR will include even more changes. I'm trying to concentrate only on HTML + CSS and don't touch much JS to simplify future tests. But there will be changes in JS as well.

[mmosca]

Hi @mmosca @b14ckyy If you don't mind I'll delete this PR and replace it with PR with proper attention to detail. But another PR will include even more changes. I'm trying to concentrate only on HTML + CSS and don't touch much JS to simplify future tests. But there will be changes in JS as well.

Up to you. :)

[mmosca]

I don't mind a long running pr. You can keep it as a draft if it is not done. That allows you to run the ci checks and makes it easier to download a zip and test :)