darkmode bgcolor

[HuberTRoy]

Checklist

• I am using LTS version of Node.js.
• I am using the latest v2 version of VuePress and VuePress official plugins.
• I am using the latest v2 version of vuepress-theme-hope and all plugins in this repo.
• I followed the docs and I double checked my configuration.
• I have searched FAQ and I did not find the answer.

Package name

vuepress-theme-hope

Which operating system are you using?

• macOS
• Windows
• Linux

Describe the bug

vuepress-theme-hope/packages/theme/templates/index.build.html

Line 15 in 4df6e34

--bg-color: #1d1e1f;

The template on prod hardcode the background.

The configuration background on palette.scss not working fully.

Additional context

No response

[Mister-Hope]

Have you ever test that? Normally, body is on html and sharing the same size, so the bgcolor will be applied correctly.

[Mister-Hope]

Try not waste others time

[HuberTRoy]

@Mister-Hope Sorry for waste your time.

Please see https://github.com/subquery/documentation, check out on 0f9042f4f5a1941df508814a09281e0aa2cd90bc.

Build and serve it.

The config is darkmode only and have configaration with

$bg-color: (
  light: #060f32,
  dark: #060f32,
);

I don't find relative changes on the new version change log. If it has been change.

[HuberTRoy]

The key I think is only compile palette.scss as :root and the hardcode is

      html[data-theme="dark"] {
        --bg-color: #1d1e1f;
      }

      html,
      body {
        background: var(--bg-color);
      }

The priority of html[data-theme="dark"] greater than :root, so var(--bg-color) is hardcode not custom.

[Mister-Hope]

Hi like I said above, the final color displayed should be body’s bgcolor

[Mister-Hope]

I am not sure, as you are already applying a patch.

Just take our theme docs as an example:

The body background color comes from css file:

While the color defined in template is already overrided:

Create a new template and try modifying $bg-color, everthing should work as expected.

I am curious why you need an !important

[Mister-Hope]

I converted this into a discussion, and willing to help you on this.

Have you checked your customization part?

[Mister-Hope]

Hi please try to upgrade to latest version first, as I actually not sure whether there are bugs in previous versions.

[Mister-Hope]

BTW, your customization on my theme looks nice, and it would be great if you can add send a pr to https://theme-hope.vuejs.press/demo/projects.html#docs-using-vuepress-theme-hope

[Mister-Hope]

Are you sure you install with frozenlock file

[HuberTRoy]

@Mister-Hope Yeah. I clone your commit & nvm install 20 & pnpm install & pnpm docs:build.

[Mister-Hope]

I reproduce it, will fix it in the next version very soon.

This is because you disable lightmode, and the issue only appears in prod.

Thanks for reporting this

[HuberTRoy]

@Mister-Hope yeah, enable lightmode also have this issue, switch to dark mode will see it.

[jamesbayly]

https://github.com/vuepress-theme-hope/vuepress-theme-hope/pull/3608/files

[Mister-Hope]

b3db538

[Mister-Hope]

BTW: The template style is actually used to avoid people seeing an opposite background color for the first few frames while loading

[HuberTRoy]

Got it. Thanks.

[HuberTRoy]

@Mister-Hope

Hi, there also have a problem.

The default style is

html[data-theme="dark"] {
    background: #1d1e1f;
}

When I browse in Mac, I can over scroll the page and the html's background will show.
Compiled style cannot override the default style.

html, body {
    background: var(--bg-color);
    transition: background var(--color-transition);
}

html < html[data-theme="dark"].

[Mister-Hope]

Thanks for reporting, 972f3a5 should fix this