hugo-sid / hugo-blog-awesome

Fast, minimal blog with dark mode support.

Home Page:https://hba.sid.one

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Toggle light/dark doesn't work with web server

ColinMaudry opened this issue · comments

Describe the bug

I have checked #16 and my baseUrl is fine :)

The toggle works when I run the blog with hugo server.

It doesn't when I generate the static files with hugo and run the site with an HTTP server (nginx or http-server node module).

I could reproduce with the example site.

My website is deployed here: https://colin.cafe/#

The source code is here: https://github.com/ColinMaudry/colin.cafe

hugo version
hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended linux/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=snap:0.111.3

Steps to reproduce

cd colin.cafe
hugo
cd public
http-server

Expected behavior

When clicking on the sun icon the theme should switch to dark.

Device information (please complete the following information):

  • OS: Ubuntu 22.10
  • Browser
    • Firefox 111.0.1
    • Vivaldi 5.7.2921.65
commented

Hi Colin.

Thanks for providing all the details. Thanks for checking past issues prior to creating this one.

I am able to reproduce this issue. I am investigating it. It may take some to implement a fix.

What is the cause? I have diffed the temp dir created by hugo server and the public folder created by hugo, they're identical except the root html tag in index.html.

Thanks for working on it ☕

commented

Hi Colin. Thanks for supporting my work.

When I clone your repo locally, the problem vanishes (see the screen recording below).

But when I use, GitHub codespace to develop/test, the problem appears.

This is strange.

2023-03-30_23-22-36.mp4
commented

Where is https://colin.cafe/ hosted?

commented

Hi @ColinMaudry . It's a small mistake, but took a lot of time to identify 😄.

The problem is that [params] is missing in your config.toml.

This is your config.toml:

https://github.com/ColinMaudry/colin.cafe/blob/1bc8a7983040a3cc09c8ec2c0970135bb4daf429/config.toml#L16-L27

This is the config.toml from the theme's exampleSite:

[[menu.main]]
pageRef="about"
name = 'About'
url = '/about/'
weight = 30
[params]
sitename = "Awesome hugo blog"
defaultColor = "dark" # set default color mode: dark or light
description = "Minimal Hugo blog theme with light and dark mode support"

Please feel free to close this issue, if this solves your problem.

commented

On a side note, I learnt something new while working on this issue.

I was wondering why in the above comment, the lines referenced from the theme's config.toml are displayed in a nice code snippet where as lines referenced from your repo are not.

I navigated to GitHub docs, and learnt that:

This type of permanent link will render as a code snippet only in the repository it originated in. In other repositories, the permalink code snippet will render as a URL.

commented

I had the same issue. For me it was solved when I fixed the domain from:
baseURL = <final domain I planned to use>
to
baseURL = <the domain I am currently using for testing>

commented

Hi @ColinMaudry , did #17 (comment) fix the dark mode toggle issue?

It did, thanks!