yoyurec / logseq-awesome-styler

🎨 Totally customizable theme with presets: colors, backgrounds, fonts and sizes, etc... Logseq plugin
MIT License
180 stars 8 forks source link

Background of dark mode isn’t blurred #88

Open Gitbreast opened 1 year ago

Gitbreast commented 1 year ago

Info:

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.

Felix-Pedro commented 9 months ago

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

image

jumski commented 1 month ago

Same for me

OS: Manjaro Linux logseq version: 0.10.9 plugin: 3.7.1

Jeosas commented 3 weeks ago

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 :slightly_smiling_face: