diff --git a/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts b/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts index 111633b5..215c7c02 100644 --- a/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts +++ b/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts @@ -1,15 +1,17 @@ import { useEffect, useState } from 'react'; import { BackgroundVariant } from 'reactflow'; - export function useBackgroundVars(themeName?: string) { const [variant, setVariant] = useState(BackgroundVariant.Dots); const [gap, setGap] = useState(16); const [size, setSize] = useState(1); - const [color, setColor] = useState('#81818b') + const [color, setColor] = useState('#81818b'); - useEffect(() => { - let themeEl = document.querySelector('.pathfinder-theme, .default-theme'); + useEffect(() => { + // match any element whose entire `class` attribute ends with "-theme" + let themeEl = document.querySelector('[class$="-theme"]'); + + // If none is found, fall back to the element if (!themeEl) { themeEl = document.documentElement; } @@ -18,6 +20,7 @@ export function useBackgroundVars(themeName?: string) { const rawVariant = style.getPropertyValue('--rf-bg-variant').replace(/['"]/g, '').trim().toLowerCase(); let finalVariant: BackgroundVariant = BackgroundVariant.Dots; + if (rawVariant === 'lines') { finalVariant = BackgroundVariant.Lines; } else if (rawVariant === 'cross') { @@ -35,8 +38,7 @@ export function useBackgroundVars(themeName?: string) { setGap(gapNum); setSize(sizeNum); setColor(cssColor); - - }, [themeName]); + }, [themeName]); return { variant, gap, size, color }; }