Set up optional color inversion for docs images (#305)

* Start

* One picture at a time

* Update some examples

* Small fix

Author: leburgel

README.md

@@ -1,4 +1,4 @@
-<img src="https://github.com/QuantumKitHub/MPSKit.jl/blob/master/docs/src/assets/logo.svg" width="150">
+<img src="./docs/src/assets/logo_readme.svg" width="150">
 
 # MPSKit.jl
 

docs/make.jl

@@ -41,9 +41,10 @@ mathengine = MathJax3(Dict(:loader => Dict("load" => ["[tex]/physics"]),
 makedocs(;
          sitename="MPSKit.jl",
          format=Documenter.HTML(;
-                                prettyurls=get(ENV, "CI", nothing) == "true",
+                                prettyurls=true,
                                 mathengine,
-                                size_threshold=1024000),
+                                assets=["assets/custom.css"],
+                                size_threshold=1024000,),
          pages=["Home" => "index.md",
                 "Manual" => ["man/intro.md",
                              "man/states.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;
+}

docs/src/assets/logo_readme.svg

@@ -85,7 +85,9 @@
     "through the use of the translation operator. This operator can be defined in MPO language\n",
     "either diagramatically as\n",
     "\n",
-    "![translation operator MPO](translation_mpo.png)\n",
+    "\n",
+    "<img src=\"translation_mpo.svg\" alt=\"translation operator\" class=\"color-invertible\" width=\"50%\"/>\n",
+    "\n",
     "\n",
     "or in the code as:"
    ],