[BUG] Background Color Mismatch in Light Mode

[ibrahimcetin]

Describe the bug

• Hugo Version [ >=0.112.4 expected]: v0.122.0
• Theme Version [e.g. v4.0, master, or commit-id ]: master

Background color mismatch on single page in light mode with profile mode.

Steps to reproduce the behavior:

In light mode, you can easily see the background color mismatch when switching between the home and about tabs on my website.

Expected behavior:

All pages background color should be the same.

Repo/Source where this issue can be reproduced:

My website: https://ibrahimcetin.dev Source code: https://github.com/ibrahimcetin/ibrahimcetin.dev

Screenshots

I think the difference is clear, about page has a lighter background color.

Additional context

I'm using profile mode on my website, but the about page has a background color mismatch in light mode. I noticed that the about page, being a single page, doesn't have the class="list" attribute on its body tag. When I manually add the class, everything seems okay.

Proper Solution I a bit dived into the theme's source code and fixed the issue by modifying this line.

To resolve the issue, I introduced a new layout named single in about.md to distinguish it from other layouts. Additionally, I added (eq .Layout `single`)) to the mentioned line. This simple addition seems to have fixed the problem. However, since I'm not familiar with the theme's internals, I am not sure this is the solution. If it is, I can create a pull request.

[LucyLikesYourFace]

When I manually add the class, everything seems okay.

Out of curiosity I tested this against the demo site, doing this makes the background the same colour as buttons etc. Perhaps its intentional?

[h-subaru]

Hi, I noticed the problem in the page of @ibrahimcetin , and reproduced the same background-collision, as @LucyLikesYourFace mentions.

The solution of @ibrahimcetin shows some fallback background-color settings （ either of body or of html ） for the single kind pages be inconsistent with list pages ...?

[h-subaru]

I tried some modification like this:

1. body background same as .list

   to set consistent background-color.

   assets/css/extended/blank.css

   /*
   This is just a placeholder blank stylesheet so as to support adding custom styles budled with theme's default styles
   
   ......
   */
   body {
       background: var(--code-bg);
   }
   
   body.dark {
       background: var(--theme);
   }

2. add .post-entry class to the container of contents, the same class with the list items.

   to keep the color contrast in the single page content and footer

   layouts/_default/single.html

   • L. 38: appends .post-entry class attribute
   • L. 45: appends .post-entry class attribute

     <!-- <div class="post-content"> -->
     <div class="post-content post-entry">

     <!-- <footer class="post-footer"> -->
     <footer class="post-footer post-entry">

[h-subaru]

Result （ /posts/hello/ single page）

in Light mode

in Dark mode

[adityatelange]

All pages background color should be the same.

This is intended, not a bug.