From dc66a1056bb532932116819eb4aef05c915c6483 Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Wed, 13 Dec 2023 08:14:20 -0800
Subject: [PATCH 1/2] Use the special dark mode dialog background color
 calculation

---
 .../ScrollIndicatedDialogContent.js           | 61 +++++++++++++------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/components/ScrollIndicatedDialogContent.js b/src/components/ScrollIndicatedDialogContent.js
index 5e9770bc42..01e10ca255 100644
--- a/src/components/ScrollIndicatedDialogContent.js
+++ b/src/components/ScrollIndicatedDialogContent.js
@@ -1,26 +1,49 @@
 import PropTypes from 'prop-types';
 import DialogContent from '@mui/material/DialogContent';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 
-const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ theme }) => ({
-  /* Shadow covers */
-  background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), `
-    + `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, `
-    // Shaddows
-    + 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
-    + 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,',
-  /* Shadow covers */
-  background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys
-    + `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, `
-    // Shaddows
-    + 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
-    + 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;',
+/**
+ * From https://github.com/mui/material-ui/blob/v5.15.0/packages/mui-material/src/styles/getOverlayAlpha.ts
+ */
+const getOverlayAlpha = (elevation) => {
+  let alphaValue;
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+  return (alphaValue / 100).toFixed(2);
+};
+
+const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ ownerState, theme }) => {
+  // In dark mode, paper has a elevation-dependent background color:
+  // https://github.com/mui/material-ui/blob/v5.15.0/packages/mui-material/src/Paper/Paper.js#L55-L60
+  const bgcolor = theme.palette.mode === 'dark' ? {
+    backgroundImage: `linear-gradient(${alpha(
+      '#fff',
+      getOverlayAlpha(ownerState?.elevation || 24),
+    )}, ${alpha('#fff', getOverlayAlpha(ownerState?.elevation || 24))})`,
+  } : theme.palette.background.paper;
+  return {
+    /* Shadow covers */
+    background: `linear-gradient(${bgcolor} 30%, rgba(255, 255, 255, 0)), `
+      + `linear-gradient(rgba(255, 255, 255, 0), ${bgcolor} 70%) 0 100%, `
+      // Shaddows
+      + 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
+      + 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,',
+    /* Shadow covers */
+    background: `linear-gradient(${bgcolor} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys
+      + `linear-gradient(rgba(255, 255, 255, 0), ${bgcolor} 70%) 0 100%, `
+      // Shaddows
+      + 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
+      + 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;',
 
-  backgroundAttachment: 'local, local, scroll, scroll',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
-  overflowY: 'auto',
-}));
+    backgroundAttachment: 'local, local, scroll, scroll',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
+    overflowY: 'auto',
+  };
+});
 
 /**
  * ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component

From a9e082e2a8ed2736d0e778c0e2df64f0acae237f Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Wed, 13 Dec 2023 08:20:06 -0800
Subject: [PATCH 2/2] Reset the collection collapsible section background color
 for collection metadata

---
 src/components/CollectionDialog.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js
index 4fd15b564c..75fa641f14 100644
--- a/src/components/CollectionDialog.js
+++ b/src/components/CollectionDialog.js
@@ -25,6 +25,9 @@ const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)(
 }));
 
 const StyledCollectionMetadata = styled('div')(() => ({
+  '& .MuiPaper-root': {
+    background: 'transparent',
+  },
   padding: (theme) => theme.spacing(2),
 }));