Support robust theme sync with resolvedTheme and parent check loop

This commit is contained in:
2026-07-10 16:41:22 +05:30
parent 31ef5cf024
commit 0d6e0b83ac
3 changed files with 52 additions and 22 deletions

View File

@@ -397,19 +397,34 @@
<script>
(function(){
const p = new URLSearchParams(window.location.search);
if (p.get('theme') === 'light') {
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(() => {
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);
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');
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>

View File

@@ -84,19 +84,34 @@ def port_html():
light_theme_script = """
<script>
(function(){
const p = new URLSearchParams(window.location.search);
if (p.get('theme') === 'light') {
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(() => {
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);
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');
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>
"""

View File

@@ -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"