From 70ccc5bc4f9609faa436ffa9d794e11536f31b4b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 21 Jun 2024 11:22:06 +0800
Subject: [PATCH] Make the display settings respect theme

---
 packages/web/components/elements/ModalPrimitives.tsx   | 1 +
 packages/web/components/elements/TickedRangeSlider.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index 465a97c9c..2b8a8deeb 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -35,6 +35,7 @@ const Modal = styled(Content, {
 export const ModalContent = styled(Modal, {
   top: '50%',
   left: '50%',
+  bg: '$readerBg',
   transform: 'translate(-50%, -50%)',
   width: '90vw',
   maxWidth: '450px',
diff --git a/packages/web/components/elements/TickedRangeSlider.tsx b/packages/web/components/elements/TickedRangeSlider.tsx
index da7696569..b4119e1ce 100644
--- a/packages/web/components/elements/TickedRangeSlider.tsx
+++ b/packages/web/components/elements/TickedRangeSlider.tsx
@@ -22,14 +22,14 @@ const StyledSlider = styled(Slider, {
     height: '8px',
     width: '225px',
     borderRadius: '10px',
-    backgroundColor: '#F2F2F2',
+    backgroundColor: '$thTextSubtle2',
   },
   '.SliderThumb': {
     display: 'block',
-    width: '20px',
-    height: '20px',
+    width: '15px',
+    height: '15px',
     borderRadius: '50%',
-    border: '4px solid white',
+    border: '2px solid $thTextSubtle2',
     backgroundColor: '#FFD234',
     boxShadow: '0px 0px 20px rgba(19, 56, 77, 0.2)',
   },