Change pure black mode paper background color to true black

CHANGELOG.md

@@ -9,6 +9,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ### Added
 - (**Theme**) Add an option to save the dynamic color theme on the manga page as a custom theme
 
+### Changed
+- (**Theme**) Change "pure black mode" paper background color to true black
+
 ### Changed
 - (**Theme**) Improve automatic theme background colors
 - (**Theme**) Adjust "primary color" of dynamic color theme on manga pages

src/features/theme/components/ThemePreview.tsx

@@ -18,6 +18,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import EditIcon from '@mui/icons-material/Edit';
 import { AwaitableComponent } from 'awaitable-component';
+import Paper from '@mui/material/Paper';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { useAppThemeContext } from '@/features/theme/AppThemeContext.tsx';
 import { AppTheme } from '@/features/theme/services/AppThemes.ts';
@@ -150,7 +151,7 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
                                                 size="small"
                                                 sx={{ mt: -0.5 }}
                                             >
-                                                <CustomTooltip title={t('global.button.delete')}>
+                                                <CustomTooltip title={t('global.button.delete')} placement="auto">
                                                     <DeleteIcon />
                                                 </CustomTooltip>
                                             </IconButton>
@@ -169,18 +170,17 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
                                                 component="div"
                                                 size="small"
                                             >
-                                                <CustomTooltip title={t('global.button.edit')}>
+                                                <CustomTooltip title={t('global.button.edit')} placement="auto">
                                                     <EditIcon />
                                                 </CustomTooltip>
                                             </IconButton>
                                         )}
                                     </Stack>
                                 </Stack>
-                                <Box
+                                <Paper
                                     sx={{
                                         width: '55%',
                                         height: '65%',
-                                        backgroundColor: 'background.paper',
                                         p: 1,
                                         borderRadius: 1,
                                     }}
@@ -196,7 +196,7 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
                                         <ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
                                         <ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
                                     </Stack>
-                                </Box>
+                                </Paper>
                             </Stack>
                             <Stack
                                 sx={{

src/features/theme/services/ThemeCreator.ts

@@ -58,7 +58,7 @@ const getBackgroundColor = (
 ): (Partial<TypeBackground> & Partial<PaletteBackgroundChannel>) | undefined => {
     if (setPureBlackMode) {
         return {
-            paper: '#111',
+            paper: '#000',
             default: '#000',
         };
     }