Doxygen site: forced dark mode has bright white table of contents in Firefox

[GrahamBenHarper]

While looking at step-64, I noticed Firefox was trying to force dark mode on the current Doxygen site. It almost works, but the table of contents does not enter dark mode.

Steps to reproduce:
I know website UI issues are often nasty to reproduce, but I think it's as simple as just changing this Firefox setting

Technically I noticed it first by using the "Firefox Theme" setting, but in my case it really just sets me to dark mode. I don't know how these forced dark mode compatibilities are handled, and I don't know if it's a big priority, but I thought I'd point it out in case others experience the same issue.

[bangerth]

The table is created with commands like this:

@htmlonly
<table class="tutorial" width="50%">
<tr><th colspan="2"><b><small>Table of contents</small></b></th></tr>
<tr><td width="50%" valign="top">
<ol>
  <li> <a href="#Intro" class=bold>Introduction</a>
    <ul>
        <li><a href="#Aboutthetutorial"> About the tutorial </a>
        <li><a href="#Videolecturesontutorialprograms"> Video lectures on tutorial programs </a>
        <li><a href="#Whatthisprogramdoes"> What this program does </a>
        <li><a href="#Aboutscientificcomputingingeneral"> About scientific computing in general </a>
    </ul>
  <li> <a href="#CommProg" class=bold>The commented program</a>
    <ul>
        <li><a href="#Includefiles">Include files</a>
        <li><a href="#Creatingthefirstmesh">Creating the first mesh</a>
        <li><a href="#Creatingthesecondmesh">Creating the second mesh</a>
        <li><a href="#Themainfunction">The main function</a>
      </ul>
</ol></td><td width="50%" valign="top"><ol>
  <li value="3"> <a href="#Results" class=bold>Results</a>
    <ul>
        <li><a href="#Possibilitiesforextensions"> Possibilities for extensions </a>
      <ul>
        <li><a href="#Differentadaptiverefinementstrategies"> Different adaptive refinement strategies </a>
        <li><a href="#Differentgeometries"> Different geometries </a>
        <li><a href="#Commentsaboutprogramminganddebugging"> Comments about programming and debugging </a>
        <li><a href="#Moreaboutgraphicaloutput"> More about graphical output </a>
    </ul>
    </ul>
  <li> <a href="#PlainProg" class=bold>The plain program</a>
</ol> </td> </tr> </table>
@endhtmlonly

I must admit that I don't actually know where the class="tutorial" is defined. I do see this in doc/doxygen/style.css:

/* tables */
--table-cell-border-color: #103785;
--table-header-background-color: #1343A3;
--table-header-foreground-color: #FFFFFE;

What is the usual way one defines things so that they show up right in all modes? I'm showing my full ignorance of web page design here :-)

[GrahamBenHarper]

I'm also ignorant of these intricate web design details, but thankfully I have smart and talented friends like @pridgey who understand these things very well and figured all of this out. The issue is that Doxygen's default, which handles dark mode behavior with prefers-color-scheme: dark, is overridden by stylesheet.css when it redefines the table.tutorial object.

Without deleting the current intended light mode behavior specified in stylesheet.css, a couple options include:

1. You could let Doxygen handle the default dark mode behavior by wrapping the table.tutorial definition with @media (prefers-color-scheme: light) { and }. This means the definition override will not be used in dark mode. It yields something like this

2. You could define your own scheme by leaving the current definition as-is and adding a dark mode specialization something like what I have listed below:

@media (prefers-color-scheme: dark) {
 table.tutorial {
   color: white;
   border: 1px solid #555;
   background-color: #090909;
   padding: 5px;
   font-size: 95%;
 }
}

I'm happy to throw a PR in for option 1 since it's an easy fix, but if you want something more like option 2, I'll let you handle it (unless you like the random colors I threw together in 5 seconds 😛 )

[masterleinad]

To me, the first version looks good.

[GrahamBenHarper]

I'm preparing for a meeting now, but I'll throw a PR in later this afternoon if there aren't any objections :)

[bangerth]

Very cool -- I too love that I have friends who know who to talk to about stuff I have no idea about!