8342705: Add dark mode for docs

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java

@@ -327,6 +327,9 @@ protected void generateOtherFiles(ClassTree classTree)
         copyResource(DocPaths.RIGHT_SVG, DocPaths.RESOURCE_FILES.resolve(DocPaths.RIGHT_SVG), true);
         copyResource(DocPaths.CLIPBOARD_SVG, DocPaths.RESOURCE_FILES.resolve(DocPaths.CLIPBOARD_SVG), true);
         copyResource(DocPaths.LINK_SVG, DocPaths.RESOURCE_FILES.resolve(DocPaths.LINK_SVG), true);
+        copyResource(DocPaths.MOON_SVG, DocPaths.RESOURCE_FILES.resolve(DocPaths.MOON_SVG), true);
+        copyResource(DocPaths.SUN_SVG, DocPaths.RESOURCE_FILES.resolve(DocPaths.SUN_SVG), true);
+        copyResource(DocPaths.SYSTEM_SVG, DocPaths.RESOURCE_FILES.resolve(DocPaths.SYSTEM_SVG), true);
 
         if (options.createIndex()) {
             copyResource(DocPaths.SEARCH_JS_TEMPLATE, DocPaths.SCRIPT_FILES.resolve(DocPaths.SEARCH_JS), true);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlIds.java

@@ -114,6 +114,11 @@ public class HtmlIds {
     static final HtmlId SEARCH_INPUT = HtmlId.of("search-input");
     static final HtmlId SERVICES = HtmlId.of("services-summary");
     static final HtmlId SKIP_NAVBAR_TOP = HtmlId.of("skip-navbar-top");
+    static final HtmlId THEME_BUTTON = HtmlId.of("theme-button");
+    static final HtmlId THEME_DARK = HtmlId.of("theme-dark");
+    static final HtmlId THEME_LIGHT = HtmlId.of("theme-light");
+    static final HtmlId THEME_OS = HtmlId.of("theme-os");
+    static final HtmlId THEME_PANEL = HtmlId.of("theme-panel");
     static final HtmlId UNNAMED_PACKAGE_ANCHOR = HtmlId.of("unnamed-package");
     private static final String FIELDS_INHERITANCE = "fields-inherited-from-class-";
     private static final String METHODS_INHERITANCE = "methods-inherited-from-class-";

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java

@@ -543,8 +543,32 @@ public Content getContent() {
         navContent.add(navList);
         var aboutDiv = HtmlTree.DIV(HtmlStyles.aboutLanguage, aboutContent);
         navContent.add(aboutDiv);
+        var selectTheme = contents.getContent("doclet.theme.select_theme");
+        navContent.add(HtmlTree.BUTTON(HtmlIds.THEME_BUTTON)
+                .add(HtmlTree.IMG(pathToRoot.resolve(DocPaths.RESOURCE_FILES).resolve(DocPaths.SUN_SVG),
+                        selectTheme.toString()).addStyle(HtmlIds.THEME_LIGHT.name()))
+                .add(HtmlTree.IMG(pathToRoot.resolve(DocPaths.RESOURCE_FILES).resolve(DocPaths.MOON_SVG),
+                        selectTheme.toString()).addStyle(HtmlIds.THEME_DARK.name()))
+                .add(HtmlTree.IMG(pathToRoot.resolve(DocPaths.RESOURCE_FILES).resolve(DocPaths.SYSTEM_SVG),
+                        selectTheme.toString()).addStyle(HtmlIds.THEME_OS.name()))
+                .put(HtmlAttr.ARIA_LABEL, selectTheme.toString()));
+        navContent.add(HtmlTree.DIV(HtmlIds.THEME_PANEL)
+                .add(HtmlTree.DIV(selectTheme))
+                .add(HtmlTree.DIV(HtmlTree.LABEL(HtmlIds.THEME_LIGHT.name(), Text.EMPTY)
+                                .add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_LIGHT)
+                                        .put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_LIGHT.name()))
+                                .add(HtmlTree.SPAN(contents.getContent("doclet.theme.light"))))
+                        .add(HtmlTree.LABEL(HtmlIds.THEME_DARK.name(), Text.EMPTY)
+                                .add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_DARK)
+                                        .put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_DARK.name()))
+                                .add(HtmlTree.SPAN(contents.getContent("doclet.theme.dark"))))
+                        .add(HtmlTree.LABEL(HtmlIds.THEME_OS.name(), Text.EMPTY)
+                                .add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_OS)
+                                        .put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_OS.name()))
+                                .add(HtmlTree.SPAN(contents.getContent("doclet.theme.system"))))));
         navigationBar.add(HtmlTree.DIV(HtmlStyles.topNav, navContent).setId(HtmlIds.NAVBAR_TOP));
 
+
         var subNavContent = HtmlTree.DIV(HtmlStyles.navContent);
         List<Content> subNavLinks = new ArrayList<>();
         switch (documentedPage) {

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css

@@ -65,3 +65,188 @@
     /* ignored */
 }
 
+body.theme-dark {
+    .hljs-title.function_,
+    .hljs-template-variable {
+        color: #66bcce;
+    }
+    .hljs-code,
+    .hljs-comment,
+    .hljs-quote {
+        color:#999999;
+        font-style: italic;
+    }
+    .hljs-meta {
+        color: #836F00;
+    }
+    .hljs-symbol,
+    .hljs-template-tag,
+    .hljs-keyword,
+    .hljs-literal,
+    .hljs-name,
+    .hljs-built_in,
+    .hljs-char.escape_ {
+        color: #88aece;
+    }
+    .hljs-variable,
+    .hljs-property,
+    .hljs-attr,
+    .hljs-section {
+        color: #c59bc1;
+    }
+    .hljs-attribute {
+        color:  #c59bc1;
+    }
+    .hljs-regexp,
+    .hljs-number {
+        color: #cfe374;
+    }
+    .hljs-link {
+        color: #b5bd68;
+    }
+    .hljs-string {
+        color: #b5bd68;
+    }
+    .hljs-doctag {
+        text-decoration: underline;
+    }
+    .hljs-emphasis {
+        font-style: italic;
+    }
+    .hljs-strong {
+        font-weight: bold;
+    }
+    .hljs-subst,
+    .hljs-title,
+    .hljs-params,
+    .hljs-bullet,
+    .hljs-formula,
+    .hljs-tag,
+    .hljs-type {
+        /* ignored */
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .hljs-title.function_,
+    .hljs-template-variable {
+        color: #66bcce;
+    }
+    .hljs-code,
+    .hljs-comment,
+    .hljs-quote {
+        color:#999999;
+        font-style: italic;
+    }
+    .hljs-meta {
+        color: #836F00;
+    }
+    .hljs-symbol,
+    .hljs-template-tag,
+    .hljs-keyword,
+    .hljs-literal,
+    .hljs-name,
+    .hljs-built_in,
+    .hljs-char.escape_ {
+        color: #88aece;
+    }
+    .hljs-variable,
+    .hljs-property,
+    .hljs-attr,
+    .hljs-section {
+        color: #c59bc1;
+    }
+    .hljs-attribute {
+        color:  #c59bc1;
+    }
+    .hljs-regexp,
+    .hljs-number {
+        color: #cfe374;
+    }
+    .hljs-link {
+        color: #b5bd68;
+    }
+    .hljs-string {
+        color: #b5bd68;
+    }
+    .hljs-doctag {
+        text-decoration: underline;
+    }
+    .hljs-emphasis {
+        font-style: italic;
+    }
+    .hljs-strong {
+        font-weight: bold;
+    }
+    .hljs-subst,
+    .hljs-title,
+    .hljs-params,
+    .hljs-bullet,
+    .hljs-formula,
+    .hljs-tag,
+    .hljs-type {
+        /* ignored */
+    }
+
+    body.theme-light {
+        .hljs-title.function_,
+        .hljs-template-variable {
+            color: #00738F;
+        }
+        .hljs-code,
+        .hljs-comment,
+        .hljs-quote {
+            color: #6e6e71;
+            font-style: italic;
+        }
+        .hljs-meta {
+            color: #836F00;
+        }
+        .hljs-symbol,
+        .hljs-template-tag,
+        .hljs-keyword,
+        .hljs-literal,
+        .hljs-name,
+        .hljs-built_in,
+        .hljs-char.escape_ {
+            color: #0C40C2;
+        }
+        .hljs-variable,
+        .hljs-property,
+        .hljs-attr,
+        .hljs-section {
+            color: #841191;
+        }
+        .hljs-attribute {
+            color: #164ad9;
+        }
+        .hljs-regexp,
+        .hljs-number {
+            color: #104BEB;
+        }
+        .hljs-link {
+            color: #47688a;
+        }
+        .hljs-string {
+            color: #008313;
+        }
+        .hljs-doctag {
+            text-decoration: underline;
+        }
+        .hljs-emphasis {
+            font-style: italic;
+        }
+        .hljs-strong {
+            font-weight: bold;
+        }
+        .hljs-subst,
+        .hljs-title,
+        .hljs-params,
+        .hljs-bullet,
+        .hljs-formula,
+        .hljs-tag,
+        .hljs-type {
+            /* ignored */
+        }
+    }
+}

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template

@@ -351,6 +351,40 @@ document.addEventListener("DOMContentLoaded", function(e) {
     const mainnav = navbar.querySelector("ul.nav-list");
     const toggleButton = document.querySelector("button#navbar-toggle-button");
     const tocMenu = sidebar ? sidebar.cloneNode(true) : null;
+    const themeButton = document.querySelector("button#theme-button");
+    const themePanel = document.querySelector("div#theme-panel");
+    var themePanelVisible = false;
+    themeButton.addEventListener("click", e => {
+        if (!themePanelVisible) {
+            themePanel.style.display = "block";
+            themeButton.setAttribute("aria-expanded", "true");
+            themePanelVisible = true;
+            e.stopPropagation();
+        }
+    });
+    function closeThemePanel(e) {
+        if (themePanelVisible && (!e || !themePanel.contains(e.target))) {
+            themePanel.style.removeProperty("display");
+            themeButton.setAttribute("aria-expanded", "false");
+            themePanelVisible = false;
+        }
+    }
+    themePanel.querySelectorAll("input").forEach(input => {
+        input.removeAttribute("disabled");
+        input.addEventListener("change", e => {
+            setTheme(e.target.value);
+        })
+    });
+    const THEMES = ["theme-light", "theme-dark", "theme-os"];
+    function setTheme(theme) {
+        THEMES.forEach(t => {
+            if (t !== theme) document.body.classList.remove(t);
+        });
+        document.body.classList.add(theme);
+        localStorage.setItem("theme", theme);
+        document.getElementById(theme).checked = true;
+    }
+    setTheme(localStorage.getItem("theme") || THEMES[0]);
     makeFilterWidget(sidebar, updateToc);
     if (tocMenu) {
         navbar.appendChild(tocMenu);
@@ -362,6 +396,7 @@ document.addEventListener("DOMContentLoaded", function(e) {
             return;
         }
         if (!isInput(e.target) && keymap.has(e.key)) {
+            closeThemePanel();
             var elem = keymap.get(e.key);
             if (elem === filterInput && !elem.offsetParent) {
                 elem = getVisibleFilterInput(true);
@@ -370,6 +405,7 @@ document.addEventListener("DOMContentLoaded", function(e) {
             elem.select();
             e.preventDefault();
         } else if (e.key === "Escape") {
+            closeThemePanel();
             if (expanded) {
                 collapse();
                 e.preventDefault();
@@ -457,6 +493,7 @@ document.addEventListener("DOMContentLoaded", function(e) {
         });
     }
     document.querySelector("main").addEventListener("click", collapse);
+    document.querySelector("body").addEventListener("click", closeThemePanel);
     document.querySelectorAll("h1, h2, h3, h4, h5, h6")
         .forEach((hdr, idx) => {
             // Create anchor links for headers with an associated id attribute

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/standard.properties

@@ -194,6 +194,10 @@ doclet.Window_Help_title=API Help
 doclet.references={0} references
 doclet.Window_Search_title=Search
 doclet.search.main_heading=Search
+doclet.theme.select_theme=Select Theme
+doclet.theme.light=Light
+doclet.theme.dark=Dark
+doclet.theme.system=System Setting
 
 # label for link/button element to show the information below
 doclet.search.show_more=Additional resources