[BUG] Search background flickers between light and back background when color primary color is used for navbar

TommyTran732 commented 3 months ago

Describe the bug

Search background flickers between light and back background when color primary color is used for navbar.

This is most visible if you disable dark theme.

To reproduce

Set

[navigation]
    color = 'primary'
    logo = 'img/logo.png'

[style]
    primary = '#7d2622'

Scroll up and down. See the background of the search box flickers.

Expected behavior

Search box sticks to the appropriate light or dark theme.

Screenshots

On my light themed website, it initially loads in with dark theme:

After I scroll down, it switches to light:

Host environment

Please complete the following information where applicable.

Hinode version: v0.2.5
Hugo version: vv0.131.0
Browser: Microsoft Edge 127.0.2651.98

TommyTran732 commented 3 months ago

I am running a dark system theme so that might be affecting it as well

markdumay commented 3 months ago

Does your navigation configuration include overlay=true by any chance? The overlay setting was added in Hinode v0.23.0.

TommyTran732 commented 3 months ago

No, it is default, so it should be false

markdumay commented 3 months ago

I suspect it has something to do with the code that was added for the overlay support. However, I cannot reproduce your issue. Could you share the exact steps (or a repository) how to reproduce this? Do you use npm, hugo, gethinode/hinode or gethinode/template, etc.

As a note, the provided information seems contradictory, for example, you specify search = false yet the screenshots do include a search box.

I am running a dark system theme so that might be affecting it as well

Is this set in the browser or somewhere else? I assume you use Windows given the use of Edge?

Lastly, does clearing the local cache (Empty cache and Hard Reload when using debugging tools in Chrome) do anything?

TommyTran732 commented 3 months ago

As a note, the provided information seems contradictory, for example, you specify search = false yet the screenshots do include a search box.

My bad, I disable it because of the flickering but forgot to remove it in there. I edited the original report to fix this.

Is this set in the browser or somewhere else? I assume you use Windows given the use of Edge?

It is an OS setting. And I am using macOS.

Lastly, does clearing the local cache (Empty cache and Hard Reload when using debugging tools in Chrome) do anything?

Nope, it does not.

TommyTran732 commented 3 months ago

However, I cannot reproduce your issue. Could you share the exact steps (or a repository) how to reproduce this? Do you use npm, hugo, gethinode/hinode or gethinode/template, etc.

I set it up in codespace.

Setting up the codespace:

sudo apt update
sudo apt full-upgrade -y
sudo apt install golang -y
wget https://github.com/gohugoio/hugo/releases/download/v0.131.0/hugo_extended_0.131.0_linux-amd64.deb
sudo apt install ./hugo_extended_0.131.0_linux-amd64.deb
rm /usr/local/hugo/bin/hugo
ln -s /usr/local/hugo/bin/hugo /usr/local/bin/hugo

Set up hinode:

hugo new site my-hinode-site && cd my-hinode-site
hugo mod init example.com/my-hinode-site
echo "[[module.imports]]" >> hugo.toml
echo "path = 'github.com/gethinode/hinode'" >> hugo.toml

Configure param.toml:

[main]
    enableDarkMode = false
    endorse = false
    modes = 'light'

[navigation]
    color = 'primary'
#    logo = 'img/logo.png'
#    search = false

[pages]
    [pages.default]
        metadata = 'original'

[sharing]
    enabled = false

[style]
    primary = '#7d2622'

Set your OS theme to dark theme.

Now, visit the site. See that the navbar initially loads in the dark theme, but if you scroll it correctly changes to white.

TommyTran732 commented 3 months ago

Okay, so after I re-enabled the light-dark theme toggle, I also noticed the theme toggle looking weird after a reload:

To reproduce, use this param.toml:

[main]
    endorse = false

[navigation]
    color = 'primary'
#    logo = 'img/logo.png'
#    search = false

[pages]
    [pages.default]
        metadata = 'original'

[sharing]
    enabled = false

[style]
    primary = '#7d2622'

Set the OS system theme to dark theme.
Visit the site, toggle the theme to light theme.
Open a new page. Observe how the search bar and light toggle looks like the screenshot.

markdumay commented 3 months ago

thanks - I'll look into it!

markdumay commented 3 months ago

Ok, I found the root cause of the issue. The navbar was setting the theme to dark when its color was set to either primary, secondary, success, danger, or black. However, the navbar's JavaScript reset this to 'null' whenever the function updateNavbar() was invoked.

I'll release a fix soon to remove the odd theme behavior. The navbar will no longer have a separate theme, unless in overlay mode. I'll also make sure the updateNavbar() will only update the navbar's theme when data-bs-overlay is initialized.

gethinode / hinode