search

tj-uav / GroundStation

Custom ground station software (flight control + imaging)
https://tjuav.org
15 stars 13 forks source link

Dark Mode #151

Closed tjuav closed 2 months ago

tjuav commented 11 months ago

Implement a toggleable dark mode style. Implementation details (like color and contrast) are up to the programmer.

SharkyBytes commented 11 months ago

Hey, It would be great if you elaborate on your issue more clearly ... like in what file I have to make the changes :)

krishnans2006 commented 11 months ago

Hey, It would be great if you elaborate on your issue more clearly ... like in what file I have to make the changes :)

Sure! I intended for this feature to be implemented according to programmer preference (you add it however you feel it would be best), but here's how I would approach this:

The toggle itself should probably be implemented in the navbar (client/src/components/Header.js).

Most of the colors we use are defined in client/src/theme/Colors.js. These are used by the App component (client/src/App.js) and various subcomponents (client/src/components/*). To implement a global "using dark mode" setting, I would consider defining a variable in client/src/environment.js, which can be imported by these components to decide which colors to use.

I would additionally implement a cookie-based backup of this setting, so it persists between dev server restarts - for this, I'll let you figure out the details.

Thanks for showing interest, and let me know if you have any other questions!