yoyurec/logseq-awesome-styler

Background of dark mode isn’t blurred

Gitbreast opened this issue · 3 comments

Info:

  • OS: MacOS
  • Logseq ver: 0.8.18
  • Plugin ver: 3.7.1
  • ⚠ Do i have issue with DISABLED my custom.css?
  • ⚠ Do i have the same on default theme?

Description:
Background of dark mode isn’t blurred.

To Reproduce:
Enable “Use banned image as blurred background”.
Bg in Light mode is blurred, but in dark mode is not blurred.

Expected behavior:
The bg is blurred.

Screenshots
If applicable, add screenshots to help explain your problem.

Same on linux
logseq version : 09.18-alpha+nightly.20230921
plugin : 3.7.1

image

Same for me

OS: Manjaro Linux
logseq version: 0.10.9
plugin: 3.7.1

I managed to hack my way through fixing blurred background in dark mode.

The problem

The problem seems to come from src/modules/extPlugins.

html[data-theme='dark'] .is-banner-active[data-awst-banners-as-bg]::before {
    filter: blur(20px) brightness(0.7);
}

/* banner element */
html[data-theme='dark'] body:is([data-page='page'], [data-page='home']).is-banner-active::before {
    filter: brightness(0.8);
}

The first rule adds the blur to the background image in darkmode.

But it seems that the second one triggers on the same element thus overwriting the filter property, removing the blur.

My hacky solution

Add this rule to your custom.css:

html[data-theme='dark'] body:is([data-page='page'], [data-page='home']).is-banner-active::before {
    filter: brightness(0.8) blur(20px);
}

NB: This is a hacky solution, has not be tested thoroughly yet nor has been tested in light mode (though shouldn't break anything light related).

@yoyurec seems like a quick fix at first glance, though I do not no the plugin in depth, thus I do not know if this is the right way to do it. If it is, I can look into making a PR 🙂