update docs

docs/components/Logo.jinja

@@ -3,5 +3,5 @@
 <a
   {{ attrs.render(class="Logo", href=base_url, title="Back home") }}>
   <img class="light" src="/static/img/jinjax-logo.svg" width="140" aria-hidden>
-  <img class="dark" src="/static/img/jinjax-logo-w.svg" width="140" aria-hidden>
+  <img class="dark" src="/static/img/jinjax-logo-dark.svg" width="140" aria-hidden>
 </a>

docs/components/ui/LinkedList/DemoHTML.jinja

@@ -13,7 +13,8 @@
   <button
     type="button"
     class="select-all"
-    onclick="document.getElementById('linkedlist-demo-list1').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
+    onclick="document.getElementById('linkedlist-demo-list1')
+      .dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
   >
     Select all &raquo;
   </button>
@@ -26,7 +27,8 @@
   <button
     type="button"
     class="remove-all"
-    onclick="document.getElementById('linkedlist-demo-list2').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
+    onclick="document.getElementById('linkedlist-demo-list2')
+      .dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
   >
     &laquo; Remove all
   </button>

docs/components/ui/LinkedList/LinkedList.css

@@ -26,6 +26,9 @@
     border-radius: 0.25rem;
     font-size: 0.85rem;
   }
+  &:is(.dark *) .ui-linkedlist {
+    background-color: rgb(30 30 30);
+  }
   .ui-linkedlist li {
     cursor: pointer;
     display: flex;
@@ -39,6 +42,9 @@
   .ui-linkedlist li:hover {
     background-color: rgb(243 244 246);
   }
+  &:is(.dark *) .ui-linkedlist li:hover  {
+    background-color: rgb(0 0 0);
+  }
   .ui-linkedlist input[type="checkbox"] {
     margin-right: 0.5rem;
   }
@@ -52,6 +58,9 @@
     font-size: 0.7rem;
     margin-bottom: -1px;
   }
+  &:is(.dark *) label {
+    background-color: rgb(23 23 23);
+  }
 
   button {
     margin-top: 0.5rem;
@@ -85,6 +94,15 @@
     outline-offset: 1px;
     outline-color: #3b82f6;
   }
+  &:is(.dark *) button {
+    background-color: rgb(23 23 23);
+  }
+  &:is(.dark *) button:hover {
+    background-color: rgb(30 30 30);
+  }
+  &:is(.dark *) button:focus {
+    background-color: rgb(23 23 23);
+  }
   @media (min-width: 640px) {
     button {
       padding: 0.25rem 0.5rem;

docs/static/docs.css

@@ -9,7 +9,8 @@
   height: 2.5rem;
   align-items: center;
   color: rgb(24 24 27);
-  opacity: 0.9;
+  opacity: 0.8;
+  background: transparent;
 
   &:hover {
     opacity: 1;
@@ -78,7 +79,9 @@
     text-indent: -999px;
     display: none;
   }
-
+  &:is(.dark *) h1 {
+    background-image: url("/static/img/jinjax-logo-dark.svg");
+  }
   & h2 {
     font-size: 2.2rem;
     font-weight: 600;