minor / styling

src/assets/styles/global.css

@@ -243,3 +243,10 @@ Custom
   overscroll-behavior: contain;
 }
 
+.d-dark > * {
+  background-color: rgba(35, 35, 35, 0.9) !important;
+  color: #ffffff;
+}
+.d-light > * {
+  background-color: rgba(255, 255, 255, 0.9) !important;
+}

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}

src/hooks/usePrimeReactThemeSwitcher.jsx

@@ -10,8 +10,10 @@ export function usePrimeReactThemeSwitcher(theme) {
         ? "/themes/bootstrap4-dark-blue/theme.css"
         : "/themes/bootstrap4-light-blue/theme.css";
 
-    if (themeLink.href !== newTheme) {
-      themeLink.href = newTheme;
+    const newHref = window.location.origin + newTheme;
+
+    if (themeLink.href !== newHref) {
+      themeLink.href = newHref;
     }
   }, [theme]);
 }