GeoNode / geonode

GeoNode is an open source platform that facilitates the creation, sharing, and collaborative use of geospatial data.
https://geonode.org/
Other
1.42k stars 1.12k forks source link

Dark mode feature #11400

Open warriorBunny013 opened 11 months ago

warriorBunny013 commented 11 months ago

Is your feature request related to a problem? Please describe.

Geonode users often work in low-light environments or prefer using dark mode interfaces to reduce eye strain and conserve energy. Currently, Geonode lacks a dark mode UI, which can be frustrating for users who would benefit from such an option.

Describe the solution you'd like

I would like to request the implementation of a dark mode UI feature for Geonode. This feature would enable users to switch between the traditional light mode and a new dark mode interface. In dark mode, the background color of the application should be dark or black, and text/icons should be displayed in light colors to maintain readability and usability. This change would enhance the user experience for those who prefer or require a darker UI.

Describe alternatives you've considered

One alternative solution would be to rely on browser extensions or operating system settings to force a dark mode appearance on the Geonode application. However, this approach is not as seamless or customizable as having an integrated dark mode within the application itself.

Additional context

Implementing a dark mode feature is becoming an industry standard, with many applications and platforms offering this option. Dark mode has several benefits, including reduced eye strain, improved battery life on devices with OLED screens, and better usability in low-light environments. It would be great to see Geonode embrace this trend and enhance its user experience. If needed, I can provide design mockups or further information to support the implementation of this feature.

allyoucanmap commented 11 months ago

@warriorBunny013 just a note related to the default GeoNode theme, currently the theme is provided with the geonode-mapstore-client module that was implementing a dark theme. The default dark theme class was not included in the final CSS theme because a button to switch it via UI is not available and also because we decided to exposed directly the CSS variables allowing each GeoNode projects to implement the theme as they prefer via django admin or html template overrides. In the geonode-mapstore-client documentation is possible to access a tool that generates all the available CSS variables exposed by the default theme (http://geonode.org/geonode-mapstore-client/master/tutorial-theme.html), hope this information could be helpful.

Screenshot of theme tool to generate CSS :root selector with all CSS variables Screenshot of theme tool