Logo Displayed Poorly in Dark Mode

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;}

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%)}

docs/extra/nodarktoggle.css

@@ -0,0 +1,2 @@
+.wehavedarktoggle {display: none;}
+.wedonthavedarktoggle {display: block;}

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)';});
 })();
 ```
 </div>

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

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

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

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 } }
+]