From d4ebbe9a59981dd76d3da46dbb3df9e7f22754a9 Mon Sep 17 00:00:00 2001 From: oleibman <10341515+oleibman@users.noreply.github.com> Date: Mon, 31 Aug 2026 22:50:46 -0700 Subject: [PATCH] Logo Displayed Poorly in Dark Mode --- docs/extra/darkmode.css | 5 +- docs/extra/extra.css | 3 + docs/extra/nodarktoggle.css | 2 + docs/index.md | 2 +- mkdocs.readthedocs.yml | 1 + mkdocs.yml | 1 + properdocs.yml | 1 + zensical.classic.toml | 129 ++++++++++++++++++++++++++++++++++++ 8 files changed, 139 insertions(+), 5 deletions(-) create mode 100644 docs/extra/nodarktoggle.css create mode 100644 zensical.classic.toml diff --git a/docs/extra/darkmode.css b/docs/extra/darkmode.css index d553f7bec..802fdd35c 100644 --- a/docs/extra/darkmode.css +++ b/docs/extra/darkmode.css @@ -10,13 +10,10 @@ Retrieved 2026-08-24, License - CC BY-SA 4.0 } /* double apply invert filter to cancel out effect on images */ - img { + img:not([alt="Logo"]) { filter: invert(100%); } /* Dark mode (slate scheme) alternating rows */ table tr:nth-child(2n) {background-color: #c0c0c0;} } - -.wehavedarktoggle {display: none;} -.wedonthavedarktoggle {display: block;} diff --git a/docs/extra/extra.css b/docs/extra/extra.css index 4355fd5ad..511babf9f 100644 --- a/docs/extra/extra.css +++ b/docs/extra/extra.css @@ -20,3 +20,6 @@ table.features-cross-reference { .wehavedarktoggle {display: block;} .wedonthavedarktoggle {display: none;} + +[data-bs-theme="dark"] img[alt="Logo"] {filter: invert(100%)} +[data-md-color-scheme="slate"] img[alt="Logo"] {filter: invert(100%)} diff --git a/docs/extra/nodarktoggle.css b/docs/extra/nodarktoggle.css new file mode 100644 index 000000000..cf410b05a --- /dev/null +++ b/docs/extra/nodarktoggle.css @@ -0,0 +1,2 @@ +.wehavedarktoggle {display: none;} +.wedonthavedarktoggle {display: block;} diff --git a/docs/index.md b/docs/index.md index 293ee2624..13124fb59 100644 --- a/docs/index.md +++ b/docs/index.md @@ -186,7 +186,7 @@ If your setting is light mode, you can make a bookmarklet of the following and u (function(){ document.documentElement.style.filter = document.documentElement.style.filter ? '' : 'invert(100%) hue-rotate(180deg)'; const images = document.querySelectorAll('img'); - images.forEach(img => { img.style.filter = 'invert(100%) hue-rotate(180deg)';}); + images.forEach(img => { if (img.alt != 'Logo') img.style.filter = 'invert(100%) hue-rotate(180deg)';}); })(); ``` diff --git a/mkdocs.readthedocs.yml b/mkdocs.readthedocs.yml index 559a7de81..eed518641 100644 --- a/mkdocs.readthedocs.yml +++ b/mkdocs.readthedocs.yml @@ -9,6 +9,7 @@ theme: extra_css: - extra/extra.css - extra/copyclipboard.css + - extra/nodarktoggle.css - extra/darkmode.css extra_javascript: - extra/extrajs.js diff --git a/mkdocs.yml b/mkdocs.yml index 559a7de81..eed518641 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -9,6 +9,7 @@ theme: extra_css: - extra/extra.css - extra/copyclipboard.css + - extra/nodarktoggle.css - extra/darkmode.css extra_javascript: - extra/extrajs.js diff --git a/properdocs.yml b/properdocs.yml index e0a07e2c2..b2b5059fc 100644 --- a/properdocs.yml +++ b/properdocs.yml @@ -9,6 +9,7 @@ theme: extra_css: - extra/extra.css - extra/copyclipboard.css + - extra/nodarktoggle.css - extra/darkmode.css extra_javascript: - extra/extrajs.js diff --git a/zensical.classic.toml b/zensical.classic.toml new file mode 100644 index 000000000..7d142b408 --- /dev/null +++ b/zensical.classic.toml @@ -0,0 +1,129 @@ +[project] +site_url = "https://github.com/PHPOffice/phpspreadsheet" +site_name = "PhpSpreadsheet Documentation" +# site_description = "Your project description" +# site_author = "Your name" + +# copyright = "Copyright © 2026 Your name" + +repo_url = "https://github.com/PHPOffice/phpspreadsheet" +# repo_name = "user/repo" +# edit_uri = "edit/main/docs/" + +#nav = [ +# { "Get started" = "index.md" }, +# { "Markdown in 5min" = "markdown.md" }, +#] + +extra_css = [ + "extra/extra.css", + "extra/tablestripes.css", + # use either emacs or (both default.light, lightbulb.dark) + #"extra/pygments.emacs.css", + "extra/pygments.default.light.css", + "extra/pygments.lightbulb.dark.css", +] +extra_javascript = ["extra/extrajs.js"] + +[project.theme] +variant = "classic" +# custom_dir = "overrides" +# favicon = "images/favicon.png" +language = "en" +features = [ + "announce.dismiss", + # "content.action.edit", + # "content.action.view", + "content.code.annotate", + "content.code.copy", + # "content.code.select", # I'm not sure what this button does + "content.footnote.tooltips", + "content.tabs.link", + "content.tooltips", + # "header.autohide", + # "navigation.expand", + "navigation.footer", + "navigation.indexes", + "navigation.instant", + "navigation.instant.prefetch", + # "navigation.instant.progress", + "navigation.path", + # "navigation.prune", + "navigation.sections", + # "navigation.tabs", + # "navigation.tabs.sticky", + "navigation.top", + "navigation.tracking", + "search.highlight", + # "toc.follow", + # "toc.integrate", +] + +# logo = "assets/logo.png" + +# [project.theme.icon] +# logo = "lucide/smile" + +# [project.theme.font] +# text = "Inter" +# code = "Jetbrains Mono" + +#[[project.theme.palette]] +#media = "(prefers-color-scheme)" +#toggle.icon = "lucide/sun-moon" +#toggle.name = "Switch to light mode" + +[[project.theme.palette]] +media = "(prefers-color-scheme: light)" +scheme = "default" +toggle.icon = "lucide/sun" +toggle.name = "Switch to dark mode" + +[[project.theme.palette]] +media = "(prefers-color-scheme: dark)" +scheme = "slate" +toggle.icon = "lucide/moon" +#toggle.name = "Switch to system preference" +toggle.name = "Switch to light mode" + +# [[project.extra.social]] +# icon = "fontawesome/brands/github" +# link = "https://github.com/user/repo" + +# [[project.extra.social]] +# icon = "fontawesome/brands/mastodon" +# link = "https://fosstodon.org/@user" + +[project.markdown_extensions] +abbr = {} +admonition = {} +attr_list = {} +def_list = {} +footnotes = {} +md_in_html = {} +toc.permalink = true +pymdownx.arithmatex.generic = true +pymdownx.betterem = {} +pymdownx.caret = {} +pymdownx.details = {} +pymdownx.emoji.emoji_generator = "zensical.extensions.emoji.to_svg" +pymdownx.emoji.emoji_index = "zensical.extensions.emoji.twemoji" +pymdownx.highlight.anchor_linenums = true +pymdownx.highlight.line_spans = "__span" +pymdownx.highlight.pygments_lang_class = true +pymdownx.inlinehilite = {} +pymdownx.keys = {} +pymdownx.magiclink = {} +pymdownx.mark = {} +pymdownx.smartsymbols = {} +# pymdownx.snippets.base_path = "includes" +pymdownx.superfences.custom_fences = [ + { name = "mermaid", class = "mermaid", format = "pymdownx.superfences.fence_code_format" }, +] +pymdownx.tabbed.alternate_style = true +pymdownx.tabbed.combine_header_slug = true +pymdownx.tasklist.custom_checkbox = true +pymdownx.tilde = {} +pymdownx.highlight.extend_pygments_lang = [ + { name = "php", lang = "php", options = {startinline = true } } +]