Fixes issues with dark mode and assembly line

* an upstream work around to make checkboxes and radio buttons dark * makes the radial markers work on the interview list page * makes terms and footer links light for correct contrast
SuffolkLITLab · Dec 5, 2023 · 5da76dd · 5da76dd
1 parent 6824b7c
commit 5da76dd
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 24 deletions.
diff --git a/docassemble/AssemblyLine/data/static/interview_list.css b/docassemble/AssemblyLine/data/static/interview_list.css
@@ -32,9 +32,15 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  background: #ddd;
+  --radial-background: #ddd;
+  background: var(--radial-background);
   margin: .2rem;
 }
+
+[data-bs-theme=dark] .radialProgressBar {
+  --radial-background: #212529;
+}
+
 .radialProgressBar .overlay {
   border-radius: 50%;
   width: 2.3rem;
@@ -45,57 +51,61 @@
   padding-top: 10%;
 }
 
+[data-bs-theme=dark] .radialProgressBar .overlay {
+  background: #212529;
+}
+
 .progress-0 {
-  background-image: -webkit-linear-gradient(left, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(left, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(90deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-10 {
-  background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(36deg, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(54deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-20 {
-  background-image: -webkit-linear-gradient(72deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(72deg, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(18deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-30 {
-  background-image: -webkit-linear-gradient(108deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(108deg, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(-18deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-40 {
-  background-image: -webkit-linear-gradient(144deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(-54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(144deg, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(-54deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-50 {
-  background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(-90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(right, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(-90deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-60 {
-  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(36deg, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(54deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(36deg, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(54deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-70 {
-  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(72deg, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(72deg, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-80 {
-  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(108deg, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-18deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(108deg, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-18deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-90 {
-  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(144deg, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-54deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(144deg, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-54deg, #028cd5 50%, var(--radial-background) 50%);
 }
 
 .progress-100 {
-  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(right, #028cd5 50%, #ddd 50%);
-  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-90deg, #028cd5 50%, #ddd 50%);
+  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(right, #028cd5 50%, var(--radial-background) 50%);
+  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-90deg, #028cd5 50%, var(--radial-background) 50%);
 }
diff --git a/docassemble/AssemblyLine/data/static/styles.css b/docassemble/AssemblyLine/data/static/styles.css
@@ -126,16 +126,44 @@ input[type=number] {
   min-width: 8em;
 }
 
-/* Make the footer links and da terms slightly darker for better contrast */
+/* Make the footer links and da terms slightly darker in light mode 
+  and lighter in dark mode for better contrast */
 footer a {
   color: #0264F7;
 }
+
+[data-bs-theme=dark] footer a {
+  color: #3988FF
+}
+
 .daterm {
   color: #3b842c;
   text-decoration: dashed;
   text-decoration-line: underline;
 }
 
+[data-bs-theme=dark] .daterm {
+  color: #4fa23e;
+}
+
 .daquestionbackbutton {
   --bs-btn-focus-shadow-rgb: 49,132,253;
 }
+
+/* An upstream fix for dark mode, with radio buttons and checkboxes. See https://github.com/jhpyle/docassemble/pull/718 */
+[data-bs-theme=dark] .btn-light.dalabelauty {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #212529;
+  --bs-btn-border-color: #212529;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #424649;
+  --bs-btn-hover-border-color: #373b3e;
+  --bs-btn-focus-shadow-rgb: 66, 70, 73;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #4d5154;
+  --bs-btn-active-border-color: #373b3e;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #212529;
+  --bs-btn-disabled-border-color: #212529;
+}