matsuyoshi30 / harbor

Simple and minimal personal blog theme.
MIT License
186 stars 68 forks source link

Back to top button not working in dark mode #130

Closed NYPD closed 2 years ago

NYPD commented 2 years ago

When backtotop is enabled, the position: fixed on the button does not work in dark mode. Here is a gif of the issue:

(Looks like github has a limit on file size)

https://i.imgur.com/U08dCqv.gif

The problem comes from this:

body {
    filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
    -webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
}
img, video, iframe, body * [style*="background-image"] {
    filter: hue-rotate(180deg) contrast(100%) invert(100%);
    -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
}

Adding a filter or any transformation on a element will result in any fixed elements inside of it to become relative to it. Here is a link to issue: https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning/52937920#52937920

Unfortunately some custom code is required to try and achieve what the filter was doing. I'm attaching a PR for the changes I did to try and get it working. Here are the results:

https://i.imgur.com/9c0cgH7.gif

Such a small issue so I'm not sure if it is that important or not

NYPD commented 2 years ago

Thinking about it we can keep this:

img, video, iframe, body * [style*="background-image"] {
    filter: hue-rotate(180deg) contrast(100%) invert(100%);
    -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
}

It should not affect the back to top button