Creating a link to the dark theme

[mcraveiro]

Hi doxygen-awesome developers,

thanks for an excellent and very easy to use theme. I just updated my documentation to use it, and it took me 5 seconds to do so, which is amazing :-) As I was mentioning on our reddit discussion [1], I have one slight snag though: I prefer using dark mode wherever possible and I've noticed two issues with the automatic detection of dark mode:

• on old versions of Windows (say Windows 7), I do not believe there is a system-wide dark mode setting.
• on my current Linux machine, though my Chrome is on dark mode I do not see the site on dark mode (from my site [2]):

Is there a way I could put a link on the main page for the dark mode version of the theme somehow?

Many thanks for your time.

[1] dxoygen (sic.) awesome css : make your doxygen docs looking more modern
[2] Dogen documentation

[jothepro]

Hi Marco,
First of all, I'm happy to hear that you like my work! Thank you for your feedback! :)

Short answer: It's currently not possible but I will work on it!

I can think of two ways to resolve this:

• Configure the docs to always display the dark version. This would force all users to just read the website with the dark theme. (I think that's how m.css does it, you can choose between a dark & light theme.)
• Add a button/switch to enable/disable dark mode dynamically (Like on this website, when you click on the moon icon). I didn't consider it yet because it would require additional JS/html, which may make the installation of the theme a little bit more complicated. Right now I am thinking about a solution that would only require the user to add a single JS file, to keep it as simple as possible.

Both solutions require some adjustments to the current theme, so you'll need to stay tuned or work it out yourself. :)

Would you be fine with just permanently choosing a dark theme for you website, or would you prefer to give the user the choice to switch between light-/dark-mode?

[mcraveiro]

Hi @jothepro,

thanks for the prompt reply. Well to be completely honest, I can live with the light theme - it was only that you mentioned there was a dark theme, so then suddenly I was keen on having it :-) but all and all, the light theme is already an improvement from plain Doxygen, so really I can live with that. But in an ideal world, I think having a way to switch between light and dark would be the better option methinks.

[ethanxxxl]

@mcraveiro
If for the time being, if you want to enable the dark theme in the css, I just changed all the lines that said
@media (prefers-color-scheme: dark) to @media (prefers-color-scheme: light).

disclaimer: I know hardly anything about HTML/CSS, and have no clue what this actually does, I was honestly surprised that it worked.

[Nambers]

Hi,@jothepro
I thinks that you can use cookie to save user's theme choice.
And pass that cookie value to css through the css variable(more detail in here https://stackoverflow.com/questions/50037400/pass-a-value-from-html-to-css)
And use the js file through HTML_HEADER or HTML_FOOTER to add a button to page and control that varible and cookie.
The button also can be look like a float button when the page do not has a header.
like this:

[jothepro]

I have finally added support for manually switching to dark mode in commit 072e779 👏

Pls let me know what you think about it! This got quite a complex feature to add and your feedback helps me a lot to get this stable enough for the next release!

[jpgarza93]

Works great I incorporated it into my docs site: https://rapidcode.roboticsys.com/

Thanks!

[jothepro]

Thanks for you feedback. I consider this issue resolved for now.