From fb2eef24d6c34dd91114286ca33c6eb1a3b3cf73 Mon Sep 17 00:00:00 2001
From: Sam Storment <sjstorment22@gmail.com>
Date: Mon, 3 Jun 2024 14:15:35 -0500
Subject: [PATCH] Handle themeing when javascript is disabled. Hide the theme
 select and fallback to dark media query instead of data-theme attribute

---
 .../resources/static/search/serp.scss          | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/code/services-application/search-service/resources/static/search/serp.scss b/code/services-application/search-service/resources/static/search/serp.scss
index fe5f231c..a6e3ef24 100644
--- a/code/services-application/search-service/resources/static/search/serp.scss
+++ b/code/services-application/search-service/resources/static/search/serp.scss
@@ -28,9 +28,8 @@
   --font-family-heading: serif; // $heading-fonts
 }
 
- 
-:root[data-theme='dark'] {
 
+@mixin dark-theme-mixin {
   color-scheme: dark;
 
   --clr-bg-page: hsl(0, 0%, 6%);
@@ -55,7 +54,17 @@
   --clr-link-visited: #ffadff;
   --clr-heading-link-visited: var(--clr-link-visited);
 }
+ 
+:root[data-theme='dark'] {
+  @include dark-theme-mixin;
+}
 
+// Makes theme match the user's OS preference when JS is disabled
+@media (prefers-color-scheme: dark) {
+  :root:not(:has([data-has-js="true"])) {
+    @include dark-theme-mixin;
+  }
+}
 
 * {
   box-sizing: border-box;
@@ -234,6 +243,11 @@ header {
 #theme {
   margin-left: auto;
   margin-right: .5ch;
+  display: none;
+
+  [data-has-js='true'] & {
+    display: block;
+  }
 }
 
 #complaint {