From 4145fbdd58e1896ff72ace958f1635fdcb403fb4 Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Wed, 7 Oct 2026 19:21:24 +0200 Subject: [PATCH] Fix night sky too bright after sunset Three fixes: 1. getColor() switched from 'sunPos.altitude > 0' to '> sunPalettes[0].alt' (-pi/2). The day palette interpolates through twilight to deep-below-horizon, so an hour after sunset (sunAlt ~ -15deg) we now stay on the day palette and get the intended dark 'panel' colour instead of switching to the moon palette immediately. 2. getNightColor() now actually applies MIN_NIGHT_BRIGHTNESS via shiftColor toward black (the old 'brightness' var was unused dead code). 3. applyWeatherTheme() cuts the weather tint by up to 70% at night, so a 'cloudy' theme no longer washes the night sky with the brighter weather sky colour. --- background-final.html | 32 ++++++++++++++++++++++++++------ background.html | 32 ++++++++++++++++++++++++++------ 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/background-final.html b/background-final.html index be3c50b..dbaac45 100644 --- a/background-final.html +++ b/background-final.html @@ -1572,8 +1572,6 @@ if (useVanta && typeof VANTA !== 'undefined') { function getNightColor(moonIllum) { // moonIllum.fraction: 0 (new moon) to 1 (full moon) - // Apply minimum brightness - var brightness = MIN_NIGHT_BRIGHTNESS + (1 - MIN_NIGHT_BRIGHTNESS) * moonIllum.fraction; // Interpolate between new and full moon palette based on fraction var s = moonIllum.fraction; var c = { @@ -1586,8 +1584,20 @@ if (useVanta && typeof VANTA !== 'undefined') { sunGlare: lerpColor(window.nightPaletteNew.sunGlare, window.nightPaletteFull.sunGlare, s), sunLight: lerpColor(window.nightPaletteNew.sunLight, window.nightPaletteFull.sunLight, s) }; - // Apply brightness factor (relative to mid) - return c; + // Pull the whole night palette down by 'darkness' (a value + // 0..1 toward pure black) so new-moon skies are visibly darker + // than day, and full-moon skies still have some colour. + var darkness = 1.0 - (MIN_NIGHT_BRIGHTNESS + (1 - MIN_NIGHT_BRIGHTNESS) * s); + return { + sky: shiftColor(c.sky, -Math.round(255 * darkness * 0.6)), + cloud: shiftColor(c.cloud, -Math.round(255 * darkness * 0.6)), + light: shiftColor(c.light, -Math.round(255 * darkness * 0.6)), + bg: shiftColor(c.bg, -Math.round(255 * darkness * 0.6)), + cloudShadow: c.cloudShadow, + sun: c.sun, + sunGlare: c.sunGlare, + sunLight: c.sunLight + }; } function getColor(t) { @@ -1596,7 +1606,11 @@ if (useVanta && typeof VANTA !== 'undefined') { var sunPos = SunCalc.getPosition(now, PASSAU_LAT, PASSAU_LON); var moonIllum = SunCalc.getMoonIllumination(now); - if (sunPos.altitude > 0) { + // The day palette covers sunAlt down to sunPalettes[0].alt + // (-pi/2, deep below horizon). Only below that do we hand off + // to the moon-based night palette. This makes twilight a + // smooth transition through the day palette entries. + if (sunPos.altitude > window.sunPalettes[0].alt) { return getDayColor(sunPos.altitude); } else { return getNightColor(moonIllum); @@ -2269,7 +2283,13 @@ window.weatherThemes = { var themeColors = getEffectiveThemeColors(); if (!themeColors) return c; - var mix = 0.6; + // At night, weather only tints slightly - we don't want a + // 'cloudy' sky colour washing over deep night sky and + // making it look bright. + var _sunPos = SunCalc.getPosition(new Date(), PASSAU_LAT, PASSAU_LON); + var nightFactor = Math.max(0, Math.min(1, -_sunPos.altitude / 0.4)); + var mix = 0.6 * (1 - nightFactor * 0.7); + return { sky: mixColor(c.sky, themeColors.skyColor, mix), cloud: mixColor(c.cloud, themeColors.cloudColor, mix), diff --git a/background.html b/background.html index ce4f43a..26769b8 100644 --- a/background.html +++ b/background.html @@ -719,8 +719,6 @@ if (useVanta && typeof VANTA !== 'undefined') { function getNightColor(moonIllum) { // moonIllum.fraction: 0 (new moon) to 1 (full moon) - // Apply minimum brightness - var brightness = MIN_NIGHT_BRIGHTNESS + (1 - MIN_NIGHT_BRIGHTNESS) * moonIllum.fraction; // Interpolate between new and full moon palette based on fraction var s = moonIllum.fraction; var c = { @@ -733,8 +731,20 @@ if (useVanta && typeof VANTA !== 'undefined') { sunGlare: lerpColor(window.nightPaletteNew.sunGlare, window.nightPaletteFull.sunGlare, s), sunLight: lerpColor(window.nightPaletteNew.sunLight, window.nightPaletteFull.sunLight, s) }; - // Apply brightness factor (relative to mid) - return c; + // Pull the whole night palette down by 'darkness' (a value + // 0..1 toward pure black) so new-moon skies are visibly darker + // than day, and full-moon skies still have some colour. + var darkness = 1.0 - (MIN_NIGHT_BRIGHTNESS + (1 - MIN_NIGHT_BRIGHTNESS) * s); + return { + sky: shiftColor(c.sky, -Math.round(255 * darkness * 0.6)), + cloud: shiftColor(c.cloud, -Math.round(255 * darkness * 0.6)), + light: shiftColor(c.light, -Math.round(255 * darkness * 0.6)), + bg: shiftColor(c.bg, -Math.round(255 * darkness * 0.6)), + cloudShadow: c.cloudShadow, + sun: c.sun, + sunGlare: c.sunGlare, + sunLight: c.sunLight + }; } function getColor(t) { @@ -743,7 +753,11 @@ if (useVanta && typeof VANTA !== 'undefined') { var sunPos = SunCalc.getPosition(now, PASSAU_LAT, PASSAU_LON); var moonIllum = SunCalc.getMoonIllumination(now); - if (sunPos.altitude > 0) { + // The day palette covers sunAlt down to sunPalettes[0].alt + // (-pi/2, deep below horizon). Only below that do we hand off + // to the moon-based night palette. This makes twilight a + // smooth transition through the day palette entries. + if (sunPos.altitude > window.sunPalettes[0].alt) { return getDayColor(sunPos.altitude); } else { return getNightColor(moonIllum); @@ -1416,7 +1430,13 @@ window.weatherThemes = { var themeColors = getEffectiveThemeColors(); if (!themeColors) return c; - var mix = 0.6; + // At night, weather only tints slightly - we don't want a + // 'cloudy' sky colour washing over deep night sky and + // making it look bright. + var _sunPos = SunCalc.getPosition(new Date(), PASSAU_LAT, PASSAU_LON); + var nightFactor = Math.max(0, Math.min(1, -_sunPos.altitude / 0.4)); + var mix = 0.6 * (1 - nightFactor * 0.7); + return { sky: mixColor(c.sky, themeColors.skyColor, mix), cloud: mixColor(c.cloud, themeColors.cloudColor, mix),