Toggle light/dark doesn't work with web server

[ColinMaudry]

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

[hugo-sid]

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.

[ColinMaudry]

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.

[ColinMaudry]

Thanks for working on it ☕

[hugo-sid]

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

[hugo-sid]

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

[hugo-sid]

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:

hugo-blog-awesome/exampleSite/config.toml

Lines 34 to 43 in ce9f89b

	[[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.

[hugo-sid]

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.

[eddygta17]

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>

[hugo-sid]

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

[ColinMaudry]

It did, thanks!