RFR: 8370612: Simplify implementation of dark theme

[Jonathan Lampérth]

On Fri, 31 Oct 2025 13:30:06 GMT, Hannes Wallnöfer <hannesw at openjdk.org> wrote:

> Please review a change to simplify the implementation of CSS themes by solely relying on an attribute set by script instead of the dual script plus media queries approach. This allows us to get rid of duplicate declaration of CSS theme variables. On the downside, JavaScript must be enabled to recognize the system theme, but this is an acceptable compromise as documentation remains fully usable with JavaScript disabled. This change also makes it much easier for users to override or extend JavaDoc stylesheets. 
> 
> Also included is a fix for the keyboard tab order of the theme switcher. When opening the theme switcher and hitting the tab key, focus now goes to the theme switcher and no longer goes to the first link in the breadcrumb navigation if there is one. This required moving the HTML for the theme switcher next to the theme button, which required a whole series of test changes. I considered removing the theme switcher markup from these tests, but decided against it, mostly to make sure there are no other unchecked links in the navigation bar. This fix also required reducing the `z-index` of the mobile table of contents.
> 
> Another improvement related to focus handling is to close the theme switcher when it loses focus, and when the `Enter` or `Escape` keys are pressed. Also included is a small change to slightly reduce the padding of the recently introduced TOC sort button. 
> 
> Sample documentation [can be viewed here](https://cr.openjdk.org/~hannesw/8370612/api.00/java.base/module-summary.html).

Changes look good, thanks!

With this it is now more feasible to share dark/light mode icons via themed variables like `--x-svg` (instead of `--x-svg-dark`). This would let us drop some scattered CSS blocks and keep light/dark logic centralized.

<details>
<summary>Such blocks could be removed</summary>


:root[data-theme="theme-dark"] input#reset-search,
:root[data-theme="theme-dark"] input.reset-filter,
:root[data-theme="theme-dark"] input#page-search-reset {
    background-image: var(--x-svg-dark);
}

</details>

<details>
<summary>I would envision something like this</summary>


:root {
    --x-svg: url('x.svg');
}

:root[data-theme="theme-dark"] {
    --x-svg: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m8 8 84 84" style="stroke:%23e0e0e0;stroke-width:15;stroke-linecap:round"/><path d="M8 92 92 8" style="stroke:%23e0e0e0;stroke-width:15;stroke-linecap:round"/></svg>');
}

</details>

What do you think?

-------------

PR Comment: https://git.openjdk.org/jdk/pull/28085#issuecomment-3479454752