-
-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathConditionalOcean.tsx
More file actions
40 lines (32 loc) · 1.06 KB
/
ConditionalOcean.tsx
File metadata and controls
40 lines (32 loc) · 1.06 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { useEffect, useState } from 'react';
import OceanWaves from './OceanWaves';
export default function ConditionalOcean() {
const [showOcean, setShowOcean] = useState(false);
useEffect(() => {
const checkTheme = () => {
const theme = document.documentElement.getAttribute('data-color-theme');
setShowOcean(theme === 'ocean');
};
// Check initial theme
checkTheme();
// Watch for theme changes
const observer = new MutationObserver(checkTheme);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-color-theme'],
});
// Also check localStorage changes
const handleStorageChange = () => {
checkTheme();
};
window.addEventListener('storage', handleStorageChange);
// Poll for changes (fallback)
const interval = setInterval(checkTheme, 100);
return () => {
observer.disconnect();
window.removeEventListener('storage', handleStorageChange);
clearInterval(interval);
};
}, []);
return showOcean ? <OceanWaves /> : null;
}