Remove theme toast on refresh, fix banana theme colors, add fun facts

[Copilot]

Eliminates annoying toast notifications on page load while preserving them for user-initiated theme changes. Also corrects banana theme accent colors from blue to yellow/golden and expands fact databases.

Changes

Theme Toast Suppression

Added showNotification parameter to setTheme() to control toast display:

function setTheme(themeKey, save = true, showNotification = true) {
    // ...
    if (showNotification) {
        showToast(`${theme.icon} ${theme.name} activated!`);
    }
    // ...
}

// Initialization suppresses toast
if (savedTheme === 'dark') {
    setTheme('dark', false, false);
} else {
    setTheme(Math.random() < 0.5 ? 'banana' : 'default', false, false);
}

Banana Theme Color Correction

• Accent: #4FC3F7 (blue) → #F9A825 (golden yellow)
• Hover: #29B6F6 → #F57F17
• Gradients: #E1F5FE, #B3E5FC → #FFEE58, #FFD54F
• Blob: rgba(3, 169, 244, 0.4) → rgba(255, 193, 7, 0.4)

Fun Facts Expansion

• CAT_FACT_DB: 31 → 38 (+7)
• BEAR_FACT_DB: 30 → 38 (+8)
• DOG_FACT_DB: 31 → 37 (+6)

Screenshots

Before: Toast appears on every page load
After: Clean load, toast only on manual theme switch

Theme change: Toast appears when typing "night"

Banana theme: Now uses yellow/golden accents instead of blue

Original prompt

Summary

Make three improvements to the website:

1. Remove Theme Toast on Page Refresh

Currently, when the website loads/refreshes, it shows a toast notification saying "Default theme loaded" or "Banana theme loaded". This should be removed - the toast should only appear when the user actively changes the theme.

Current behavior (lines 832-846 in index.html):

const savedTheme = localStorage.getItem('wal-theme');

if (savedTheme === 'dark') {
    setTheme('dark', false);
} else {
    if (Math.random() < 0.5) {
        setTheme('banana', false);
    } else {
        setTheme('default', false);
    }
}

The setTheme function always calls showToast(), even on initial load.

Fix: Add a third parameter showNotification = true to the setTheme function:

function setTheme(themeKey, save = true, showNotification = true) {
    // ... existing code ...
    
    if (showNotification) {
        showToast(`${theme.icon} ${theme.name} activated!`);
    }
    
    // ... rest of code ...
}

Then update the initialization calls to pass false for the notification parameter:

if (savedTheme === 'dark') {
    setTheme('dark', false, false);
} else {
    if (Math.random() < 0.5) {
        setTheme('banana', false, false);
    } else {
        setTheme('default', false, false);
    }
}

2. Fix Banana Theme Colors - Use Yellow Instead of Blue

The banana theme currently uses light blue (#4FC3F7) as the accent color. Since it's a banana theme, the accent should be yellow/golden.

Current banana theme CSS (lines 103-125):

body.theme-banana {
    --color-bg-primary: #FFF9C4;
    --color-accent: #4FC3F7;    /* Light Blue - WRONG */
    --color-accent-hover: #29B6F6;
    --color-social: #4FC3F7;
    --gradient-3: #E1F5FE;      /* Blue tint */
    --gradient-4: #B3E5FC;      /* Blue tint */
    --blob-2-color: rgba(3, 169, 244, 0.4);  /* Blue */
}

Fix - Change to yellow/golden tones:

body.theme-banana {
    --color-bg-primary: #FFF9C4;
    --color-accent: #F9A825;     /* Golden Yellow */
    --color-accent-hover: #F57F17;
    --color-social: #F9A825;     /* Golden Yellow */
    --gradient-3: #FFEE58;       /* Yellow */
    --gradient-4: #FFD54F;       /* Amber/Golden */
    --blob-2-color: rgba(255, 193, 7, 0.4);  /* Amber */
}

3. Add New Fun Facts

Add more fun facts to each of the three fact databases (CAT_FACT_DB, BEAR_FACT_DB, DOG_FACT_DB).

Add these new cat facts to CAT_FACT_DB:

• "Cats can't climb down trees head-first because their claws curve the wrong way."
• "A cat named Stubbs was mayor of Talkeetna, Alaska for 20 years."
• "Cats have a third eyelid called a 'haw' to protect their eyes."
• "The oldest known pet cat was found in a 9,500-year-old grave in Cyprus."
• "Cats can move their ears 180 degrees."
• "A cat's heart beats nearly twice as fast as a human heart."
• "Cats can't see directly below their noses."
• "The technical term for a hairball is a 'bezoar'."

Add these new bear facts to BEAR_FACT_DB:

• "Grizzly bears can remember the faces of other bears for years."
• "Polar bear fur is actually transparent, not white."
• "A bear's sense of smell is 7 times better than a bloodhound's."
• "Pandas spend about 12 hours a day eating bamboo."
• "Black bears aren't always black - they can be brown, cinnamon, or even white."
• "Bears can see in color and have excellent night vision."
• "A sloth bear can close its nostrils to keep out insects."
• "Koalas are not actually bears - they're marsupials!"

Add these new dog facts to DOG_FACT_DB:

• "Dogs can understand up to 250 words and gestures."
• "A dog's nose has as many as 300 million receptors compared to about 6 million in humans."
• "Greyhounds can reach speeds of up to 45 miles per hour."
• "Dogs have a 'smell memory' that can recall scents for years."
• "Puppies are born deaf and don't hear until they're about 21 days old."
• "A dog's unique nose print can be used to identify them, like a fingerprint."
• "Labradors have been the most popular dog breed in the US for over 30 years."
• "Dogs' ears have at least 18 muscles, allowing for a wide range of movement."

Files to Modify

• index.html - All changes are in this single file

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.