Skip to content

8342705: Add dark mode for docs #26185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

8342705: Add dark mode for docs #26185

wants to merge 12 commits into from

Conversation

hns
Copy link
Member

@hns hns commented Jul 8, 2025

Please review an enhancement to add a dark theme to javadoc-generated API documentation. There is a new button in the top right corner that brings up a menu to switch between themes. Available options are "Light", "Dark", and "System Setting" (following the system-wide theme setting). The selected theme is stored and preserved across browser sessions.

Generated docs can be viewed here (iteration 5, module java.base only).

Screenshots below show both themes and how to switch between them.

light-theme-2 dark-theme-2

Progress

  • Change must be properly reviewed (1 review required, with at least 1 Reviewer)
  • Change must not contain extraneous whitespace
  • Commit message must refer to an issue

Issue

  • JDK-8342705: Add dark mode for docs (Enhancement - P4)

Reviewing

Using git

Checkout this PR locally:
$ git fetch https://git.openjdk.org/jdk.git pull/26185/head:pull/26185
$ git checkout pull/26185

Update a local copy of the PR:
$ git checkout pull/26185
$ git pull https://git.openjdk.org/jdk.git pull/26185/head

Using Skara CLI tools

Checkout this PR locally:
$ git pr checkout 26185

View PR using the GUI difftool:
$ git pr show -t 26185

Using diff file

Download this PR as a diff file:
https://git.openjdk.org/jdk/pull/26185.diff

Using Webrev

Link to Webrev Comment

@bridgekeeper
Copy link

bridgekeeper bot commented Jul 8, 2025

👋 Welcome back hannesw! A progress list of the required criteria for merging this PR into master will be added to the body of your pull request. There are additional pull request commands available for use with this pull request.

@openjdk
Copy link

openjdk bot commented Jul 8, 2025

❗ This change is not yet ready to be integrated.
See the Progress checklist in the description for automated requirements.

@openjdk openjdk bot added the rfr Pull request is ready for review label Jul 8, 2025
@openjdk
Copy link

openjdk bot commented Jul 8, 2025

@hns The following label will be automatically applied to this pull request:

  • javadoc

When this pull request is ready to be reviewed, an "RFR" email will be sent to the corresponding mailing list. If you would like to change these labels, use the /label pull request command.

@mlbridge
Copy link

mlbridge bot commented Jul 8, 2025

Webrevs

@hns
Copy link
Member Author

hns commented Jul 15, 2025

I'm finding the orange link color a bit too flashy, so I created a new snapshot that uses a pale blue color for links. This results in a less striking color scheme that is more in line with the default light theme IMO.

I also realized that there is no requirement in terms of a11y to use a particular link color for navigation links, so I switched to a neutral color for links in the subnavigation and sidebar, which further "calms" the layout and improves readability IMO.

I haven't updated the PR yet and posting this here for discussion.

body.theme-dark {
.hljs-title.function_,
.hljs-template-variable {
color: #66bcce;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think you can nest rules here, the browser may skip/ignore them.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works for me, I've tried it on Firefox, Safari and Chrome.

Documentation of CSS nesting: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
It's implemented in all major browsers: https://caniuse.com/?search=css%20nesting

@hns
Copy link
Member Author

hns commented Jul 17, 2025

I updated the PR with changes described in my previous comment.

@hns
Copy link
Member Author

hns commented Jul 25, 2025

Another iteration on this PR, moving the theme switcher icon in line with the main navigation links in the top navigation bar.

I updated screenshots and demo docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
javadoc [email protected] rfr Pull request is ready for review
Development

Successfully merging this pull request may close these issues.

2 participants