add dark/light image to doc

docs/stylesheets/img-comparison-slider.css

@@ -0,0 +1,15 @@
+img-comparison-slider {
+  visibility: hidden;
+}
+
+img-comparison-slider [slot='second'] {
+  display: none;
+}
+
+img-comparison-slider.rendered {
+  visibility: inherit;
+}
+
+img-comparison-slider.rendered [slot='second'] {
+  display: unset;
+}

docs/theme-overrides/layouts/home.html

@@ -390,7 +390,20 @@
             <figcaption>Dark Mode</figcaption>
           </figure>
           <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
-            <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+                <!-- Left arrow (dark) -->
+                <path d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2"
+                      stroke="#1a1a1a"
+                      fill="#1a1a1a"
+                      stroke-width="1"
+                      vector-effect="non-scaling-stroke">
+                </path>
+                <!-- Right arrow (white) -->
+                <path d="M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2"
+                      stroke="#fff"
+                      fill="#fff"
+                      stroke-width="1"
+                      vector-effect="non-scaling-stroke">
+                </path>
           </svg>
         </img-comparison-slider>
       </div>

docs/theme-overrides/main.html

@@ -14,12 +14,4 @@
 <meta property="twitter:image" content="{{ page.meta.image }}" />
 <meta property="twitter:image:alt" content="{{ page.meta.image_alt }}" />
 {% endif %}
-<script
-        defer
-        src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"
-></script>
-<link
-        rel="stylesheet"
-        href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css"
-/>
 {% endblock %}

mkdocs.yml

@@ -6,8 +6,12 @@ repo_name: h44z/wg-portal
 repo_url: https://github.com/h44z/wg-portal
 copyright: Copyright © 2023-2025 WireGuard Portal Project
 
+extra_javascript:
+  - javascript/img-comparison-slider.js
+
 extra_css:
   - stylesheets/extra.css
+  - stylesheets/img-comparison-slider.css
 
 theme:
   name: material