High-contrast weather themes: dark sky, light clouds

Reworked all four weather palettes so the cloud body is much
lighter than the sky — the way real clouds look against blue.
Added boneLight and chalkLight to the getColors keys/map.

Also reduced applyWeatherTheme mix from 0.6 to 0.4 so the
day/night sun-position palette stays visible underneath
the weather tint instead of being washed out by it.

Weather:        sky     cloud   light   bg
  sunny:        blueLt  chalk   chalkLt blue     (was: blueLt stone)
  cloudy:       blue    boneLt  chalk   steel    (was: blue   mid)
  stormy:       steel   stone   bone    panel    (was: steel  panel)
  night:        void    icon    chalk   void     (was: void   raised)
This commit is contained in:
Richard Zink committed 2026-10-07 19:54:43 +02:00
1 parent 460b7cfd6c
commit 5ff67cd1b4
1 file changed
+26 -14
+26 -14
View File
@@ -590,7 +590,8 @@ if (useVanta && typeof VANTA !== 'undefined') {
'void', 'panel', 'raised', 'border', 'mid', 'ash', 'void', 'panel', 'raised', 'border', 'mid', 'ash',
'icon', 'stone', 'bone', 'chalk', 'icon', 'stone', 'bone', 'chalk',
'ember', 'gold', 'blood', 'rust', 'rot', 'moss', 'ember', 'gold', 'blood', 'rust', 'rot', 'moss',
'steel', 'steelLight', 'blue', 'blueLight', 'violet' 'steel', 'steelLight', 'blue', 'blueLight',
'boneLight', 'chalkLight', 'violet'
]; ];
var map = { var map = {
void: 'black', void: 'black',
@@ -609,6 +610,8 @@ if (useVanta && typeof VANTA !== 'undefined') {
steelLight: 'blue', steelLight: 'blue',
blue: 'blue', blue: 'blue',
blueLight: 'blue-light', blueLight: 'blue-light',
boneLight: 'bone-light',
chalkLight: 'chalk-light',
violet: 'purple' violet: 'purple'
}; };
var result = {}; var result = {};
@@ -631,7 +634,8 @@ if (useVanta && typeof VANTA !== 'undefined') {
'void', 'panel', 'raised', 'border', 'mid', 'ash', 'void', 'panel', 'raised', 'border', 'mid', 'ash',
'icon', 'stone', 'bone', 'chalk', 'icon', 'stone', 'bone', 'chalk',
'ember', 'gold', 'blood', 'rust', 'rot', 'moss', 'ember', 'gold', 'blood', 'rust', 'rot', 'moss',
'steel', 'steelLight', 'blue', 'blueLight', 'violet' 'steel', 'steelLight', 'blue', 'blueLight',
'boneLight', 'chalkLight', 'violet'
]; ];
var map = { var map = {
void: 'black', void: 'black',
@@ -650,6 +654,8 @@ if (useVanta && typeof VANTA !== 'undefined') {
steelLight: 'blue', steelLight: 'blue',
blue: 'blue', blue: 'blue',
blueLight: 'blue-light', blueLight: 'blue-light',
boneLight: 'bone-light',
chalkLight: 'chalk-light',
violet: 'purple' violet: 'purple'
}; };
var result = {}; var result = {};
@@ -1378,30 +1384,34 @@ if (moonTimes.set) {
window.weatherThemes = { window.weatherThemes = {
sunny: { sunny: {
// Bright blue sky, near-white clouds — high contrast
skyColor: hexToInt(ASH.blueLight), skyColor: hexToInt(ASH.blueLight),
cloudColor: hexToInt(ASH.stone), cloudColor: hexToInt(ASH.chalk),
lightColor: hexToInt(ASH.chalk), lightColor: hexToInt(ASH.chalkLight),
backgroundColor: hexToInt(ASH.bone), backgroundColor: hexToInt(ASH.blue),
speed: 1.0 speed: 1.0
}, },
cloudy: { cloudy: {
// Mid-grey sky, light clouds — moody but visible
skyColor: hexToInt(ASH.blue), skyColor: hexToInt(ASH.blue),
cloudColor: hexToInt(ASH.mid), cloudColor: hexToInt(ASH.boneLight),
lightColor: hexToInt(ASH.bone), lightColor: hexToInt(ASH.chalk),
backgroundColor: hexToInt(ASH.border), backgroundColor: hexToInt(ASH.steel),
speed: 1.2 speed: 1.2
}, },
stormy: { stormy: {
// Dark sky, medium clouds — heavy overcast
skyColor: hexToInt(ASH.steel), skyColor: hexToInt(ASH.steel),
cloudColor: hexToInt(ASH.panel), cloudColor: hexToInt(ASH.stone),
lightColor: hexToInt(ASH.stone), lightColor: hexToInt(ASH.bone),
backgroundColor: hexToInt(ASH.void), backgroundColor: hexToInt(ASH.panel),
speed: 2.5 speed: 2.5
}, },
night: { night: {
// Very dark sky, moon-lit clouds
skyColor: hexToInt(ASH.void), skyColor: hexToInt(ASH.void),
cloudColor: hexToInt(ASH.raised), cloudColor: hexToInt(ASH.icon),
lightColor: hexToInt(ASH.icon), lightColor: hexToInt(ASH.chalk),
backgroundColor: hexToInt(ASH.void), backgroundColor: hexToInt(ASH.void),
speed: 0.4 speed: 0.4
} }
@@ -1535,7 +1545,9 @@ window.weatherThemes = {
// making it look bright. // making it look bright.
var _sunPos = SunCalc.getPosition(new Date(), PASSAU_LAT, PASSAU_LON); var _sunPos = SunCalc.getPosition(new Date(), PASSAU_LAT, PASSAU_LON);
var nightFactor = Math.max(0, Math.min(1, -_sunPos.altitude / 0.4)); var nightFactor = Math.max(0, Math.min(1, -_sunPos.altitude / 0.4));
var mix = 0.6 * (1 - nightFactor * 0.7); // Daytime: 40% weather mix (was 60%) — keeps day/night
// palette visible underneath, weather only adds tint.
var mix = 0.4 * (1 - nightFactor * 0.7);
return { return {
sky: mixColor(c.sky, themeColors.skyColor, mix), sky: mixColor(c.sky, themeColors.skyColor, mix),