diff options
Diffstat (limited to 'plugins/base/src/main')
8 files changed, 120 insertions, 145 deletions
diff --git a/plugins/base/src/main/kotlin/DokkaBase.kt b/plugins/base/src/main/kotlin/DokkaBase.kt index c0e512c5..7bc2912c 100644 --- a/plugins/base/src/main/kotlin/DokkaBase.kt +++ b/plugins/base/src/main/kotlin/DokkaBase.kt @@ -205,10 +205,6 @@ class DokkaBase : DokkaPlugin() { htmlPreprocessors providing ::NavigationPageInstaller order { after(rootCreator) } } - val navigationSearchInstaller by extending { - htmlPreprocessors providing ::NavigationSearchInstaller order { after(rootCreator) } - } - val scriptsInstaller by extending { htmlPreprocessors providing ::ScriptsInstaller order { after(rootCreator) } } diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 3086b82d..3cf914ce 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -758,6 +758,14 @@ open class HtmlRenderer( templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) { script { unsafe { +"""var pathToRoot = "###";""" } } } + // This script doesn't need to be there but it is nice to have since app in dark mode doesn't 'blink' (class is added before it is rendered) + script { unsafe { +""" + const storage = localStorage.getItem("dokka-dark-mode") + const savedDarkMode = storage ? JSON.parse(storage) : false + if(savedDarkMode === true){ + document.getElementsByTagName("html")[0].classList.add("theme-dark") + } + """.trimIndent() } } resources.forEach { when { it.substringBefore('?').substringAfterLast('.') == "css" -> @@ -808,6 +816,12 @@ open class HtmlRenderer( } div("pull-right d-flex") { filterButtons(page) + button { + id = "theme-toggle-button" + span { + id = "theme-toggle" + } + } div { id = "searchBar" } diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt index 992c5eba..9faf4d17 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt @@ -49,37 +49,6 @@ abstract class NavigationDataProvider { } } -open class NavigationSearchInstaller(val context: DokkaContext) : NavigationDataProvider(), PageTransformer { - private val mapper = jacksonObjectMapper() - - open fun createSearchRecordFromNode(node: NavigationNode, location: String): SearchRecord = - SearchRecord(name = node.name, location = location) - - override fun invoke(input: RootPageNode): RootPageNode { - val page = RendererSpecificResourcePage( - name = "scripts/navigation-pane.json", - children = emptyList(), - strategy = RenderingStrategy.DriLocationResolvableWrite { resolver -> - val content = navigableChildren(input).withDescendants().map { - createSearchRecordFromNode(it, resolveLocation(resolver, it.dri, it.sourceSets).orEmpty()) - } - if (context.configuration.delayTemplateSubstitution) { - mapper.writeValueAsString(AddToSearch(context.configuration.moduleName, content.toList())) - } else { - mapper.writeValueAsString(content) - } - }) - - return input.modified(children = input.children + page) - } - - private fun resolveLocation(locationResolver: DriResolver, dri: DRI, sourceSets: Set<DisplaySourceSet>): String? = - locationResolver(dri, sourceSets).also { location -> - if (location.isNullOrBlank()) context.logger.warn("Cannot resolve path for $dri and sourceSets: ${sourceSets.joinToString { it.name }}") - } - -} - open class NavigationPageInstaller(val context: DokkaContext) : NavigationDataProvider(), PageTransformer { override fun invoke(input: RootPageNode): RootPageNode = @@ -152,13 +121,13 @@ class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer object AssetsInstaller : PageTransformer { private val imagesPages = listOf( "images/arrow_down.svg", - "images/arrow_down_white.svg", "images/logo-icon.svg", "images/go-to-top-icon.svg", "images/footer-go-to-link.svg", "images/anchor-copy-button.svg", "images/copy-icon.svg", "images/copy-successful-icon.svg", + "images/theme-toggle.svg", ) override fun invoke(input: RootPageNode) = input.modified( diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down.svg b/plugins/base/src/main/resources/dokka/images/arrow_down.svg index 0d8eb3b4..c0388dee 100755 --- a/plugins/base/src/main/resources/dokka/images/arrow_down.svg +++ b/plugins/base/src/main/resources/dokka/images/arrow_down.svg @@ -1,3 +1,3 @@ <svg width="24" height="24" viewBox="-5 -3 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11 9l-6 5.25V3.75z" fill="black"/> + <path d="M11 9l-6 5.25V3.75z" fill="currentColor"/> </svg>
\ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg b/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg deleted file mode 100644 index 41bda9bf..00000000 --- a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="24" height="24" viewBox="-5 -3 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11 9l-6 5.25V3.75z" fill="#fff"/> -</svg>
\ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/theme-toggle.svg b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg new file mode 100644 index 00000000..2a8d750e --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> + <path fill="white" fill-rule="evenodd" clip-rule="evenodd" + d="M0 9a9 9 0 1018 0A9 9 0 000 9zm16 0a7 7 0 01-7 7V2a7 7 0 017 7z" transform="translate(3, 3)"></path> +</svg>
\ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js index 05ec7377..ae838d6f 100644 --- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js +++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js @@ -20,8 +20,21 @@ window.addEventListener('load', () => { handleAnchor() initHidingLeftNavigation() topNavbarOffset = document.getElementById('navigation-wrapper') + darkModeSwitch() }) +const darkModeSwitch = () => { + const localStorageKey = "dokka-dark-mode" + const storage = localStorage.getItem(localStorageKey) + const savedDarkMode = storage ? JSON.parse(storage) : false + const element = document.getElementById("theme-toggle-button") + + element.addEventListener('click', () => { + document.getElementsByTagName("html")[0].classList.toggle("theme-dark") + localStorage.setItem(localStorageKey, JSON.stringify(!savedDarkMode)) + }) +} + const initHidingLeftNavigation = () => { document.getElementById("leftToggler").onclick = function(event) { //Events need to be prevented from bubbling since they will trigger next handler diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index 8530b514..b9d22c3d 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -4,12 +4,19 @@ :root { --default-gray: #f4f4f4; + --default-font-color: black; + --header-font-color: var(--default-font-color); + --breadcrumb-font-color: #637282; --breadcrumb-margin: 24px; --hover-link-color: #5B5DEF; + --footer-height: 64px; --footer-padding-top: 48px; --footer-background: var(--default-gray); + --footer-font-color: var(--average-color); + --footer-go-to-top-color: white; + --horizontal-spacing-for-content: 16px; --mobile-horizontal-spacing-for-content: 8px; --bottom-spacing: 16px; @@ -17,16 +24,38 @@ --color-scrollbar-track: var(--default-gray); --default-white: #fff; --background-color: var(--default-white); + --dark-mode-and-search-icon-color: var(--default-white); --color-dark: #27282c; --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif; - --default-monospace-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; + --default-monospace-font-family: JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace; --default-font-size: 15px; --average-color: var(--color-dark); + --brief-color: var(--average-color); --secondary-text-color: rgba(39, 40, 44, .7); --code-background: rgba(39, 40, 44, .05); --border-color: rgba(39, 40, 44, .2); - --top-navigation-height: 67px; + --top-navigation-height: 73px; --max-width: 1160px; + --white-10: hsla(0,0%,100%,.1); + + --active-tab-border-color: var(--hover-link-color); + --inactive-tab-border-color: #DADFE6; +} + +:root.theme-dark { + --background-color: #27282c; + --color-dark: #3d3d41; + --default-font-color: hsla(0,0%,100%,0.8); + --border-color: hsla(0,0%,100%,0.2); + --code-background: hsla(0,0%,100%,0.05); + --breadcrumb-font-color: #8c8c8e; + --brief-color: hsla(0,0%,100%,0.4); + + --active-tab-border-color: var(--default-font-color); + --inactive-tab-border-color: var(--border-color); + --footer-background: hsla(0,0%,100%,0.05); + --footer-font-color: hsla(0,0%,100%,0.6); + --footer-go-to-top-color: var(--footer-font-color); } html { @@ -36,6 +65,7 @@ html { scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; + color: var(--default-font-color); } html ::-webkit-scrollbar { @@ -79,6 +109,7 @@ html ::-webkit-scrollbar-thumb { color: #fff; font-family: var(--default-font-family); letter-spacing: -0.1px; + align-items: center; /* Reset margin and use padding for border */ margin-left: 0; @@ -97,6 +128,11 @@ html ::-webkit-scrollbar-thumb { #searchBar { margin-left: 16px; + display: inline-flex; + align-content: center; + align-items: center; + width: 36px; + height: 36px; } .breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover { @@ -113,7 +149,7 @@ html ::-webkit-scrollbar-thumb { .section-tab { border: 0; background-color: transparent; - border-bottom: 1px solid #DADFE6; + border-bottom: 1px solid var(--inactive-tab-border-color); } .platform-hinted > .platform-bookmarks-row { @@ -126,21 +162,15 @@ html ::-webkit-scrollbar-thumb { cursor: pointer; outline: none; font-size: var(--default-font-size); - color: var(--average-color); + color: inherit; } .section-tab:hover { - color: #282E34; - border-bottom: 2px solid var(--hover-link-color); + border-bottom: 2px solid var(--active-tab-border-color); } .section-tab[data-active=''] { - color: #282E34; - border-bottom: 2px solid var(--hover-link-color); -} - -.tabs-section-body { - background-color: white; + border-bottom: 2px solid var(--active-tab-border-color); } .tabs-section-body > div { @@ -382,14 +412,14 @@ code.paragraph { .sideMenuPart a { display: block; align-items: center; - color: var(--average-color); + color: var(--default-font-color); overflow: hidden; } .sideMenuPart a:hover { text-decoration: none; - color: var(--average-color); + color: var(--default-font-color); } .sideMenuPart > .overview:before { @@ -421,18 +451,25 @@ code.paragraph { } .sideMenuPart > .overview .navButtonContent::before { - content: url("../images/arrow_down.svg"); + content: ''; + + -webkit-mask: url("../images/arrow_down.svg") no-repeat 50% 50%; + mask: url("../images/arrow_down.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--default-font-color); + display: flex; flex-direction: row; align-items: center; justify-content: center; transform: rotate(90deg); - width: 12px; - height: 12px; + width: 16px; + height: 16px; } .sideMenuPart[data-active] > .overview .navButtonContent::before { - content: url("../images/arrow_down_white.svg");; + background-color: var(--default-white); } .sideMenuPart.hidden > .navButton .navButtonContent::after { @@ -460,7 +497,6 @@ body, table { table { width: 100%; border-collapse: collapse; - background-color: #ffffff; padding: 5px; } @@ -472,34 +508,16 @@ td:first-child { width: 20vw; } -.keyword { - color: black; - font-family: var(--default-monospace-font-family); - font-size: 12px; -} - -.identifier { - color: darkblue; - font-size: 12px; - font-family: var(--default-monospace-font-family); -} - .brief { white-space: pre-wrap; overflow: hidden; } -h1, h2, h3, h4, h5, h6 { - color: #222; - font-weight: bold; -} - p, ul, ol, table, pre, dl { margin: 0; } h1 { - font-weight: bold; font-size: 40px; line-height: 48px; letter-spacing: -1px; @@ -516,7 +534,6 @@ h1.cover { } h2 { - color: #393939; font-size: 31px; line-height: 40px; letter-spacing: -0.5px; @@ -528,14 +545,6 @@ h3 { letter-spacing: -0.2px; } -h4 { - margin: 0; -} - -h3, h4, h5, h6 { - color: #494949; -} - .UnderCoverText { font-size: 16px; line-height: 28px; @@ -573,16 +582,10 @@ a { a small { font-size: 11px; - color: #555; margin-top: -0.6em; display: block; } -.wrapper { - width: 860px; - margin: 0 auto; -} - blockquote { border-left: 1px solid #e5e5e5; margin: 0; @@ -590,11 +593,6 @@ blockquote { font-style: italic; } -code, pre { - color: #333; - font-size: var(--default-font-size); -} - pre { display: block; overflow-x: auto; @@ -611,10 +609,6 @@ dt { font-weight: 700; } -th { - color: #444; -} - p.paragraph img { display: block; } @@ -623,11 +617,6 @@ img { max-width: 100%; } -strong { - color: #222; - font-weight: 700; -} - small { font-size: 11px; } @@ -691,9 +680,10 @@ small { display: flex; flex-direction: row; align-self: flex-end; - min-height: 30px; + min-height: 36px; z-index: 0; flex-wrap: wrap; + align-items: center; } .platform-selector:hover { @@ -854,14 +844,12 @@ td.content { } .cover .with-platform-tabs { - background-color: white; font-size: var(--default-font-size); } .cover > .with-platform-tabs > .content { - background-color: var(--background-color); padding: 8px 16px; - border: 1px solid rgba(39, 40, 44, 0.20); + border: 1px solid var(--border-color); } .cover > .block { @@ -877,7 +865,6 @@ td.content { .table-row .with-platform-tabs .sourceset-depenent-content .brief { padding: 8px; - background-color: var(--background-color); } .sideMenuPart[data-active] > .overview:before { @@ -898,6 +885,7 @@ td.content { flex-direction: column; border-bottom: 1px solid var(--border-color); padding: 11px 0 12px 0; + background-color: var(--background-color); } .table-row:last-of-type { @@ -905,7 +893,7 @@ td.content { } .table-row .brief-comment { - color: var(--average-color); + color: var(--brief-color); } .platform-dependent-row { @@ -968,37 +956,6 @@ td.content { } } -@media print, screen and (max-width: 720px) { - body { - word-wrap: break-word; - } - - header { - padding: 0; - } - - header ul, header p.view { - position: static; - } - - pre, code { - word-wrap: normal; - } -} - -@media print, screen and (max-width: 480px) { - header ul { - display: none; - } -} - -@media print { - body { - padding: 0.4in; - font-size: 12pt; - color: #444; - } -} .footer { clear: both; @@ -1009,7 +966,7 @@ td.content { font-size: 12px; line-height: 16px; letter-spacing: 0.2px; - color: var(--average-color); + color: var(--footer-font-color); margin-top: auto; background-color: var(--footer-background); } @@ -1017,7 +974,7 @@ td.content { .footer span.go-to-top-icon { border-radius: 2em; padding: 11px 10px !important; - background-color: white; + background-color: var(--footer-go-to-top-color); } .footer span.go-to-top-icon > a::before { @@ -1079,6 +1036,27 @@ div.runnablesample { display: flex; } +#theme-toggle { + content: url("../images/theme-toggle.svg"); +} + +#theme-toggle-button { + width: 36px; + height: 36px; + display: inline-flex; + justify-content: center; + align-items: center; + border-radius: 24px; + margin-left: 16px; + background-color: inherit; + border: none; + cursor: pointer; +} + +#theme-toggle-button:hover { + background: var(--white-10); +} + @media screen and (max-width: 1119px) { h1.cover { font-size: 48px; @@ -1155,4 +1133,8 @@ div.runnablesample { font-size: 32px; line-height: 32px; } + + #theme-toggle-button { + display: none; + } } |
