background rays and changed the theme color to purple

This commit is contained in:
Anirban Kar 2024-12-08 02:11:47 +05:30
parent 8067bb63af
commit 15bd5b24f3

View File

@ -1,32 +1,6 @@
// PurpleRays.jsx
import React, { useEffect, useState } from 'react';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
const BackgroundRays = () => { const BackgroundRays = () => {
const [theme, setTheme] = useState('dark');
useEffect(() => {
// Initial theme
const currentTheme = document.documentElement.getAttribute('data-theme');
setTheme(currentTheme || 'dark');
// Optional: Watch for theme changes
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'data-theme') {
const newTheme = document.documentElement.getAttribute('data-theme');
setTheme((existingTheme) => newTheme || existingTheme);
}
});
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme'],
});
return () => observer.disconnect();
}, []);
return ( return (
<div className={`${styles.rayContainer} `}> <div className={`${styles.rayContainer} `}>
<div className={`${styles.lightRay} ${styles.ray1}`}></div> <div className={`${styles.lightRay} ${styles.ray1}`}></div>