From cc19045a442d2ca6cc8d53a037b83054e85c1284 Mon Sep 17 00:00:00 2001
From: Adrian Simmons <adrian@perlucida.co.uk>
Date: Fri, 5 Jul 2024 15:47:16 +0100
Subject: [PATCH] WIP moving colours to custom properties in colours.css

Signed-off-by: Adrian Simmons <adrian@perlucida.co.uk>
---
 ws/static/colours.css         | 13 +++++++++++++
 ws/static/home.html           |  2 ++
 ws/static/login.html          |  2 ++
 ws/static/new.html            |  2 ++
 ws/static/select-release.html |  2 ++
 ws/static/styles.css          | 14 +++-----------
 6 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 ws/static/colours.css

diff --git a/ws/static/colours.css b/ws/static/colours.css
new file mode 100644
index 0000000000000000000000000000000000000000..dfdb8edfaf7eb09b02db9a8cc82a8747b56b5d3e
--- /dev/null
+++ b/ws/static/colours.css
@@ -0,0 +1,13 @@
+
+:root {
+	--primary: hsl(224, 95%, 45%); /* Blue #0640e0 */
+	--page-background: hsl(0, 0%, 100%);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--primary: hsl(224, 100%, 67%);
+	    --page-background: hsl(0, 0%, 9%);
+	}
+
+}
\ No newline at end of file
diff --git a/ws/static/home.html b/ws/static/home.html
index a1eee202056bb15f206618893f8cae0acdd578b9..a192eadc76aee9d7343377f06ce66a9d8ac20ac8 100644
--- a/ws/static/home.html
+++ b/ws/static/home.html
@@ -14,6 +14,8 @@
         <link rel="stylesheet" href="/static/reset.css" />
 
         <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/colours.css" as="style" />
+        <link rel="stylesheet" href="/static/colours.css" />
         <link rel="preload" href="/static/styles.css" as="style" />
         <link rel="stylesheet" href="/static/styles.css" />
     </head>
diff --git a/ws/static/login.html b/ws/static/login.html
index 06d4a2ddaca6ae915067694f9959bbfd3cc8ad28..19930b8946440fc18c74e0a7260eb634c25da7fc 100644
--- a/ws/static/login.html
+++ b/ws/static/login.html
@@ -14,6 +14,8 @@
         <link rel="stylesheet" href="/static/reset.css" />
 
         <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/colours.css" as="style" />
+        <link rel="stylesheet" href="/static/colours.css" />
         <link rel="preload" href="/static/styles.css" as="style" />
         <link rel="stylesheet" href="/static/styles.css" />
     </head>
diff --git a/ws/static/new.html b/ws/static/new.html
index b92e0a93bf2bd69d7e45d78fca8caa143e35a35e..153f5d40758f2a39993c9caac77a8fb7ccdee80a 100644
--- a/ws/static/new.html
+++ b/ws/static/new.html
@@ -14,6 +14,8 @@
         <link rel="stylesheet" href="/static/reset.css" />
 
         <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/colours.css" as="style" />
+        <link rel="stylesheet" href="/static/colours.css" />
         <link rel="preload" href="/static/styles.css" as="style" />
         <link rel="stylesheet" href="/static/styles.css" />
     </head>
diff --git a/ws/static/select-release.html b/ws/static/select-release.html
index 85dd84e7363c2859abed4898a36a8849801e58d3..e2ad9d4c31fd2ee6503c9c081b407b2a6ce64805 100644
--- a/ws/static/select-release.html
+++ b/ws/static/select-release.html
@@ -14,6 +14,8 @@
         <link rel="stylesheet" href="/static/reset.css" />
 
         <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/colours.css" as="style" />
+        <link rel="stylesheet" href="/static/colours.css" />
         <link rel="preload" href="/static/styles.css" as="style" />
         <link rel="stylesheet" href="/static/styles.css" />
     </head>
diff --git a/ws/static/styles.css b/ws/static/styles.css
index dac4cedcf1aa97b2f919b1f10d2579b10f29b313..c31a26f49a8cc5342f0c2b0b4c5d342e1767b5be 100644
--- a/ws/static/styles.css
+++ b/ws/static/styles.css
@@ -39,17 +39,17 @@
 html {
     margin: auto auto;
     color: #2f2f2f;
-    background: white;
+    background: var(--page-background);
     font-family: 'Atkinson Hyperlegible', sans-serif;
     scroll-behavior: smooth;
 }
 
 a {
-    color: #0640e0;
+    color: var(--primary);
 }
 
 a:visited {
-    color: #0640e0;
+    color: var(--primary);
 }
 
 .two_column {
@@ -160,17 +160,9 @@ header nav a:last-of-type:visited {
 
 @media (prefers-color-scheme: dark) {
     html {
-        background: #171717;
         color: #ccc;
     }
 
-    a {
-        color: #5582ff;
-    }
-
-    a:visited {
-        color: #5582ff;
-    }
 
     .card {
         border: 2px solid #424242;