Update firecrackers, sparks, and sad faces to adapt dynamically to light/dark themes
This commit is contained in:
@@ -61,11 +61,38 @@ def port_html():
|
||||
html = html.replace("Math.max(target,5)/5", "Math.max(target,3)/3")
|
||||
html = html.replace("(4 - target) / 3", "(3 - target) / 3")
|
||||
|
||||
# Replace blue canvas trailing colors
|
||||
html = html.replace("'rgba(8,18,38,0.22)'", "'rgba(0,0,0,0.22)'")
|
||||
html = html.replace("'rgba(10,16,23,0.3)'", "'rgba(0,0,0,0.3)'")
|
||||
html = html.replace("rgba(8,18,38,0.22)", "rgba(0,0,0,0.22)")
|
||||
html = html.replace("rgba(10,16,23,0.3)", "rgba(0,0,0,0.3)")
|
||||
# Inject theme initialization at start of script block
|
||||
init_theme_script = """<script>
|
||||
(function(){
|
||||
let isLight = false;
|
||||
try {
|
||||
isLight = !window.parent.document.documentElement.classList.contains('dark');
|
||||
} catch (e) {
|
||||
const p = new URLSearchParams(window.location.search);
|
||||
isLight = p.get('theme') === 'light';
|
||||
}
|
||||
window.isLightTheme = isLight;
|
||||
})();
|
||||
"""
|
||||
html = html.replace("<script>", init_theme_script, 1)
|
||||
|
||||
# Make firecracker spark/confetti arrays dynamic based on theme
|
||||
spark_replacement = "const SPARK=window.isLightTheme?['#e28a22','#c2410c','#b45309','#78350f','#ea580c','#3b82f6']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];"
|
||||
conf_replacement = "const CONF=window.isLightTheme?['#e28a22','#c2410c','#b45309','#ea580c','#ef4444','#3b82f6','#10b981']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];"
|
||||
html = re.sub(r"const SPARK\s*=\s*\[[^\]]*\];", spark_replacement, html)
|
||||
html = re.sub(r"const CONF\s*=\s*\[[^\]]*\];", conf_replacement, html)
|
||||
|
||||
# Make canvas particle trail fade colors dynamic
|
||||
html = html.replace("'rgba(8,18,38,0.22)'", "(window.isLightTheme ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.22)')")
|
||||
html = html.replace("'rgba(10,16,23,0.3)'", "(window.isLightTheme ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)')")
|
||||
html = html.replace("rgba(8,18,38,0.22)", "(window.isLightTheme ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.22)')")
|
||||
html = html.replace("rgba(10,16,23,0.3)", "(window.isLightTheme ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)')")
|
||||
|
||||
# Make sad face outline and eye colors dynamic
|
||||
html = html.replace("stroke='rgba(182,200,228,0.92)'", "stroke=(window.isLightTheme ? 'rgba(40,60,90,0.92)' : 'rgba(182,200,228,0.92)')")
|
||||
html = html.replace("ctx.fillStyle='rgba(150,175,210,0.13)'", "ctx.fillStyle=(window.isLightTheme ? 'rgba(40,60,90,0.15)' : 'rgba(150,175,210,0.13)')")
|
||||
html = html.replace("ctx.fillStyle='rgba(205,218,238,0.95)'", "ctx.fillStyle=(window.isLightTheme ? 'rgba(40,60,90,0.95)' : 'rgba(205,218,238,0.95)')")
|
||||
html = html.replace("ctx.fillStyle='rgba(150,205,244,0.92)'", "ctx.fillStyle=(window.isLightTheme ? 'rgba(30,144,255,0.92)' : 'rgba(150,205,244,0.92)')")
|
||||
|
||||
# Replace blue root CSS variables
|
||||
html = html.replace("#081226", "#000000")
|
||||
@@ -87,13 +114,14 @@ def port_html():
|
||||
setInterval(() => {
|
||||
let isLight = false;
|
||||
try {
|
||||
// In Tailwind next-themes class strategy, light mode is defined by the absence of the 'dark' class.
|
||||
isLight = !window.parent.document.documentElement.classList.contains('dark');
|
||||
} catch (e) {
|
||||
const p = new URLSearchParams(window.location.search);
|
||||
isLight = p.get('theme') === 'light';
|
||||
}
|
||||
|
||||
window.isLightTheme = isLight;
|
||||
|
||||
if (isLight) {
|
||||
document.body.style.setProperty('background', '#ffffff', 'important');
|
||||
document.documentElement.style.setProperty('background', '#ffffff', 'important');
|
||||
@@ -102,6 +130,10 @@ def port_html():
|
||||
if (typeof fadeCol !== 'undefined') {
|
||||
fadeCol = 'rgba(255,255,255,0.22)';
|
||||
}
|
||||
window.sadFaceStroke = 'rgba(40,60,90,0.92)';
|
||||
window.sadFaceFill = 'rgba(40,60,90,0.15)';
|
||||
window.sadFaceEyes = 'rgba(40,60,90,0.95)';
|
||||
window.sadFaceTears = 'rgba(30,144,255,0.92)';
|
||||
} else {
|
||||
document.body.style.setProperty('background', '#000000', 'important');
|
||||
document.documentElement.style.setProperty('background', '#000000', 'important');
|
||||
@@ -110,6 +142,10 @@ def port_html():
|
||||
if (typeof fadeCol !== 'undefined') {
|
||||
fadeCol = 'rgba(0,0,0,0.22)';
|
||||
}
|
||||
window.sadFaceStroke = 'rgba(182,200,228,0.92)';
|
||||
window.sadFaceFill = 'rgba(150,175,210,0.13)';
|
||||
window.sadFaceEyes = 'rgba(205,218,238,0.95)';
|
||||
window.sadFaceTears = 'rgba(150,205,244,0.92)';
|
||||
}
|
||||
}, 100);
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user