From dc89b43401c7509f72f733521138269691cac2fd Mon Sep 17 00:00:00 2001
From: andrewgryan <andrew.ryan@metoffice.gov.uk>
Date: Wed, 31 Jul 2024 10:26:31 +0100
Subject: [PATCH 1/2] add a nice animation to the docs colors

---
 docs/static/style.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/docs/static/style.css b/docs/static/style.css
index e5b2cf7..c3fe1aa 100644
--- a/docs/static/style.css
+++ b/docs/static/style.css
@@ -38,6 +38,18 @@ th {
   font-style: normal;
 }
 
+@keyframes gentleColors {
+  0% {
+    background-position: 100% 50%;
+  }
+  50% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
 h1 {
   --angle: 160deg;
   --color-1: hsl(var(--angle) 70% 50%);
@@ -61,10 +73,15 @@ h1 {
     var(--color-2) 75%,
     var(--color-3) 75%
   );
+  background-size: 200% 100%;
   background-clip: text;
   -webkit-background-clip: text;
+
+  animation: 30s gentleColors ease infinite;
 }
 
+
+
 pre {
   padding-inline: 0.75rem;
   padding-block: 0.5rem;

From ba02b77d461ee0d44f49c1e0784c4dc01cb09cd8 Mon Sep 17 00:00:00 2001
From: andrewgryan <andrew.ryan@metoffice.gov.uk>
Date: Wed, 31 Jul 2024 13:56:21 +0100
Subject: [PATCH 2/2] dark mode

---
 docs/static/style.css | 63 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 56 insertions(+), 7 deletions(-)

diff --git a/docs/static/style.css b/docs/static/style.css
index c3fe1aa..27cff6f 100644
--- a/docs/static/style.css
+++ b/docs/static/style.css
@@ -2,9 +2,55 @@
 @import url("https://fonts.googleapis.com/css2?family=Saira+Stencil+One&display=swap");
 
 :root {
+  --accent: hsl(160deg 70% 50%);
   --font-family: "Saira Stencil One", system-ui;
 }
 
+:root {
+  --surface-table: var(--gray-2);
+  --surface-table-head: var(--gray-9);
+  --text-table-head: var(--gray-1);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --text: var(--gray-9);
+    --surface: white;
+    --text-negative: var(--surface);
+    --surface-negative: var(--text);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: white;
+    --surface: var(--gray-9);
+    --text-negative: var(--surface);
+    --surface-negative: var(--text);
+    --surface-table: var(--gray-9);
+    --surface-table-head: var(--gray-9);
+    --text-table-head: var(--accent);
+  }
+
+  .leaflet-tile-pane {
+    filter: grayscale();
+  }
+
+  pre {
+    color: var(--text) !important;
+    background-color: var(--surface) !important;
+    font-size: 1rem;
+  }
+
+  code {
+    filter: brightness(1.5);
+  }
+
+  a {
+    color: var(--accent);
+  }
+}
+
 l-map {
   display: block;
   block-size: 40ch;
@@ -27,6 +73,8 @@ body {
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr auto;
   row-gap: 1ch;
+  color: var(--text);
+  background-color: var(--surface);
 }
 
 h1,
@@ -97,7 +145,7 @@ main {
 
 nav {
   z-index: 2;
-  background-color: white;
+  background-color: var(--surface);
   position: sticky;
   top: 0;
   display: flex;
@@ -112,35 +160,36 @@ nav {
     display: flex;
     align-items: center;
     gap: var(--size-1);
-    color: var(--gray-9);
+    color: var(--text);
   }
 }
 
 footer {
   margin-block-start: auto;
   min-height: 15ch;
-  background-color: var(--gray-9);
+  background-color: var(--surface-negative);
   padding: var(--size-3);
 
   & .logo {
-    color: white;
+    color: var(--text-negative);
     font-size: var(--font-size-0);
     text-transform: uppercase;
     font-family: var(--font-family);
   }
 }
 
+
 table {
   inline-size: 100%;
-  background-color: var(--gray-2);
+  background-color: var(--surface-table);
   border-radius: var(--size-1);
   border-collapse: collapse;
   overflow: hidden;
 }
 
 th {
-  background-color: var(--gray-9);
-  color: var(--gray-1);
+  background-color: var(--surface-table-head);
+  color: var(--text-table-head);
 }
 
 td,