Support robust theme sync with resolvedTheme and parent check loop
This commit is contained in:
@@ -397,19 +397,34 @@
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
setInterval(() => {
|
||||
let isLight = false;
|
||||
try {
|
||||
isLight = window.parent.document.documentElement.classList.contains('light') ||
|
||||
window.parent.document.documentElement.getAttribute('data-theme') === 'light';
|
||||
} catch (e) {
|
||||
const p = new URLSearchParams(window.location.search);
|
||||
if (p.get('theme') === 'light') {
|
||||
isLight = p.get('theme') === 'light';
|
||||
}
|
||||
|
||||
if (isLight) {
|
||||
document.body.style.setProperty('background', '#ffffff', 'important');
|
||||
document.documentElement.style.setProperty('background', '#ffffff', 'important');
|
||||
const b = document.querySelector('.badge');
|
||||
if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_light_background.svg') center/cover no-repeat", 'important');
|
||||
// Override trailing color repeatedly so particles look okay in light mode
|
||||
setInterval(() => {
|
||||
if (typeof fadeCol !== 'undefined') {
|
||||
fadeCol = 'rgba(255,255,255,0.22)';
|
||||
}
|
||||
}, 50);
|
||||
} else {
|
||||
document.body.style.setProperty('background', '#000000', 'important');
|
||||
document.documentElement.style.setProperty('background', '#000000', 'important');
|
||||
const b = document.querySelector('.badge');
|
||||
if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_dark_background.svg') center/cover no-repeat", 'important');
|
||||
if (typeof fadeCol !== 'undefined') {
|
||||
fadeCol = 'rgba(0,0,0,0.22)';
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -84,19 +84,34 @@ def port_html():
|
||||
light_theme_script = """
|
||||
<script>
|
||||
(function(){
|
||||
setInterval(() => {
|
||||
let isLight = false;
|
||||
try {
|
||||
isLight = window.parent.document.documentElement.classList.contains('light') ||
|
||||
window.parent.document.documentElement.getAttribute('data-theme') === 'light';
|
||||
} catch (e) {
|
||||
const p = new URLSearchParams(window.location.search);
|
||||
if (p.get('theme') === 'light') {
|
||||
isLight = p.get('theme') === 'light';
|
||||
}
|
||||
|
||||
if (isLight) {
|
||||
document.body.style.setProperty('background', '#ffffff', 'important');
|
||||
document.documentElement.style.setProperty('background', '#ffffff', 'important');
|
||||
const b = document.querySelector('.badge');
|
||||
if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_light_background.svg') center/cover no-repeat", 'important');
|
||||
// Override trailing color repeatedly so particles look okay in light mode
|
||||
setInterval(() => {
|
||||
if (typeof fadeCol !== 'undefined') {
|
||||
fadeCol = 'rgba(255,255,255,0.22)';
|
||||
}
|
||||
}, 50);
|
||||
} else {
|
||||
document.body.style.setProperty('background', '#000000', 'important');
|
||||
document.documentElement.style.setProperty('background', '#000000', 'important');
|
||||
const b = document.querySelector('.badge');
|
||||
if (b) b.style.setProperty('background', "url('/PragatiVeer_Logo/SVG_Logos/Square_dark_background.svg') center/cover no-repeat", 'important');
|
||||
if (typeof fadeCol !== 'undefined') {
|
||||
fadeCol = 'rgba(0,0,0,0.22)';
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
})();
|
||||
</script>
|
||||
"""
|
||||
|
||||
@@ -8,7 +8,7 @@ import { useTheme } from "next-themes";
|
||||
|
||||
export function StreakOnboardingModal() {
|
||||
const { user, loading } = useActiveUser();
|
||||
const { theme } = useTheme();
|
||||
const { resolvedTheme } = useTheme();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -68,7 +68,7 @@ export function StreakOnboardingModal() {
|
||||
{/* Top Celebration Animation Panel (Iframe with height 60%, matching bg) */}
|
||||
<div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-background">
|
||||
<iframe
|
||||
src={`/streak-animation.html?streak=${streak}&theme=${theme === 'light' ? 'light' : 'dark'}`}
|
||||
src={`/streak-animation.html?streak=${streak}&theme=${resolvedTheme === 'light' ? 'light' : 'dark'}`}
|
||||
className="w-full h-full border-none"
|
||||
title="Streak Celebration"
|
||||
allowtransparency="true"
|
||||
|
||||
Reference in New Issue
Block a user