mirror of
https://github.com/stackblitz/bolt.new
synced 2025-02-06 04:48:04 +00:00
background rays and changed the theme color to purple
This commit is contained in:
parent
8067bb63af
commit
15bd5b24f3
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user