RFR: 8370612: Simplify implementation of dark theme [v3]

[Jonathan Lampérth]

On Mon, 3 Nov 2025 11:18:42 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).
>
> Hannes Wallnöfer has updated the pull request incrementally with one additional commit since the last revision:
> 
>   More cleanup and better separation of TOC button styles

Changes look great!

I would probably define the following outside of the `:root` blocks, and leave that to be variable definitions only:

    button#theme-button img.light-theme-icon {
        display: inline;
    }
    button#theme-button img.dark-theme-icon {
        display: none;
    }


Probably the best solution would be to store `--current-theme-svg=url(moon.svg)`, `--current-theme-svg=url(sun.svg)`and use the `background` property for this button too?

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

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