minor / styling

src/components/AppLayout.jsx

@@ -5,6 +5,7 @@ import { Player } from './AudioPlayer.jsx';
 import Memes from './Memes.jsx';
 import { JoyUIRootIsland } from './Components.jsx';
 import { PrimeReactProvider } from "primereact/api";
+import { usePrimeReactThemeSwitcher } from '@/hooks/usePrimeReactThemeSwitcher.jsx';
 import CustomToastContainer from '../components/ToastProvider.jsx';
 import LyricSearch from './LyricSearch.jsx';
 import 'primereact/resources/themes/bootstrap4-light-blue/theme.css';
@@ -14,6 +15,7 @@ export default function Root({child}) {
   window.toast = toast;
   window.API_URL = API_URL;
   const theme = document.documentElement.getAttribute("data-theme")
+  usePrimeReactThemeSwitcher(theme);
   // console.log(opts.children);
   return (
     <PrimeReactProvider>

src/components/Memes.jsx

@@ -15,7 +15,7 @@ const Memes = () => {
   const [hasMore, setHasMore] = useState(true);
   const [selectedImage, setSelectedImage] = useState(null);
   const observerRef = useRef();
-
+  const theme = document.documentElement.getAttribute("data-theme")
   const loadImages = async (pageNum, attempt = 0) => {
     if (loading || !hasMore) return;
     setLoading(true);
@@ -108,6 +108,7 @@ const Memes = () => {
         visible={!!selectedImage}
         onHide={() => setSelectedImage(null)}
         style={{ width: '90vw', maxWidth: '720px' }}
+        className={`d-${theme}`}
         modal
         closable
         dismissableMask={true}