From 0bb4b0fa2d82025d14cbbde57894dd67d12a007b Mon Sep 17 00:00:00 2001 From: Morten Piibeleht Date: Tue, 13 Aug 2019 11:15:01 +1200 Subject: [PATCH] Allow overriding logo in dark themes (#1090) --- assets/html/scss/documenter-dark.scss | 2 + assets/html/scss/documenter/_elements.scss | 10 +++ assets/html/scss/documenter/_variables.scss | 2 + assets/html/themes/documenter-dark.css | 2 + assets/html/themes/documenter-light.css | 3 + docs/src/assets/logo-dark.svg | 77 +++++++++++++++++++++ src/Writers/HTMLWriter.jl | 40 ++++++----- 7 files changed, 120 insertions(+), 16 deletions(-) create mode 100644 docs/src/assets/logo-dark.svg diff --git a/assets/html/scss/documenter-dark.scss b/assets/html/scss/documenter-dark.scss index 3876505edd..bbe2135d0b 100644 --- a/assets/html/scss/documenter-dark.scss +++ b/assets/html/scss/documenter-dark.scss @@ -8,6 +8,8 @@ $bulmaswatch-import-font: false; @import "darkly/variables"; +$documenter-is-dark-theme: true; + $family-sans-serif: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif; $family-monospace: 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', 'DejaVu Sans Mono', monospace; diff --git a/assets/html/scss/documenter/_elements.scss b/assets/html/scss/documenter/_elements.scss index 1a0c3c8a7a..4e81ed8d0f 100644 --- a/assets/html/scss/documenter/_elements.scss +++ b/assets/html/scss/documenter/_elements.scss @@ -17,3 +17,13 @@ h1, h2, h3, h4, h5, h6 { visibility: visible; } } + +@if $documenter-is-dark-theme { + .docs-light-only { + display: none !important; + } +} @else { + .docs-dark-only { + display: none !important; + } +} diff --git a/assets/html/scss/documenter/_variables.scss b/assets/html/scss/documenter/_variables.scss index 03fff3bc11..a910231024 100644 --- a/assets/html/scss/documenter/_variables.scss +++ b/assets/html/scss/documenter/_variables.scss @@ -17,6 +17,8 @@ $code-background: rgba(0, 0, 0, 0.05); $documenter-docstring-background: transparent !default; +$documenter-is-dark-theme: false !default; + // Helper functions // ---------------- // Declares the amount of lightness modifier used in the darken-color and lighten-color diff --git a/assets/html/themes/documenter-dark.css b/assets/html/themes/documenter-dark.css index bf5eecba2c..123a465125 100644 --- a/assets/html/themes/documenter-dark.css +++ b/assets/html/themes/documenter-dark.css @@ -7200,6 +7200,8 @@ html.theme--documenter-dark { content: "\f0c1"; } html.theme--documenter-dark h1:hover .docs-heading-anchor, html.theme--documenter-dark h2:hover .docs-heading-anchor, html.theme--documenter-dark h3:hover .docs-heading-anchor, html.theme--documenter-dark h4:hover .docs-heading-anchor, html.theme--documenter-dark h5:hover .docs-heading-anchor, html.theme--documenter-dark h6:hover .docs-heading-anchor { visibility: visible; } + html.theme--documenter-dark .docs-light-only { + display: none !important; } html.theme--documenter-dark .admonition { background-color: #282f2f; border-style: solid; diff --git a/assets/html/themes/documenter-light.css b/assets/html/themes/documenter-light.css index cfc2179db8..c51d518e6b 100644 --- a/assets/html/themes/documenter-light.css +++ b/assets/html/themes/documenter-light.css @@ -7108,6 +7108,9 @@ h1 .docs-heading-anchor, h2 .docs-heading-anchor, h3 .docs-heading-anchor, h4 .d h1:hover .docs-heading-anchor, h2:hover .docs-heading-anchor, h3:hover .docs-heading-anchor, h4:hover .docs-heading-anchor, h5:hover .docs-heading-anchor, h6:hover .docs-heading-anchor { visibility: visible; } +.docs-dark-only { + display: none !important; } + .admonition { background-color: #b5b5b5; border-style: solid; diff --git a/docs/src/assets/logo-dark.svg b/docs/src/assets/logo-dark.svg new file mode 100644 index 0000000000..071c7b8f34 --- /dev/null +++ b/docs/src/assets/logo-dark.svg @@ -0,0 +1,77 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/src/Writers/HTMLWriter.jl b/src/Writers/HTMLWriter.jl index abecdec192..86af966704 100644 --- a/src/Writers/HTMLWriter.jl +++ b/src/Writers/HTMLWriter.jl @@ -127,6 +127,8 @@ the subdirectories of `assets/` are not linked). For the **logo**, Documenter checks for the existence of `assets/logo.{svg,png,webp,gif,jpg,jpeg}`, in this order. The first one it finds gets displayed at the top of the navigation sidebar. +It will also check for `assets/logo-dark.{svg,png,webp,gif,jpg,jpeg}` and use that for dark +themes. Additional JS, ICO, and CSS assets can be included in the generated pages using the `assets` keyword for `makedocs`. `assets` must be a `Vector{String}` and will include @@ -185,7 +187,6 @@ other recursive functions. mutable struct HTMLContext doc :: Documents.Document settings :: HTML - logo :: String scripts :: Vector{String} documenter_js :: String themeswap_js :: String @@ -197,7 +198,7 @@ mutable struct HTMLContext footnotes :: Vector{Markdown.Footnote} end -HTMLContext(doc, settings=HTML()) = HTMLContext(doc, settings, "", [], "", "", "", [], "", Documents.NavNode("search", "Search", nothing), [], []) +HTMLContext(doc, settings=HTML()) = HTMLContext(doc, settings, [], "", "", "", [], "", Documents.NavNode("search", "Search", nothing), [], []) function SearchRecord(ctx::HTMLContext, navnode; loc="", title=nothing, category="page", text="") page_title = mdflatten(pagetitle(ctx, navnode)) @@ -254,14 +255,6 @@ function render(doc::Documents.Document, settings::HTML=HTML()) ctx = HTMLContext(doc, settings) ctx.search_index_js = "search_index.js" - for logoext in ["svg", "png", "webp", "gif", "jpg", "jpeg"] - logo = joinpath("assets", "logo.$(logoext)") - if isfile(joinpath(doc.user.build, logo)) - ctx.logo = logo - break - end - end - ctx.themeswap_js = copy_asset("themeswap.js", doc) ctx.documenter_js = copy_asset("documenter.js", doc) ctx.search_js = copy_asset("search.js", doc) @@ -529,16 +522,23 @@ function render_sidebar(ctx, navnode) src = get_url(ctx, navnode) navmenu = nav[".docs-sidebar"] - # Logo and title - if !isempty(ctx.logo) + # Logo + logo = find_image_asset(ctx, "logo") + logo_dark = find_image_asset(ctx, "logo-dark") + if logo !== nothing # the logo will point to the first page in the navigation menu href = navhref(ctx, first(ctx.doc.internal.navlist), navnode) alt = isempty(ctx.doc.user.sitename) ? "Logo" : "$(ctx.doc.user.sitename) logo" - src = relhref(src, ctx.logo) - push!(navmenu.nodes, - a[".docs-logo", :href => href](img[:src => src, :alt => alt]) - ) + logo_element = a[".docs-logo", :href => href] + if logo_dark === nothing + push!(logo_element.nodes, img[:src => relhref(src, logo), :alt => alt]) + else + push!(logo_element.nodes, img[".docs-light-only", :src => relhref(src, logo), :alt => alt]) + push!(logo_element.nodes, img[".docs-dark-only", :src => relhref(src, logo_dark), :alt => alt]) + end + push!(navmenu.nodes, logo_element) end + # Sitename push!(navmenu.nodes, div[".docs-package-name"]( span[".docs-autofit"](ctx.doc.user.sitename) )) @@ -578,6 +578,14 @@ function render_sidebar(ctx, navnode) navmenu end +function find_image_asset(ctx, name) + for ext in ["svg", "png", "webp", "gif", "jpg", "jpeg"] + filename = joinpath("assets", "$(name).$(ext)") + isfile(joinpath(ctx.doc.user.build, filename)) && return filename + end + return nothing +end + """ [`navitem`](@ref) returns the lists and list items of the navigation menu. It gets called recursively to construct the whole tree.