Feature : Add Theme Toggle Button to Sidebar

[achalbajpai]

Overview

I would like to implement a theme toggle button in the sidebar that allows users to switch between light and dark themes.

Benefits

This feature would enhance user experience by:

• Providing better accessibility for users who prefer different themes
• Allowing users to adapt the interface based on their environment or time of day

[achalbajpai]

Would love to get your feedback on this proposal before proceeding with the implementation.

[jcharkow]

Thank you for the proposal, however I am not sure if current web apps used would be compatible with dark mode (e.g. graphs might look strange with a white background). What might be a good option is to fix the theme so only light mode is possible (e.g. not using system defaults and always using light mode).

[jcharkow]

Example:

[jcharkow]

Thank you for taking the initiative and opening your own issue!

[achalbajpai]

@jcharkow

I will proceed to resolve this issue. Please assign it to me.
i.e
Enforced light mode display

[t0mdavid-m]

Maybe we could make plots work with dark mode as well by adjusting the global default based on dark/light mode:

https://stackoverflow.com/questions/25246602/change-default-background-color-for-matplotlib-plots

@achalbajpai if you want to play around with it, apart from matplotlib the solution should also cover plotly and bokeh. Also it should be verified that it works with pyOpenMS-viz (it should out of the box).

[achalbajpai]

I’ll definitely check it out and implement it to the best .

[achalbajpai]

Hello, @t0mdavid-m
I want to clarify the following things to better work on the solution .

• Should the theme always be white (as suggested earlier), or should I support both dark and light modes based on system settings?
• For plots, should they adapt to match the selected theme (e.g., dark mode → dark plots, light mode → light plots)?

[achalbajpai]

1. Force light mode and prevent system defaults

In config.toml ,
base = light

2. Force dark mode and prevent system defaults

In config.toml ,
when base = dark

[t0mdavid-m]

@jcharkow suggested fixing the theme to light as it looked like dark mode is not compatible with the plots. However, if you figure out a solution to adjust this globally according to the theme, the toggle functionality would be very welcome!

Just a couple constraints:

• The solution should work for matplotlib, plotly, and bokeh
• The plot color should be adjusted globally, so no further input by app developers should be neccessary when plotting data

[t0mdavid-m]

Hope that clarifies things @achalbajpai