Set up optional color inversion for docs images

README.md

@@ -1,7 +1,4 @@
-<picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/QuantumKitHub/PEPSKit.jl/blob/master/docs/src/assets/logo-dark.svg">
-    <img alt="PEPSKit.jl logo" src="https://github.com/QuantumKitHub/PEPSKit.jl/blob/master/docs/src/assets/logo.svg" width="150">
-</picture>
+<img src="./docs/src/assets/logo_readme.svg" width="150">
 
 # PEPSKit.jl
 
@@ -20,7 +17,7 @@
 
 **Tools for working with projected entangled-pair states**
 
-It contracts, it optimizes, it may break.
+*It contracts, it optimizes, it evolves.*
 
 ## Installation
 

docs/make.jl

@@ -56,7 +56,7 @@ makedocs(;
     modules=[PEPSKit, MPSKitModels],
     sitename="PEPSKit.jl",
     format=Documenter.HTML(;
-        prettyurls=get(ENV, "CI", nothing) == "true", mathengine, size_threshold=1024000
+        prettyurls=true, mathengine, assets=["assets/custom.css"], size_threshold=1024000
     ),
     pages=[
         "Home" => "index.md",

docs/src/assets/custom.css

@@ -0,0 +1,42 @@
+/* set fixed non-trivial inversion and hue rotation */
+:root {
+    --inversionFraction: 100%;
+    --hueRotation: -180deg;
+}
+
+/* color-invert images */
+.color-invertible {
+    filter: invert(var(--inversionFraction)) hue-rotate(var(--hueRotation)) !important;
+    -ms-filter: invert(var(--inversionFraction)) !important;
+    -webkit-filter: invert(var(--inversionFraction)) hue-rotate(var(--hueRotation)) !important;
+}
+/* including the logo */
+.docs-logo {
+    filter: invert(var(--inversionFraction)) hue-rotate(var(--hueRotation)) !important;
+    -ms-filter: invert(var(--inversionFraction)) !important;
+    -webkit-filter: invert(var(--inversionFraction)) hue-rotate(var(--hueRotation)) !important;
+}
+
+
+/* but disable for the two light themes */
+.theme--documenter-light .color-invertible {
+    filter: invert(0%) hue-rotate(0deg) !important;
+    -ms-filter: invert(var(0%)) !important;
+    -webkit-filter: invert(var(0%)) hue-rotate(0deg) !important;
+}
+.theme--catppuccin-latte .color-invertible {
+    filter: invert(0%) hue-rotate(0deg) !important;
+    -ms-filter: invert(var(0%)) !important;
+    -webkit-filter: invert(var(0%)) hue-rotate(0deg) !important;
+}
+/* for the logo as well */
+.theme--documenter-light .docs-logo {
+    filter: invert(0%) hue-rotate(0deg) !important;
+    -ms-filter: invert(var(0%)) !important;
+    -webkit-filter: invert(var(0%)) hue-rotate(0deg) !important;
+}
+.theme--catppuccin-latte .docs-logo {
+    filter: invert(0%) hue-rotate(0deg) !important;
+    -ms-filter: invert(var(0%)) !important;
+    -webkit-filter: invert(var(0%)) hue-rotate(0deg) !important;
+}