Dark theme / dark reader support

lovasoa / whitebophir

Online collaborative Whiteboard that is simple, free, easy to use and to deploy

https://wbo.ophir.dev

GNU Affero General Public License v3.0

2k stars 394 forks source link

Dark theme / dark reader support #219

Open xplosionmind opened 3 years ago

xplosionmind commented 3 years ago

As of right now, WBO is a whiteboard. Nevertheless, to be a true 2021 thing, it should also be available in dark mode.

I am currently using Dark Reader to avoid ruining my eyes in a dark environment, nevertheless, as shown in the screenshot below, the commends icons are not visible with a dark background.

Hence, if adding a proper dark theme is too much work, I think a middle way could be to use SVGs for controls icons so that they can be converted by dark reader extensions.

lovasoa commented 3 years ago

the tool icons are already SVGs

xplosionmind commented 3 years ago

The problem, then, is that such SVGs are not embedded with an <svg> tag, but included in an img, which is by default ignored by dark theming extensions. Furthermore, by making the icons an svg object in HTML, simply by modifying CSS at theme switch it can be super easy to invert their color.