On Fri, 31 Oct 2025 13:30:06 GMT, Hannes Wallnöfer <[email protected]> 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
