From 41d213855d61d4f0ff43bb02b62acd40b2204663 Mon Sep 17 00:00:00 2001
From: Seth Cottle <SethCottle@gmail.com>
Date: Sun, 16 Mar 2025 21:33:33 -0400
Subject: [PATCH] Auto Theme Fixes

Fixed an issue where the Sensitve Content Warning Module did not
automatically update to `dark` theme when `theme-auto` was applied.
---
 VERSION.md                |   8 ++-
 css/sensitive-content.css | 121 +++++++++++++++++++++++---------------
 2 files changed, 78 insertions(+), 51 deletions(-)

diff --git a/VERSION.md b/VERSION.md
index bbf055c..168da1d 100644
--- a/VERSION.md
+++ b/VERSION.md
@@ -1,11 +1,15 @@
 # LittleLink Extended Version History
 
-## Current Version: v3.1.0
+## Current Version: v3.1.1
+
+### v3.1.1 - 03/16/2025
+- Fixed an issue where the Sensitve Content Warning Module did not 
+automatically update to `dark` theme when `theme-auto` was applied.
 
 ### v3.1.0 - 03/16/2025
 - Added Babylist button
 - Fixed SimpleX Chat Alt
-- Added Sensitve Content Warning Modile
+- Added Sensitve Content Warning Module
   - Adds `JS` folder with `sensitive-content.js`
   - Adds a new `css` file for `sensitve-content.css`
   - Adds a new `generic-warning.svg`
diff --git a/css/sensitive-content.css b/css/sensitive-content.css
index 292228a..a636c44 100644
--- a/css/sensitive-content.css
+++ b/css/sensitive-content.css
@@ -1,63 +1,86 @@
 /* Optional "Sensitive Content" Slide-Down Panel
-   ----------------------------------------------
+   ------------------------------------------------
    By default, it's collapsed (max-height: 0) and 
    pushes content down in normal flow when open.
 */
 
-/* Sensitive Warning Button Styling */
+/* This defaults to a red button style, but you can use any 
+button styling from `brands.css` or `brands-extended`.css
+or create your own! */
 .button-sensitive {
-	--button-text:#ffffff;
-	--button-background:#D72638;
-	--button-border:1px solid #ffffff;
+  --button-text: #ffffff;
+  --button-background: #D72638;
+  --button-border: 1px solid #ffffff;
 }
 
-/* Container so everything is grouped nicely */
+/* 1) Container */
 .slide-container {
-    margin: 0; /* We let the .button margin handle spacing */
-  }
-  
-  /* The slide-down panel starts collapsed */
-  .sensitive-panel {
-    margin-top: -1rem;
-    margin-bottom: 1rem;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-    border: none;
-    border-radius: 0.5rem;
-  }
-  
-  /* When open, show border and expand */
-  .sensitive-panel.open {
-    max-height: 300px; 
-    border: 1px solid #ccc;
-    margin-bottom: 1rem;
-  }
-  
-  /* The panel's content area */
-  .sensitive-panel__content {
-    position: relative;
-    background-color: #fff;
-    color: #000;
-    padding: 1rem;
-    box-sizing: border-box;
-  }
-  
-  /* Basic spacing inside the panel */
-  .sensitive-panel__content p {
-    margin: 1rem 0;
-  }
-  
-  .sensitive-panel__content .button {
-    margin-top: 1rem;
-  }
-  
-  /* Dark theme support */
-  :root.theme-dark .sensitive-panel__content {
+  margin: 0;
+}
+
+/* 2) The slide-down panel starts collapsed */
+.sensitive-panel {
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  border: none;
+  border-radius: 0.5rem;
+}
+
+/* 3) When open, show border and expand */
+.sensitive-panel.open {
+  max-height: 300px;
+  border: 1px solid #ccc;
+  margin-bottom: 1rem;
+}
+
+/* 4) The panel's content area */
+.sensitive-panel__content {
+  position: relative;
+  background-color: #fff;
+  color: #000;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+/* Basic spacing inside the panel */
+.sensitive-panel__content p {
+  margin: 1rem 0;
+}
+.sensitive-panel__content .button {
+  margin-top: 1rem;
+}
+
+/* ------------------------------------
+   Dark theme support (forced .theme-dark)
+   ------------------------------------ */
+:root.theme-dark .sensitive-panel__content {
+  background-color: #121212;
+  color: #ffffff;
+}
+:root.theme-dark .sensitive-panel.open {
+  border-color: #444;
+}
+
+/* ------------------------------------
+   Auto theme support (.theme-auto):
+   Light by default, switch on system dark
+   ------------------------------------ */
+/* Light defaults if system is light */
+:root.theme-auto .sensitive-panel__content {
+  background-color: #fff;
+  color: #000;
+}
+
+/* Dark overrides if system is dark */
+@media (prefers-color-scheme: dark) {
+  :root.theme-auto .sensitive-panel__content {
     background-color: #121212;
     color: #ffffff;
   }
-  :root.theme-dark .sensitive-panel.open {
+  :root.theme-auto .sensitive-panel.open {
     border-color: #444;
   }
-  
\ No newline at end of file
+}
\ No newline at end of file