From 22f06180aed871d215cde75fcaab3747151cd789 Mon Sep 17 00:00:00 2001
From: danda <dan-da@users.noreply.github.com>
Date: Wed, 15 May 2024 16:31:39 -0700
Subject: [PATCH] style: make text fit aqua color scheme

Uses a dark aqua for light theme and aqua for dark theme.
---
 templates/web/css/styles.css            | 41 +++++++++++++++++++++++++
 templates/web/html/components/head.html |  2 +-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/templates/web/css/styles.css b/templates/web/css/styles.css
index 8cedc95..2be874f 100644
--- a/templates/web/css/styles.css
+++ b/templates/web/css/styles.css
@@ -1,3 +1,44 @@
+/* override color for light color scheme (Default) */
+/* Can be forced with data-theme="light" */
+[data-theme=light],
+:root:not([data-theme=dark]) {
+    --pico-color: rgb(0, 115, 115);
+    --pico-h1-color: var(--pico-color);
+    --pico-h2-color: var(--pico-color);
+    --pico-h3-color: var(--pico-color);
+    --pico-h4-color: var(--pico-color);
+    --pico-h5-color: var(--pico-color);
+    --pico-h6-color: var(--pico-color);
+    --pico-accordion-open-summary-color: var(--pico-color);
+}
+
+/* override color for dark color scheme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
+@media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+    --pico-color: cyan;
+    --pico-h1-color: var(--pico-color);
+    --pico-h2-color: var(--pico-color);
+    --pico-h3-color: var(--pico-color);
+    --pico-h4-color: var(--pico-color);
+    --pico-h5-color: var(--pico-color);
+    --pico-h6-color: var(--pico-color);    }
+    --pico-accordion-open-summary-color: var(--pico-color);
+}
+
+/* override color for dark color scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme=dark] {
+    --pico-color: cyan;
+    --pico-h1-color: var(--pico-color);
+    --pico-h2-color: var(--pico-color);
+    --pico-h3-color: var(--pico-color);
+    --pico-h4-color: var(--pico-color);
+    --pico-h5-color: var(--pico-color);
+    --pico-h6-color: var(--pico-color);
+    --pico-accordion-open-summary-color: var(--pico-color);
+}
+
 div.indent {
     position: relative;
     left: 20px;
diff --git a/templates/web/html/components/head.html b/templates/web/html/components/head.html
index 5084bb5..8d028bf 100644
--- a/templates/web/html/components/head.html
+++ b/templates/web/html/components/head.html
@@ -1,4 +1,4 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="/css/styles.css" media="screen" />
     <link rel="stylesheet" type="text/css" href="/css/pico.min.css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="/css/styles.css" media="screen" />
     <link rel="icon" type="image/png" sizes="48x48" href="/image/neptune-favicon.png">