From e4e02dcc6c46bc1fab0523b93885d923991afc05 Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Fri, 16 Feb 2024 14:24:13 +1300
Subject: [PATCH] use prefers-contrast media query to automatically enable high
 contrast mode

---
 app/static/styles.css  | 99 ++++++++++++++++++++++++++++++++++++++++++
 app/static/styles.scss | 89 +++++++++++++++++++++++++++++++++++++
 2 files changed, 188 insertions(+)

diff --git a/app/static/styles.css b/app/static/styles.css
index c3b2d8b5..dacf2833 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -693,4 +693,103 @@ div.navbar {
   }
 }
 
+@media (prefers-contrast: more) {
+  :root {
+    --bs-link-color: black;
+    --bs-link-color-rgb: black;
+    --bs-link-hover-color-rgb: #333;
+  }
+
+  [data-bs-theme=dark] {
+    --bs-body-bg: black;
+    --bs-link-color: white;
+    --bs-link-color-rgb: white;
+    --bs-link-hover-color-rgb: #eee;
+    --bs-heading-color: white;
+    --bs-body-color: white;
+    --bs-body-color-rgb: white;
+  }
+
+  .btn-primary {
+    --bs-btn-bg: black;
+    --bs-btn-border-color: black;
+    --bs-btn-hover-bg: #333;
+  }
+
+  [data-bs-theme=dark] .btn-primary {
+    --bs-btn-bg: white;
+    --bs-btn-border-color: white;
+    --bs-btn-hover-bg: white;
+    --bs-btn-color: black;
+  }
+
+  [data-bs-theme=dark] .btn-primary:hover {
+    --bs-btn-hover-color: black;
+  }
+
+  .btn-outline-secondary {
+    --bs-btn-color: black;
+  }
+
+  [data-bs-theme=dark] .btn-outline-secondary {
+    --bs-btn-color: white;
+  }
+
+  .post_list .post_teaser {
+    border-bottom: solid 1px black;
+  }
+
+  [data-bs-theme=dark] .post_list .post_teaser {
+    border-bottom: solid 1px white;
+  }
+
+  .domain_link, .domain_link a {
+    color: black;
+  }
+
+  [data-bs-theme=dark] .domain_link, [data-bs-theme=dark] .domain_link a {
+    color: ghostwhite;
+  }
+
+  .main_pane, .voting_buttons div {
+    border: solid 1px #333;
+  }
+
+  [data-bs-theme=dark] .main_pane, [data-bs-theme=dark] .voting_buttons div {
+    border: solid 1px #eee;
+  }
+
+  div.navbar {
+    border-bottom: solid 1px #333;
+  }
+
+  [data-bs-theme=dark] div.navbar {
+    border-bottom: solid 1px #fff;
+  }
+
+  .nav-link {
+    color: black;
+  }
+
+  [data-bs-theme=dark] .nav-link {
+    color: white;
+  }
+
+  .card {
+    --bs-card-border-color: #333;
+  }
+
+  [data-bs-theme=dark] .card {
+    --bs-card-border-color: #fff;
+  }
+
+  .coolfieldset.collapsed legend, .coolfieldset legend, .coolfieldset.expanded legend {
+    background-color: white;
+  }
+
+  [data-bs-theme=dark] .coolfieldset.collapsed legend, [data-bs-theme=dark] .coolfieldset legend, [data-bs-theme=dark] .coolfieldset.expanded legend {
+    background-color: black;
+  }
+}
+
 /*# sourceMappingURL=styles.css.map */
diff --git a/app/static/styles.scss b/app/static/styles.scss
index bfceebf9..5b1e0c03 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -318,3 +318,92 @@ div.navbar {
     font-size: 1.6rem;
   }
 }
+
+@media (prefers-contrast: more) {
+  :root {
+    --bs-link-color: black;
+    --bs-link-color-rgb: black;
+    --bs-link-hover-color-rgb: #333;
+  }
+
+  [data-bs-theme="dark"] {
+      --bs-body-bg: black;
+      --bs-link-color: white;
+      --bs-link-color-rgb: white;
+      --bs-link-hover-color-rgb: #eee;
+      --bs-heading-color: white;
+      --bs-body-color: white;
+      --bs-body-color-rgb: white;
+  }
+
+  .btn-primary {
+      --bs-btn-bg: black;
+      --bs-btn-border-color: black;
+      --bs-btn-hover-bg: #333;
+  }
+  [data-bs-theme="dark"] .btn-primary {
+      --bs-btn-bg: white;
+      --bs-btn-border-color: white;
+      --bs-btn-hover-bg: white;
+      --bs-btn-color: black;
+  }
+  [data-bs-theme="dark"] .btn-primary:hover {
+      --bs-btn-hover-color: black;
+  }
+
+  .btn-outline-secondary {
+      --bs-btn-color: black;
+  }
+  [data-bs-theme="dark"] .btn-outline-secondary {
+      --bs-btn-color: white;
+  }
+
+  .post_list .post_teaser {
+      border-bottom: solid 1px black;
+  }
+  [data-bs-theme="dark"] .post_list .post_teaser {
+      border-bottom: solid 1px white;
+  }
+
+  .domain_link, .domain_link a {
+      color: black;
+  }
+  [data-bs-theme="dark"] .domain_link, [data-bs-theme="dark"] .domain_link a {
+      color: ghostwhite;
+  }
+
+  .main_pane, .voting_buttons div {
+      border: solid 1px #333;
+  }
+  [data-bs-theme="dark"] .main_pane, [data-bs-theme="dark"] .voting_buttons div {
+      border: solid 1px #eee;
+  }
+
+  div.navbar {
+      border-bottom: solid 1px #333;
+  }
+  [data-bs-theme="dark"] div.navbar {
+      border-bottom: solid 1px #fff;
+  }
+
+  .nav-link {
+      color: black;
+  }
+  [data-bs-theme="dark"] .nav-link {
+      color: white;
+  }
+
+  .card {
+      --bs-card-border-color: #333;
+  }
+  [data-bs-theme="dark"] .card {
+      --bs-card-border-color: #fff;
+  }
+
+  .coolfieldset.collapsed legend, .coolfieldset legend, .coolfieldset.expanded legend {
+      background-color: white;
+  }
+  [data-bs-theme="dark"] .coolfieldset.collapsed legend, [data-bs-theme="dark"] .coolfieldset legend, [data-bs-theme="dark"] .coolfieldset.expanded legend {
+      background-color: black;
+  }
+}
\ No newline at end of file