Make the display settings respect theme

2024-06-21 11:22:06 +08:00
parent 07e78c9c60
commit 70ccc5bc4f
2 changed files with 5 additions and 4 deletions
--- 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',
--- 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)',
  },