From 65642232cb75ad7cd3a5d06240b20dcba7cfd699 Mon Sep 17 00:00:00 2001 From: Hannes Wallnoefer Date: Wed, 30 Apr 2025 16:34:00 +0200 Subject: [PATCH 1/6] JDK-8342705: Add dark mode for docs --- .../formats/html/resources/highlight.css | 64 +++++ .../formats/html/resources/stylesheet.css | 222 ++++++++++++------ 2 files changed, 209 insertions(+), 77 deletions(-) diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css index 145c1c7f5d281..6301e43c3de9a 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css @@ -65,3 +65,67 @@ /* 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 */ + } +} diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css index c2351d113cc5e..2c3e871f95c9f 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css @@ -16,83 +16,150 @@ * properties used in this stylesheet. */ :root { - /* body, block and code fonts */ - --body-font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; - --block-font-family: 'DejaVu Serif', Georgia, "Times New Roman", Times, serif; - --code-font-family: 'DejaVu Sans Mono', monospace; - /* Base font sizes for body and code elements */ - --body-font-size: 14.2px; - --block-font-size: 14.4px; - --code-font-size: 13.9px; - --nav-font-size: 13.4px; - /* Line height for continuous text blocks */ - --block-line-height: 1.5; - --code-line-height: 1.6; - /* Text colors for body and block elements */ - --body-text-color: #282828; - --block-text-color: #282828; - /* Background colors for various elements */ - --body-background-color: #ffffff; - --section-background-color: var(--body-background-color); - --detail-background-color: #ffffff; - --code-background-color: #f5f5f5; - --mark-background-color: #f7f7f7; - --detail-block-color: #f4f4f4; - /* Colors for navigation bar and table captions */ - --navbar-background-color: #4D7A97; - --navbar-text-color: #ffffff; - /* Background color for subnavigation and various headers */ - --subnav-background-color: #dee3e9; - --subnav-link-color: #47688a; - --member-heading-background-color: var(--subnav-background-color); - /* Background and text colors for selected tabs and navigation items */ - --selected-background-color: #f8981d; - --selected-text-color: #253441; - --selected-link-color: #4a698a; - /* Background colors for generated tables */ - --table-header-color: #ebeff4; - --even-row-color: #ffffff; - --odd-row-color: #f0f0f2; - /* Text color for page title */ - --title-color: #2c4557; - /* Text colors for links */ - --link-color: #437291; - --link-color-active: #bb7a2a; - /* Table of contents */ - --toc-background-color: #f8f8f8; - --toc-highlight-color: var(--subnav-background-color); - --toc-hover-color: #e9ecf0; - /* Snippet and pre colors */ - --snippet-background-color: #f2f2f4; - --snippet-text-color: var(--block-text-color); - --snippet-highlight-color: #f7c590; - --pre-background-color: var(--snippet-background-color); - --pre-text-color: var(--snippet-text-color); - /* Border colors for structural elements and user defined tables */ - --border-color: #e6e6e6; - --table-border-color: #000000; - /* Styles for table tabs */ - --tab-border-radius: 2px 2px 0 0; - /* Search input colors */ - --search-input-background-color: #ffffff; - --search-input-text-color: #000000; - --search-input-placeholder-color: #909090; - /* Highlight color for active search tag target */ - --search-tag-highlight-color: #ffff66; - /* Copy button colors and filters */ - --button-border-color: #b0b8c8; - --button-active-filter: brightness(96%); - --button-focus-filter: brightness(104%); - /* Colors for invalid tag notifications */ - --invalid-tag-background-color: #ffe6e6; - --invalid-tag-text-color: #000000; - /* Navigation bar dimensions */ + color-scheme: only dark; + /* Navigation bar and content area dimensions */ --top-nav-height: 44px; --sub-nav-height: 36px; --nav-height: calc(var(--top-nav-height) + var(--sub-nav-height)); --max-content-width: 1500px; --content-margin: 0 auto; } +@media (prefers-color-scheme: light) { + :root { + /* body, block and code fonts */ + --body-font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; + --block-font-family: 'DejaVu Serif', Georgia, "Times New Roman", Times, serif; + --code-font-family: 'DejaVu Sans Mono', monospace; + /* Base font sizes for body and code elements */ + --body-font-size: 14.2px; + --block-font-size: 14.4px; + --code-font-size: 13.9px; + --nav-font-size: 13.4px; + /* Line height for continuous text blocks */ + --block-line-height: 1.5; + --code-line-height: 1.6; + /* Text colors for body and block elements */ + --body-text-color: #282828; + --block-text-color: #282828; + /* Background colors for various elements */ + --body-background-color: #ffffff; + --section-background-color: var(--body-background-color); + --detail-background-color: #ffffff; + --code-background-color: #f5f5f5; + --mark-background-color: #f7f7f7; + --detail-block-color: #f4f4f4; + /* Colors for navigation bar and table captions */ + --navbar-background-color: #4D7A97; + --navbar-text-color: #ffffff; + /* Background color for subnavigation and various headers */ + --subnav-background-color: #dee3e9; + --subnav-link-color: #47688a; + --member-heading-background-color: var(--subnav-background-color); + /* Background and text colors for selected tabs and navigation items */ + --selected-background-color: #f8981d; + --selected-text-color: #253441; + --selected-link-color: #4a698a; + /* Background colors for generated tables */ + --table-header-color: #ebeff4; + --even-row-color: #ffffff; + --odd-row-color: #f0f0f2; + /* Text color for page title */ + --title-color: #2c4557; + /* Text colors for links */ + --link-color: #437291; + --link-color-active: #bb7a2a; + /* Table of contents */ + --toc-background-color: #f8f8f8; + --toc-highlight-color: var(--subnav-background-color); + --toc-hover-color: #e9ecf0; + /* Snippet and pre colors */ + --snippet-background-color: #f2f2f4; + --snippet-text-color: var(--block-text-color); + --snippet-highlight-color: #f7c590; + --pre-background-color: var(--snippet-background-color); + --pre-text-color: var(--snippet-text-color); + /* Border colors for structural elements and user defined tables */ + --border-color: #e6e6e6; + --table-border-color: #000000; + /* Styles for table tabs */ + --tab-border-radius: 2px 2px 0 0; + /* Search input colors */ + --search-input-background-color: #ffffff; + --search-input-text-color: #000000; + --search-input-placeholder-color: #909090; + --select-input-background-color: #f0f0f0; + /* Highlight color for active search tag target */ + --search-tag-highlight-color: #ffff66; + /* Copy button colors and filters */ + --button-border-color: #7c818d; + --button-active-filter: brightness(96%); + --button-focus-filter: brightness(104%); + /* Colors for invalid tag notifications */ + --invalid-tag-background-color: #ffe6e6; + --invalid-tag-text-color: #000000; + } +} +/* + * Dark theme + */ +@media (prefers-color-scheme: dark) { + :root { + --body-font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; + --block-font-family: 'DejaVu Serif', Georgia, "Times New Roman", Times, serif; + --code-font-family: 'DejaVu Sans Mono', monospace; + --body-font-size: 14.2px; + --block-font-size: 14.4px; + --code-font-size: 13.9px; + --nav-font-size: 13.4px; + --block-line-height: 1.5; + --code-line-height: 1.6; + --body-text-color: #e8e8e8; + --block-text-color: #e8e8e8; + --body-background-color: #333c44; + --section-background-color: var(--body-background-color); + --detail-background-color: #333c44; + --code-background-color: #414c57; + --mark-background-color: #414c57; + --detail-block-color: #f4f4f4; + --navbar-background-color: /* #324F62; */ /* #2E556F; */ /* #355266; */ /* #3b5a74; */ /* #41617b; */ /* #3c5971; */ #2f4e68; + --navbar-text-color: #ffffff; + --subnav-background-color: /* #3F5F73; */ /* #495257; */ /* #515455; */ #242626; + --subnav-link-color: /* #fbad1a; */ #db9716; /* #a0c0f8; */ /* #92bee3; */ + --member-heading-background-color: var(--subnav-background-color); + --selected-background-color: #f8981d; + --selected-text-color: #253441; + --selected-link-color: #4a698a; + --table-header-color: /* #1E282F; */ #212d35; + --even-row-color: #333c44; + --odd-row-color: /* #414c57; */ #3f4a55; + --title-color: #fff; + --link-color: #fbad1a; /* #a0c0f8; */ /* #92bee3; */ + --link-color-active: #ffc455; + --toc-background-color: #2A3135; + --toc-highlight-color: var(--subnav-background-color); + --toc-hover-color: #3f4246; + --snippet-background-color: #263037; + --snippet-text-color: var(--block-text-color); + --snippet-highlight-color: #f7c590; + --pre-background-color: var(--snippet-background-color); + --pre-text-color: var(--snippet-text-color); + --border-color: /* #1E282F; */ #334551; + --table-border-color: #1E282F; + --tab-border-radius: 2px 2px 0 0; + --search-input-background-color: #303030; + --search-input-text-color: #d0d0d0; + --search-input-placeholder-color: #909090; + --search-tag-highlight-color: #ffff66; + --button-border-color: #626870; + --button-active-filter: brightness(96%); + --button-focus-filter: brightness(104%); + --invalid-tag-background-color: #ffe6e6; + --invalid-tag-text-color: #000000; + img { + filter: invert(100%) sepia(4%) saturate(98%) hue-rotate(212deg) brightness(160%) contrast(160%); + } + } +} /* * Styles for individual HTML elements. * @@ -1025,7 +1092,7 @@ li.ui-static-link a, li.ui-static-link a:visited { .ui-autocomplete .search-result-desc { font-size: var(--nav-font-size); padding: 2px 4px; - color: #404040; + color: var(--body-text-color); overflow: hidden; text-overflow: ellipsis; } @@ -1033,7 +1100,7 @@ li.ui-static-link a, li.ui-static-link a:visited { font-weight:bold; } .ui-menu .ui-state-active .search-result-desc { - color: #383838; + color: var(--selected-text-color); } .ui-menu .ui-menu-item-wrapper { padding: 3px 4px; @@ -1045,7 +1112,7 @@ input[type="text"] { background-position:3px 4px; background-color: var(--search-input-background-color); color: var(--search-input-text-color); - border-color: var(--border-color); + /* border-color: var(--border-color); */ border-radius: 4px; padding-left:20px; padding-right: 18px; @@ -1106,8 +1173,9 @@ select#search-modules { font-size: var(--nav-font-size); padding: 3px 5px; border-radius: 4px; - background: #f0f0f0; - border: 1px solid #909090; + background: var(--select-input-background-color); + color: var(--search-input-text-color); + border: 1px solid var(--button-border-color); } kbd { background-color: #eeeeee; @@ -1178,7 +1246,7 @@ div#result-container { } #result-container div.result-table > a.search-result-link .search-result-desc { font-size: var(--nav-font-size); - color: #404040; + color: var(--body-text-color); overflow: hidden; text-overflow: ellipsis; } From 0ccb731e0079732d11b834949b79d7d92845f29e Mon Sep 17 00:00:00 2001 From: Hannes Wallnoefer Date: Tue, 1 Jul 2025 16:48:20 +0200 Subject: [PATCH 2/6] Improve dark theme, implement theme switcher --- .../doclets/formats/html/HtmlDoclet.java | 2 + .../doclets/formats/html/HtmlIds.java | 5 + .../doclets/formats/html/Navigation.java | 20 ++ .../doclets/formats/html/resources/moon.svg | 15 + .../formats/html/resources/script.js.template | 43 +++ .../html/resources/standard.properties | 4 + .../formats/html/resources/stylesheet.css | 304 +++++++++++++----- .../doclets/formats/html/resources/sun.svg | 22 ++ .../doclets/toolkit/util/DocPaths.java | 6 + .../jdk/javadoc/internal/html/HtmlAttr.java | 1 + .../CheckStylesheetClasses.java | 3 + .../doclet/testSpecTag/TestSpecTag.java | 12 - .../doclet/testStylesheet/TestStylesheet.java | 2 +- .../jdk/javadoc/tool/api/basic/APITest.java | 2 + 14 files changed, 349 insertions(+), 92 deletions(-) create mode 100644 src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg create mode 100644 src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/sun.svg diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java index 47b2322226ee8..d00d7b1becff4 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java @@ -327,6 +327,8 @@ 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); if (options.createIndex()) { copyResource(DocPaths.SEARCH_JS_TEMPLATE, DocPaths.SCRIPT_FILES.resolve(DocPaths.SEARCH_JS), true); diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlIds.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlIds.java index 42d93c41e116a..c257e1e153c86 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlIds.java +++ b/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-"; diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java index 61af26259af4e..e156365703344 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java @@ -543,8 +543,28 @@ 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())) + .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 subNavLinks = new ArrayList<>(); switch (documentedPage) { diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg new file mode 100644 index 0000000000000..23e9b54f96d11 --- /dev/null +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template index d3b59f4f40bea..4a97ab166abd6 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template @@ -351,6 +351,44 @@ 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 (!themePanel.style.display) { + themePanel.style.display = "block"; + themeButton.setAttribute("aria-expanded", "true"); + themePanelVisible = true; + } else { + 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); + }) + }); + function setTheme(theme) { + if (theme === "theme-os") { + document.body.classList.remove("theme-light", "theme-dark"); + } else if (theme === "theme-light") { + document.body.classList.remove("theme-dark"); + document.body.classList.add("theme-light"); + } else if (theme === "theme-dark") { + document.body.classList.remove("theme-light"); + document.body.classList.add("theme-dark"); + } + localStorage.setItem("theme", theme); + document.getElementById(theme).checked = true; + console.log(themeButton.firstElementChild.href); + } + var theme = localStorage.getItem("theme"); + if (theme) { + setTheme(theme || "theme-light"); + } makeFilterWidget(sidebar, updateToc); if (tocMenu) { navbar.appendChild(tocMenu); @@ -401,6 +439,11 @@ document.addEventListener("DOMContentLoaded", function(e) { toggleButton.setAttribute("aria-expanded", "false"); expanded = false; } + if (themePanelVisible) { + themePanel.style.removeProperty("display"); + themeButton.setAttribute("aria-expanded", "false"); + themePanelVisible = false; + } } function expand() { expanded = true; diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/standard.properties b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/standard.properties index 76b223bf130b9..631d8fcf5c52f 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/standard.properties +++ b/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 diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css index c2b9aeb4f5a81..d1a833bf43752 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css @@ -16,7 +16,18 @@ * properties used in this stylesheet. */ :root { - color-scheme: only dark; + /* body, block and code fonts */ + --body-font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; + --block-font-family: 'DejaVu Serif', Georgia, "Times New Roman", Times, serif; + --code-font-family: 'DejaVu Sans Mono', monospace; + /* Base font sizes for body and code elements */ + --body-font-size: 14.2px; + --block-font-size: 14.4px; + --code-font-size: 14px; + --nav-font-size: 13.4px; + /* Line height for continuous text blocks */ + --block-line-height: 1.5; + --code-line-height: 1.6; /* Navigation bar and content area dimensions */ --top-nav-height: 44px; --sub-nav-height: 36px; @@ -24,27 +35,175 @@ --max-content-width: 1500px; --content-margin: 0 auto; } -@media (prefers-color-scheme: light) { - :root { - /* body, block and code fonts */ - --body-font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; - --block-font-family: 'DejaVu Serif', Georgia, "Times New Roman", Times, serif; - --code-font-family: 'DejaVu Sans Mono', monospace; - /* Base font sizes for body and code elements */ - --body-font-size: 14.2px; - --block-font-size: 14.4px; - --code-font-size: 14px; - --nav-font-size: 13.4px; - /* Line height for continuous text blocks */ - --block-line-height: 1.5; - --code-line-height: 1.6; +body { + /* Text colors for body and block elements */ + --body-text-color: #282828; + --block-text-color: #282828; + /* Background colors for various elements */ + --body-background-color: #ffffff; + --section-background-color: var(--body-background-color); + --detail-background-color: var(--body-background-color); + --code-background-color: #f5f5f5; + --mark-background-color: #f7f7f7; + --detail-block-color: #f4f4f4; + /* Colors for navigation bar and table captions */ + --navbar-background-color: #4D7A97; + --navbar-text-color: #ffffff; + /* Background color for subnavigation and various headers */ + --subnav-background-color: #dee3e9; + --subnav-link-color: #47688a; + --member-heading-background-color: var(--subnav-background-color); + /* Background and text colors for selected tabs and navigation items */ + --selected-background-color: #f8981d; + --selected-text-color: #253441; + --selected-link-color: #4a698a; + /* Background colors for generated tables */ + --table-header-color: #ebeff4; + --even-row-color: #ffffff; + --odd-row-color: #f0f0f2; + /* Text color for page title */ + --title-color: #2c4557; + /* Text colors for links */ + --link-color: #437291; + --link-color-active: #bb7a2a; + /* Table of contents */ + --toc-background-color: #f8f8f8; + --toc-highlight-color: var(--subnav-background-color); + --toc-hover-color: #e9ecf0; + /* Snippet and pre colors */ + --snippet-background-color: #f2f2f4; + --snippet-text-color: var(--block-text-color); + --snippet-highlight-color: #f7c590; + --pre-background-color: var(--snippet-background-color); + --pre-text-color: var(--snippet-text-color); + /* Border colors for structural elements and user defined tables */ + --border-color: #e6e6e6; + --table-border-color: #000000; + /* Styles for table tabs */ + --tab-border-radius: 2px 2px 0 0; + /* Search input colors */ + --search-input-background-color: #ffffff; + --search-input-text-color: #000000; + --search-input-placeholder-color: #909090; + /* Highlight color for active search tag target */ + --search-tag-highlight-color: #ffff66; + /* Copy button colors and filters */ + --button-border-color: #b0b8c8; + --button-active-filter: brightness(96%); + --button-focus-filter: brightness(104%); + /* Colors for invalid tag notifications */ + --invalid-tag-background-color: #ffe6e6; + --invalid-tag-text-color: #000000; +} + +body.theme-dark { + --body-text-color: #e8e8e8; + --block-text-color: #e8e8e8; + --body-background-color: #292f35; + --section-background-color: var(--body-background-color); + --detail-background-color: var(--body-background-color); + --code-background-color: #414c57; + --mark-background-color: #8e8d8d; + --detail-block-color: #f4f4f4; + --navbar-background-color: #3d5c77; + --navbar-text-color: #ffffff; + --subnav-background-color: #43505b; + --subnav-link-color: #f4b336; + --member-heading-background-color: var(--subnav-background-color); + --selected-background-color: #f8981d; + --selected-text-color: #253441; + --selected-link-color: #4a698a; + --table-header-color: #202c35; + --even-row-color: #293540; + --odd-row-color: #1c2126; + --title-color: #fff; + --link-color: #f4b336; + --link-color-active: #ffc886; + --toc-background-color: #373f46; + --toc-highlight-color: var(--subnav-background-color); + --toc-hover-color: #333639; + --snippet-background-color: #232F37; + --snippet-text-color: var(--block-text-color); + --snippet-highlight-color: #f7c590; + --pre-background-color: var(--snippet-background-color); + --pre-text-color: var(--snippet-text-color); + --border-color: /* #1E282F; */ #334551; + --table-border-color: #1E282F; + --tab-border-radius: 2px 2px 0 0; + --search-input-background-color: #303030; + --search-input-text-color: #d0d0d0; + --search-input-placeholder-color: #909090; + --search-tag-highlight-color: #ffff66; + --button-border-color: #626870; + --button-active-filter: brightness(96%); + --button-focus-filter: brightness(104%); + --invalid-tag-background-color: #ffe6e6; + --invalid-tag-text-color: #000000; + div.main-grid img { + filter: invert(100%) sepia(4%) saturate(98%) hue-rotate(212deg) brightness(160%) contrast(160%); + } +} + +/* + * Dark theme + */ +@media (prefers-color-scheme: dark) { + body { + --body-text-color: #e8e8e8; + --block-text-color: #e8e8e8; + --body-background-color: #292f35; + --section-background-color: var(--body-background-color); + --detail-background-color: var(--body-background-color); + --code-background-color: #414c57; + --mark-background-color: #8e8d8d; + --detail-block-color: #f4f4f4; + --navbar-background-color: #3d5c77; + --navbar-text-color: #ffffff; + --subnav-background-color: #43505b; + --subnav-link-color: #f4b336; + --member-heading-background-color: var(--subnav-background-color); + --selected-background-color: #f8981d; + --selected-text-color: #253441; + --selected-link-color: #4a698a; + --table-header-color: #202c35; + --even-row-color: #293540; + --odd-row-color: #1c2126; + --title-color: #fff; + --link-color: #f4b336; + --link-color-active: #ffc886; + --toc-background-color: #373f46; + --toc-highlight-color: var(--subnav-background-color); + --toc-hover-color: #333639; + --snippet-background-color: #232F37; + --snippet-text-color: var(--block-text-color); + --snippet-highlight-color: #f7c590; + --pre-background-color: var(--snippet-background-color); + --pre-text-color: var(--snippet-text-color); + --border-color: /* #1E282F; */ #334551; + --table-border-color: #1E282F; + --tab-border-radius: 2px 2px 0 0; + --search-input-background-color: #303030; + --search-input-text-color: #d0d0d0; + --search-input-placeholder-color: #909090; + --search-tag-highlight-color: #ffff66; + --button-border-color: #626870; + --button-active-filter: brightness(96%); + --button-focus-filter: brightness(104%); + --invalid-tag-background-color: #ffe6e6; + --invalid-tag-text-color: #000000; + div.main-grid img { + filter: invert(100%) sepia(4%) saturate(98%) hue-rotate(212deg) brightness(160%) contrast(160%); + } + } + + body.theme-light { /* Text colors for body and block elements */ --body-text-color: #282828; --block-text-color: #282828; /* Background colors for various elements */ --body-background-color: #ffffff; --section-background-color: var(--body-background-color); - --detail-background-color: #ffffff; + --detail-background-color: var(--body-background-color); --code-background-color: #f5f5f5; --mark-background-color: #f7f7f7; --detail-block-color: #f4f4f4; @@ -96,66 +255,8 @@ /* Colors for invalid tag notifications */ --invalid-tag-background-color: #ffe6e6; --invalid-tag-text-color: #000000; - } -} -/* - * Dark theme - */ -@media (prefers-color-scheme: dark) { - :root { - --body-font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; - --block-font-family: 'DejaVu Serif', Georgia, "Times New Roman", Times, serif; - --code-font-family: 'DejaVu Sans Mono', monospace; - --body-font-size: 14.2px; - --block-font-size: 14.4px; - --code-font-size: 14px; - --nav-font-size: 13.4px; - --block-line-height: 1.5; - --code-line-height: 1.6; - --body-text-color: #e8e8e8; - --block-text-color: #e8e8e8; - --body-background-color: #333c44; - --section-background-color: var(--body-background-color); - --detail-background-color: #333c44; - --code-background-color: #414c57; - --mark-background-color: #414c57; - --detail-block-color: #f4f4f4; - --navbar-background-color: /* #324F62; */ /* #2E556F; */ /* #355266; */ /* #3b5a74; */ /* #41617b; */ /* #3c5971; */ #2f4e68; - --navbar-text-color: #ffffff; - --subnav-background-color: /* #3F5F73; */ /* #495257; */ /* #515455; */ #242626; - --subnav-link-color: /* #fbad1a; */ #db9716; /* #a0c0f8; */ /* #92bee3; */ - --member-heading-background-color: var(--subnav-background-color); - --selected-background-color: #f8981d; - --selected-text-color: #253441; - --selected-link-color: #4a698a; - --table-header-color: /* #1E282F; */ #212d35; - --even-row-color: #333c44; - --odd-row-color: /* #414c57; */ #3f4a55; - --title-color: #fff; - --link-color: #fbad1a; /* #a0c0f8; */ /* #92bee3; */ - --link-color-active: #ffc455; - --toc-background-color: #2A3135; - --toc-highlight-color: var(--subnav-background-color); - --toc-hover-color: #3f4246; - --snippet-background-color: #263037; - --snippet-text-color: var(--block-text-color); - --snippet-highlight-color: #f7c590; - --pre-background-color: var(--snippet-background-color); - --pre-text-color: var(--snippet-text-color); - --border-color: /* #1E282F; */ #334551; - --table-border-color: #1E282F; - --tab-border-radius: 2px 2px 0 0; - --search-input-background-color: #303030; - --search-input-text-color: #d0d0d0; - --search-input-placeholder-color: #909090; - --search-tag-highlight-color: #ffff66; - --button-border-color: #626870; - --button-active-filter: brightness(96%); - --button-focus-filter: brightness(104%); - --invalid-tag-background-color: #ffe6e6; - --invalid-tag-text-color: #000000; - img { - filter: invert(100%) sepia(4%) saturate(98%) hue-rotate(212deg) brightness(160%) contrast(160%); + div.main-grid img { + filter: none; } } } @@ -281,6 +382,7 @@ hr { height: 100%; max-width: var(--max-content-width); margin: var(--content-margin); + position: relative; } .top-nav { background-color:var(--navbar-background-color); @@ -302,6 +404,50 @@ hr { button#navbar-toggle-button { display:none; } +button#theme-button { + width: 32px; + height: 32px; + padding: 5px; + margin-right: 4px; + background-color: transparent; + border: 1px solid transparent; + border-radius: 6px; + cursor: pointer; +} +button#theme-button:hover, +button#theme-button:focus-visible { + border: 1px solid var(--navbar-text-color); +} +div#theme-panel { + display: none; + position: absolute; + top: calc(var(--top-nav-height) - 2px); + right: 6px; + z-index: 8; + background-color: var(--toc-background-color); + color: var(--body-text-color); + padding: 4px; + white-space: nowrap; + border: 1px solid var(--border-color); + border-radius: 6px; + border-top-right-radius: 0; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + +} +div#theme-panel div:first-child { + font-weight: bold; + font-size: 16px; +} +div#theme-panel div { + padding: 8px; +} +div#theme-panel label { + margin-right: 8px; + cursor: pointer; +} +div#theme-panel input { + margin-right: 4px; +} ul.nav-list { display:inline-flex; margin:0; @@ -1081,7 +1227,7 @@ li.ui-static-link a, li.ui-static-link a:visited { .ui-autocomplete .search-result-desc { font-size: var(--nav-font-size); padding: 2px 4px; - color: #404040; + color: var(--block-text-color); overflow: hidden; text-overflow: ellipsis; } @@ -1089,7 +1235,7 @@ li.ui-static-link a, li.ui-static-link a:visited { font-weight:bold; } .ui-menu .ui-state-active .search-result-desc { - color: #383838; + color: var(--selected-text-color); } .ui-menu .ui-menu-item-wrapper { padding: 3px 4px; @@ -1226,6 +1372,7 @@ div#result-container { #result-container div.result-table > a.search-result-link:focus-visible, #result-container div.result-table > a.search-result-link.selected { background-color: var(--selected-background-color); + color: var(--selected-text-color); outline: none; } #result-container div.result-table > a.search-result-link .search-result-label { @@ -1234,7 +1381,6 @@ div#result-container { } #result-container div.result-table > a.search-result-link .search-result-desc { font-size: var(--nav-font-size); - color: #404040; overflow: hidden; text-overflow: ellipsis; } diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/sun.svg b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/sun.svg new file mode 100644 index 0000000000000..e8fa03499acc3 --- /dev/null +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/sun.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/util/DocPaths.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/util/DocPaths.java index 21f1267361954..7bc4da604196c 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/util/DocPaths.java +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/util/DocPaths.java @@ -115,6 +115,12 @@ public static DocPath indexN(int n) { /** The name of the right pointing angle icon. */ public static final DocPath RIGHT_SVG = DocPath.create("right.svg"); + /** The name of the moon icon for the dark theme. */ + public static final DocPath MOON_SVG = DocPath.create("moon.svg"); + + /** The name of the sun icon for the light theme. */ + public static final DocPath SUN_SVG = DocPath.create("sun.svg"); + /** The name of the syntax highlighting style sheet. */ public static final DocPath HIGHLIGHT_CSS = DocPath.create("highlight.css"); diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/html/HtmlAttr.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/html/HtmlAttr.java index 10aa7c0c57b26..2ef3ae9db2a06 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/html/HtmlAttr.java +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/html/HtmlAttr.java @@ -203,6 +203,7 @@ public String toString() { public enum InputType { CHECKBOX, + RADIO, RESET, TEXT; diff --git a/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java b/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java index ee1fa538a57d6..89bb531492cf2 100644 --- a/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java +++ b/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java @@ -143,6 +143,9 @@ void run() throws Exception { "search-result-desc", "search-result-label", "search-result-link", "selected", "sort-asc", "sort-desc", "two-column-search-results", "visible"); + // used for themes + removeAll(styleSheetNames, "theme-dark", "theme-light"); + // very JDK specific styleSheetNames.remove("module-graph"); styleSheetNames.remove("sealed-graph"); diff --git a/test/langtools/jdk/javadoc/doclet/testSpecTag/TestSpecTag.java b/test/langtools/jdk/javadoc/doclet/testSpecTag/TestSpecTag.java index 98b9b2232a226..7181b4f931ed7 100644 --- a/test/langtools/jdk/javadoc/doclet/testSpecTag/TestSpecTag.java +++ b/test/langtools/jdk/javadoc/doclet/testSpecTag/TestSpecTag.java @@ -127,18 +127,6 @@ public void testNavigation(Path base) throws IOException {
  • Search
  • Help
    • - - -
    -
    -
      -
      -
      -
      - """); } diff --git a/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java b/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java index 481f5ab6e7139..33388322a67d4 100644 --- a/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java +++ b/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java @@ -96,7 +96,7 @@ public void test(Path base) { }""", """ a[href]:hover, a[href]:active { - text-decoration:none; + text-decoration:underline; color:var(--link-color-active); }""", """ diff --git a/test/langtools/jdk/javadoc/tool/api/basic/APITest.java b/test/langtools/jdk/javadoc/tool/api/basic/APITest.java index 2d45d6c7a8f0f..5db718cd81030 100644 --- a/test/langtools/jdk/javadoc/tool/api/basic/APITest.java +++ b/test/langtools/jdk/javadoc/tool/api/basic/APITest.java @@ -209,8 +209,10 @@ protected void error(String msg) { "resource-files/jquery-ui.min.css", "resource-files/left.svg", "resource-files/link.svg", + "resource-files/moon.svg", "resource-files/right.svg", "resource-files/stylesheet.css", + "resource-files/sun.svg", "resource-files/x.svg", "resource-files/fonts/dejavu.css", "resource-files/fonts/DejaVuLGCSans-Bold.woff", From c5b529f97fb963d4f6a570b85669a9058b764a25 Mon Sep 17 00:00:00 2001 From: Hannes Wallnoefer Date: Tue, 1 Jul 2025 16:59:30 +0200 Subject: [PATCH 3/6] Set light theme by default --- .../doclets/formats/html/resources/script.js.template | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template index 4a97ab166abd6..cb4bd762bc079 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template @@ -386,9 +386,7 @@ document.addEventListener("DOMContentLoaded", function(e) { console.log(themeButton.firstElementChild.href); } var theme = localStorage.getItem("theme"); - if (theme) { - setTheme(theme || "theme-light"); - } + setTheme(theme || "theme-light"); makeFilterWidget(sidebar, updateToc); if (tocMenu) { navbar.appendChild(tocMenu); From eb97075e7985bbe16c9373d16b71ce0dd1cf90f0 Mon Sep 17 00:00:00 2001 From: Hannes Wallnoefer Date: Thu, 3 Jul 2025 14:50:13 +0200 Subject: [PATCH 4/6] Improve theme support --- .../doclets/formats/html/HtmlDoclet.java | 1 + .../doclets/formats/html/Navigation.java | 6 +- .../doclets/formats/html/resources/moon.svg | 8 +- .../formats/html/resources/script.js.template | 35 +++---- .../formats/html/resources/stylesheet.css | 98 ++++++++++--------- .../doclets/formats/html/resources/system.svg | 21 ++++ .../doclets/toolkit/util/DocPaths.java | 3 + 7 files changed, 99 insertions(+), 73 deletions(-) create mode 100644 src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/system.svg diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java index d00d7b1becff4..948ae0f61ff7e 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDoclet.java @@ -329,6 +329,7 @@ protected void generateOtherFiles(ClassTree classTree) 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); diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java index e156365703344..3d45812563575 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java @@ -546,7 +546,11 @@ public Content getContent() { 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())) + 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)) diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg index 23e9b54f96d11..2f00cc0c8cf05 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg @@ -8,8 +8,8 @@ --> - - - - + + + + diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template index cb4bd762bc079..8a0b5cb6d57c7 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template @@ -355,38 +355,36 @@ document.addEventListener("DOMContentLoaded", function(e) { const themePanel = document.querySelector("div#theme-panel"); var themePanelVisible = false; themeButton.addEventListener("click", e => { - if (!themePanel.style.display) { + if (!themePanelVisible) { themePanel.style.display = "block"; themeButton.setAttribute("aria-expanded", "true"); themePanelVisible = true; - } else { + 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) { - if (theme === "theme-os") { - document.body.classList.remove("theme-light", "theme-dark"); - } else if (theme === "theme-light") { - document.body.classList.remove("theme-dark"); - document.body.classList.add("theme-light"); - } else if (theme === "theme-dark") { - document.body.classList.remove("theme-light"); - document.body.classList.add("theme-dark"); - } + 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; - console.log(themeButton.firstElementChild.href); } - var theme = localStorage.getItem("theme"); - setTheme(theme || "theme-light"); + setTheme(localStorage.getItem("theme") || THEMES[0]); makeFilterWidget(sidebar, updateToc); if (tocMenu) { navbar.appendChild(tocMenu); @@ -406,6 +404,7 @@ document.addEventListener("DOMContentLoaded", function(e) { elem.select(); e.preventDefault(); } else if (e.key === "Escape") { + closeThemePanel(); if (expanded) { collapse(); e.preventDefault(); @@ -437,11 +436,6 @@ document.addEventListener("DOMContentLoaded", function(e) { toggleButton.setAttribute("aria-expanded", "false"); expanded = false; } - if (themePanelVisible) { - themePanel.style.removeProperty("display"); - themeButton.setAttribute("aria-expanded", "false"); - themePanelVisible = false; - } } function expand() { expanded = true; @@ -498,6 +492,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 diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css index d1a833bf43752..b3e92847271a2 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css @@ -102,39 +102,39 @@ body.theme-dark { --body-background-color: #292f35; --section-background-color: var(--body-background-color); --detail-background-color: var(--body-background-color); - --code-background-color: #414c57; - --mark-background-color: #8e8d8d; + --code-background-color: #353f46; + --mark-background-color: #313131; --detail-block-color: #f4f4f4; - --navbar-background-color: #3d5c77; + --navbar-background-color: #37546c; --navbar-text-color: #ffffff; - --subnav-background-color: #43505b; - --subnav-link-color: #f4b336; + --subnav-background-color: #404d57; + --subnav-link-color: #f5ae29; --member-heading-background-color: var(--subnav-background-color); --selected-background-color: #f8981d; --selected-text-color: #253441; --selected-link-color: #4a698a; - --table-header-color: #202c35; - --even-row-color: #293540; - --odd-row-color: #1c2126; + --table-header-color: #38444d; + --even-row-color: #292f35; + --odd-row-color: #21262d; --title-color: #fff; - --link-color: #f4b336; - --link-color-active: #ffc886; - --toc-background-color: #373f46; + --link-color: #d99a23; + --link-color-active: #ffb45b; + --toc-background-color: #343b42; --toc-highlight-color: var(--subnav-background-color); - --toc-hover-color: #333639; - --snippet-background-color: #232F37; + --toc-hover-color: #323538; + --snippet-background-color: #364148; --snippet-text-color: var(--block-text-color); --snippet-highlight-color: #f7c590; --pre-background-color: var(--snippet-background-color); --pre-text-color: var(--snippet-text-color); - --border-color: /* #1E282F; */ #334551; - --table-border-color: #1E282F; + --border-color: #444444; + --table-border-color: #717171; --tab-border-radius: 2px 2px 0 0; --search-input-background-color: #303030; --search-input-text-color: #d0d0d0; --search-input-placeholder-color: #909090; --search-tag-highlight-color: #ffff66; - --button-border-color: #626870; + --button-border-color: #909090; --button-active-filter: brightness(96%); --button-focus-filter: brightness(104%); --invalid-tag-background-color: #ffe6e6; @@ -154,39 +154,39 @@ body.theme-dark { --body-background-color: #292f35; --section-background-color: var(--body-background-color); --detail-background-color: var(--body-background-color); - --code-background-color: #414c57; - --mark-background-color: #8e8d8d; + --code-background-color: #353f46; + --mark-background-color: #313131; --detail-block-color: #f4f4f4; - --navbar-background-color: #3d5c77; + --navbar-background-color: #37546c; --navbar-text-color: #ffffff; --subnav-background-color: #43505b; - --subnav-link-color: #f4b336; + --subnav-link-color: #f5ae29; --member-heading-background-color: var(--subnav-background-color); --selected-background-color: #f8981d; --selected-text-color: #253441; --selected-link-color: #4a698a; - --table-header-color: #202c35; + --table-header-color: var(--subnav-background-color); --even-row-color: #293540; - --odd-row-color: #1c2126; + --odd-row-color: #21262d; --title-color: #fff; - --link-color: #f4b336; + --link-color: #d99a23; --link-color-active: #ffc886; --toc-background-color: #373f46; --toc-highlight-color: var(--subnav-background-color); --toc-hover-color: #333639; - --snippet-background-color: #232F37; + --snippet-background-color: #364148; --snippet-text-color: var(--block-text-color); --snippet-highlight-color: #f7c590; --pre-background-color: var(--snippet-background-color); --pre-text-color: var(--snippet-text-color); - --border-color: /* #1E282F; */ #334551; - --table-border-color: #1E282F; + --border-color: #444444; + --table-border-color: #717171; --tab-border-radius: 2px 2px 0 0; --search-input-background-color: #303030; --search-input-text-color: #d0d0d0; --search-input-placeholder-color: #909090; --search-tag-highlight-color: #ffff66; - --button-border-color: #626870; + --button-border-color: #909090; --button-active-filter: brightness(96%); --button-focus-filter: brightness(104%); --invalid-tag-background-color: #ffe6e6; @@ -197,62 +197,46 @@ body.theme-dark { } body.theme-light { - /* Text colors for body and block elements */ --body-text-color: #282828; --block-text-color: #282828; - /* Background colors for various elements */ --body-background-color: #ffffff; --section-background-color: var(--body-background-color); --detail-background-color: var(--body-background-color); --code-background-color: #f5f5f5; --mark-background-color: #f7f7f7; --detail-block-color: #f4f4f4; - /* Colors for navigation bar and table captions */ --navbar-background-color: #4D7A97; --navbar-text-color: #ffffff; - /* Background color for subnavigation and various headers */ --subnav-background-color: #dee3e9; --subnav-link-color: #47688a; --member-heading-background-color: var(--subnav-background-color); - /* Background and text colors for selected tabs and navigation items */ --selected-background-color: #f8981d; --selected-text-color: #253441; --selected-link-color: #4a698a; - /* Background colors for generated tables */ --table-header-color: #ebeff4; --even-row-color: #ffffff; --odd-row-color: #f0f0f2; - /* Text color for page title */ --title-color: #2c4557; - /* Text colors for links */ --link-color: #437291; --link-color-active: #bb7a2a; - /* Table of contents */ --toc-background-color: #f8f8f8; --toc-highlight-color: var(--subnav-background-color); --toc-hover-color: #e9ecf0; - /* Snippet and pre colors */ --snippet-background-color: #f2f2f4; --snippet-text-color: var(--block-text-color); --snippet-highlight-color: #f7c590; --pre-background-color: var(--snippet-background-color); --pre-text-color: var(--snippet-text-color); - /* Border colors for structural elements and user defined tables */ --border-color: #e6e6e6; --table-border-color: #000000; - /* Styles for table tabs */ --tab-border-radius: 2px 2px 0 0; - /* Search input colors */ --search-input-background-color: #ffffff; --search-input-text-color: #000000; --search-input-placeholder-color: #909090; - /* Highlight color for active search tag target */ --search-tag-highlight-color: #ffff66; - /* Copy button colors and filters */ --button-border-color: #b0b8c8; --button-active-filter: brightness(96%); --button-focus-filter: brightness(104%); - /* Colors for invalid tag notifications */ --invalid-tag-background-color: #ffe6e6; --invalid-tag-text-color: #000000; div.main-grid img { @@ -353,7 +337,7 @@ hr { */ .about-language { flex: 0 0 auto; - padding:0 20px; + padding:0 15px; margin:0; font-size:0.915em; max-width: 50%; @@ -405,8 +389,8 @@ button#navbar-toggle-button { display:none; } button#theme-button { - width: 32px; - height: 32px; + width: 34px; + height: 34px; padding: 5px; margin-right: 4px; background-color: transparent; @@ -416,7 +400,19 @@ button#theme-button { } button#theme-button:hover, button#theme-button:focus-visible { - border: 1px solid var(--navbar-text-color); + border: 1px solid var(--button-border-color); +} +button#theme-button img { + display: none; +} +body.theme-light button#theme-button img.theme-light { + display: inline; +} +body.theme-dark button#theme-button img.theme-dark { + display: inline; +} +body.theme-os button#theme-button img.theme-os { + display: inline; } div#theme-panel { display: none; @@ -493,6 +489,13 @@ ol.sub-nav-list li:not(:first-child) { padding-left: 17px; list-style: none; } +body.theme-dark ol.sub-nav-list li:not(:first-child) { + background-image: url('data:image/svg+xml; utf8, \ + \ + \ + '); +} ol.sub-nav-list a { padding: 3px; } @@ -1815,7 +1818,6 @@ table.striped > tbody > tr > th { } @media screen and (max-width: 800px) { .about-language { - padding: 0 16px; max-width: 90%; } ul.nav-list li { diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/system.svg b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/system.svg new file mode 100644 index 0000000000000..982d69242da1d --- /dev/null +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/system.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/util/DocPaths.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/util/DocPaths.java index 7bc4da604196c..ca17da44da2bb 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/util/DocPaths.java +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/util/DocPaths.java @@ -121,6 +121,9 @@ public static DocPath indexN(int n) { /** The name of the sun icon for the light theme. */ public static final DocPath SUN_SVG = DocPath.create("sun.svg"); + /** The name of the sun icon for the theme set by system setting. */ + public static final DocPath SYSTEM_SVG = DocPath.create("system.svg"); + /** The name of the syntax highlighting style sheet. */ public static final DocPath HIGHLIGHT_CSS = DocPath.create("highlight.css"); From bd11453e40be944d8f066db32083e1ba12a789fb Mon Sep 17 00:00:00 2001 From: Hannes Wallnoefer Date: Fri, 4 Jul 2025 09:27:37 +0200 Subject: [PATCH 5/6] Fix icon colors for dark theme --- .../doclets/formats/html/resources/glass.svg | 6 +- .../formats/html/resources/stylesheet.css | 78 +++++++++++++++---- .../doclets/formats/html/resources/x.svg | 6 +- 3 files changed, 67 insertions(+), 23 deletions(-) diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/glass.svg b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/glass.svg index ff7df85e8f66e..c979c9f3d83ec 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/glass.svg +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/glass.svg @@ -8,6 +8,6 @@ --> - - - \ No newline at end of file + + + diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css index b3e92847271a2..2282d72629607 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css @@ -34,6 +34,20 @@ --nav-height: calc(var(--top-nav-height) + var(--sub-nav-height)); --max-content-width: 1500px; --content-margin: 0 auto; + /* Inline SVG icons for dark theme */ + --right-svg-dark: url('data:image/svg+xml; utf8, \ + \ + \ + '); + --glass-svg-dark: url('data:image/svg+xml; utf8, \ + \ + \ + '); + --x-svg-dark: url('data:image/svg+xml; utf8, \ + \ + \ + '); } body { /* Text colors for body and block elements */ @@ -84,7 +98,7 @@ body { /* Search input colors */ --search-input-background-color: #ffffff; --search-input-text-color: #000000; - --search-input-placeholder-color: #909090; + --search-input-placeholder-color: #757575; /* Highlight color for active search tag target */ --search-tag-highlight-color: #ffff66; /* Copy button colors and filters */ @@ -115,7 +129,7 @@ body.theme-dark { --selected-link-color: #4a698a; --table-header-color: #38444d; --even-row-color: #292f35; - --odd-row-color: #21262d; + --odd-row-color: #1d2228; --title-color: #fff; --link-color: #d99a23; --link-color-active: #ffb45b; @@ -132,7 +146,7 @@ body.theme-dark { --tab-border-radius: 2px 2px 0 0; --search-input-background-color: #303030; --search-input-text-color: #d0d0d0; - --search-input-placeholder-color: #909090; + --search-input-placeholder-color: #979797; --search-tag-highlight-color: #ffff66; --button-border-color: #909090; --button-active-filter: brightness(96%); @@ -159,21 +173,21 @@ body.theme-dark { --detail-block-color: #f4f4f4; --navbar-background-color: #37546c; --navbar-text-color: #ffffff; - --subnav-background-color: #43505b; + --subnav-background-color: #404d57; --subnav-link-color: #f5ae29; --member-heading-background-color: var(--subnav-background-color); --selected-background-color: #f8981d; --selected-text-color: #253441; --selected-link-color: #4a698a; - --table-header-color: var(--subnav-background-color); - --even-row-color: #293540; - --odd-row-color: #21262d; + --table-header-color: #38444d; + --even-row-color: #292f35; + --odd-row-color: #1d2228; --title-color: #fff; --link-color: #d99a23; - --link-color-active: #ffc886; - --toc-background-color: #373f46; + --link-color-active: #ffb45b; + --toc-background-color: #343b42; --toc-highlight-color: var(--subnav-background-color); - --toc-hover-color: #333639; + --toc-hover-color: #323538; --snippet-background-color: #364148; --snippet-text-color: var(--block-text-color); --snippet-highlight-color: #f7c590; @@ -184,7 +198,7 @@ body.theme-dark { --tab-border-radius: 2px 2px 0 0; --search-input-background-color: #303030; --search-input-text-color: #d0d0d0; - --search-input-placeholder-color: #909090; + --search-input-placeholder-color: #979797; --search-tag-highlight-color: #ffff66; --button-border-color: #909090; --button-active-filter: brightness(96%); @@ -232,7 +246,7 @@ body.theme-dark { --tab-border-radius: 2px 2px 0 0; --search-input-background-color: #ffffff; --search-input-text-color: #000000; - --search-input-placeholder-color: #909090; + --search-input-placeholder-color: #757575; --search-tag-highlight-color: #ffff66; --button-border-color: #b0b8c8; --button-active-filter: brightness(96%); @@ -490,11 +504,15 @@ ol.sub-nav-list li:not(:first-child) { list-style: none; } body.theme-dark ol.sub-nav-list li:not(:first-child) { - background-image: url('data:image/svg+xml; utf8, \ - \ - \ - '); + background-image: var(--right-svg-dark); +} +@media (prefers-color-scheme: dark) { + ol.sub-nav-list li:not(:first-child) { + background-image: var(--right-svg-dark); + } + body.theme-light ol.sub-nav-list li:not(:first-child) { + background-image: url("right.svg"); + } } ol.sub-nav-list a { padding: 3px; @@ -1257,6 +1275,17 @@ input[type="text"] { font-size: var(--nav-font-size); height: 19px; } +body.theme-dark input[type="text"] { + background-image: var(--glass-svg-dark); +} +@media (prefers-color-scheme: dark) { + input[type="text"] { + background-image: var(--glass-svg-dark); + } + body.theme-light input[type="text"] { + background-image: url('glass.svg'); + } +} input#page-search-input { width: calc(180px + 10vw); margin: 10px 0; @@ -1284,6 +1313,21 @@ input#reset-search, input.reset-filter, input#page-search-reset { font-size:0; visibility:hidden; } +body.theme-dark input#reset-search, +body.theme-dark input.reset-filter, +body.theme-dark input#page-search-reset { + background-image: var(--x-svg-dark); +} +@media (prefers-color-scheme: dark) { + input#reset-search, input.reset-filter, input#page-search-reset { + background-image: var(--x-svg-dark); + } + body.theme-light input#reset-search, + body.theme-light input.reset-filter, + body.theme-light input#page-search-reset { + background-image: url('x.svg'); + } +} input#reset-search { position:absolute; right:5px; diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/x.svg b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/x.svg index 1efb410924132..34a942ffff10b 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/x.svg +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/x.svg @@ -8,6 +8,6 @@ --> - - - \ No newline at end of file + + + From a35877de2b2833369fe446f833dd7f7022a9f206 Mon Sep 17 00:00:00 2001 From: Hannes Wallnoefer Date: Tue, 8 Jul 2025 14:46:19 +0200 Subject: [PATCH 6/6] Finalize dark theme --- .../formats/html/resources/highlight.css | 125 +++++++++++++++++- .../doclets/formats/html/resources/moon.svg | 8 +- .../formats/html/resources/script.js.template | 1 + .../formats/html/resources/stylesheet.css | 52 +++----- .../CheckStylesheetClasses.java | 2 +- .../doclet/testStylesheet/TestStylesheet.java | 2 +- .../jdk/javadoc/tool/api/basic/APITest.java | 1 + 7 files changed, 152 insertions(+), 39 deletions(-) diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css index 6301e43c3de9a..050c27f1bb87f 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css @@ -65,8 +65,67 @@ /* 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_, @@ -128,4 +187,66 @@ .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 */ + } + } } diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg index 2f00cc0c8cf05..856a8ffeeec21 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/moon.svg @@ -8,8 +8,8 @@ --> - - - - + + + + diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template index 8a0b5cb6d57c7..b8e8ebc535adf 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template @@ -396,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); diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css index 2282d72629607..99a9e12ccf455 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css @@ -113,30 +113,30 @@ body { body.theme-dark { --body-text-color: #e8e8e8; --block-text-color: #e8e8e8; - --body-background-color: #292f35; + --body-background-color: #222528; --section-background-color: var(--body-background-color); --detail-background-color: var(--body-background-color); - --code-background-color: #353f46; + --code-background-color: #303940; --mark-background-color: #313131; --detail-block-color: #f4f4f4; - --navbar-background-color: #37546c; + --navbar-background-color: #395A6F; --navbar-text-color: #ffffff; - --subnav-background-color: #404d57; + --subnav-background-color: #3d454d; --subnav-link-color: #f5ae29; --member-heading-background-color: var(--subnav-background-color); --selected-background-color: #f8981d; --selected-text-color: #253441; --selected-link-color: #4a698a; --table-header-color: #38444d; - --even-row-color: #292f35; - --odd-row-color: #1d2228; + --even-row-color: #222528; + --odd-row-color: #2d3135; --title-color: #fff; - --link-color: #d99a23; + --link-color: #e6a52a; --link-color-active: #ffb45b; - --toc-background-color: #343b42; + --toc-background-color: #31363c; --toc-highlight-color: var(--subnav-background-color); - --toc-hover-color: #323538; - --snippet-background-color: #364148; + --toc-hover-color: #3f4146; + --snippet-background-color: #2d363c; --snippet-text-color: var(--block-text-color); --snippet-highlight-color: #f7c590; --pre-background-color: var(--snippet-background-color); @@ -165,30 +165,30 @@ body.theme-dark { body { --body-text-color: #e8e8e8; --block-text-color: #e8e8e8; - --body-background-color: #292f35; + --body-background-color: #222528; --section-background-color: var(--body-background-color); --detail-background-color: var(--body-background-color); - --code-background-color: #353f46; + --code-background-color: #303940; --mark-background-color: #313131; --detail-block-color: #f4f4f4; - --navbar-background-color: #37546c; + --navbar-background-color: #395A6F; --navbar-text-color: #ffffff; - --subnav-background-color: #404d57; + --subnav-background-color: #3d454d; --subnav-link-color: #f5ae29; --member-heading-background-color: var(--subnav-background-color); --selected-background-color: #f8981d; --selected-text-color: #253441; --selected-link-color: #4a698a; --table-header-color: #38444d; - --even-row-color: #292f35; - --odd-row-color: #1d2228; + --even-row-color: #222528; + --odd-row-color: #2d3135; --title-color: #fff; - --link-color: #d99a23; + --link-color: #e6a52a; --link-color-active: #ffb45b; - --toc-background-color: #343b42; + --toc-background-color: #31363c; --toc-highlight-color: var(--subnav-background-color); - --toc-hover-color: #323538; - --snippet-background-color: #364148; + --toc-hover-color: #3f4146; + --snippet-background-color: #2d363c; --snippet-text-color: var(--block-text-color); --snippet-highlight-color: #f7c590; --pre-background-color: var(--snippet-background-color); @@ -1360,6 +1360,7 @@ select#search-modules { } kbd { background-color: #eeeeee; + color: #282828; border: 1px solid #b0b0b0; border-radius: 3px; padding: 0 4px; @@ -1761,17 +1762,6 @@ table.striped > tbody > tr > th { .top-nav nav.toc ol.toc-list li { font-size: 1.04em; } - nav.toc a:link, nav.toc a:visited { - text-decoration:none; - color:var(--link-color); - } - nav.toc a[href]:hover, nav.toc a[href]:focus { - text-decoration:none; - color:var(--link-color-active); - } - :root { - scroll-behavior: auto; - } header { max-height: 100vh; overflow-y: visible; diff --git a/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java b/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java index 89bb531492cf2..ba846c293a23b 100644 --- a/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java +++ b/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java @@ -144,7 +144,7 @@ void run() throws Exception { "sort-asc", "sort-desc", "two-column-search-results", "visible"); // used for themes - removeAll(styleSheetNames, "theme-dark", "theme-light"); + removeAll(styleSheetNames, "theme-dark", "theme-light", "theme-os"); // very JDK specific styleSheetNames.remove("module-graph"); diff --git a/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java b/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java index 33388322a67d4..481f5ab6e7139 100644 --- a/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java +++ b/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java @@ -96,7 +96,7 @@ public void test(Path base) { }""", """ a[href]:hover, a[href]:active { - text-decoration:underline; + text-decoration:none; color:var(--link-color-active); }""", """ diff --git a/test/langtools/jdk/javadoc/tool/api/basic/APITest.java b/test/langtools/jdk/javadoc/tool/api/basic/APITest.java index 5db718cd81030..522f3327959e1 100644 --- a/test/langtools/jdk/javadoc/tool/api/basic/APITest.java +++ b/test/langtools/jdk/javadoc/tool/api/basic/APITest.java @@ -213,6 +213,7 @@ protected void error(String msg) { "resource-files/right.svg", "resource-files/stylesheet.css", "resource-files/sun.svg", + "resource-files/system.svg", "resource-files/x.svg", "resource-files/fonts/dejavu.css", "resource-files/fonts/DejaVuLGCSans-Bold.woff",