background rays and changed the theme color to purple
Browse files
app/components/ui/BackgroundRays/index.tsx
CHANGED
@@ -1,32 +1,6 @@
|
|
1 |
-
// PurpleRays.jsx
|
2 |
-
import React, { useEffect, useState } from 'react';
|
3 |
import styles from './styles.module.scss';
|
4 |
|
5 |
const BackgroundRays = () => {
|
6 |
-
const [theme, setTheme] = useState('dark');
|
7 |
-
|
8 |
-
useEffect(() => {
|
9 |
-
// Initial theme
|
10 |
-
const currentTheme = document.documentElement.getAttribute('data-theme');
|
11 |
-
setTheme(currentTheme || 'dark');
|
12 |
-
|
13 |
-
// Optional: Watch for theme changes
|
14 |
-
const observer = new MutationObserver((mutations) => {
|
15 |
-
mutations.forEach((mutation) => {
|
16 |
-
if (mutation.attributeName === 'data-theme') {
|
17 |
-
const newTheme = document.documentElement.getAttribute('data-theme');
|
18 |
-
setTheme((existingTheme) => newTheme || existingTheme);
|
19 |
-
}
|
20 |
-
});
|
21 |
-
});
|
22 |
-
|
23 |
-
observer.observe(document.documentElement, {
|
24 |
-
attributes: true,
|
25 |
-
attributeFilter: ['data-theme'],
|
26 |
-
});
|
27 |
-
|
28 |
-
return () => observer.disconnect();
|
29 |
-
}, []);
|
30 |
return (
|
31 |
<div className={`${styles.rayContainer} `}>
|
32 |
<div className={`${styles.lightRay} ${styles.ray1}`}></div>
|
|
|
|
|
|
|
1 |
import styles from './styles.module.scss';
|
2 |
|
3 |
const BackgroundRays = () => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
4 |
return (
|
5 |
<div className={`${styles.rayContainer} `}>
|
6 |
<div className={`${styles.lightRay} ${styles.ray1}`}></div>
|