0

I would like to create a dark mode and other color filters for my application.

Therefore I tried to apply this css filter to body

filter: invert(1);

But I will break the positioning of fixed elements. I already found this stackoverflow question to it

But when I set the filter directly to the elements and not the containers I cannot set the color for the body and to really add a good dark mode to my application I need it.

How can I accomplish that?

Update 1:

Here is a little a example I just created:

As in the other stackoverflow problem I posted, it's working with Chrome but not Firefox

body, html {
  padding: 0;
  background: white;
  height: 100%;
}

html {
  filter: invert(1);
}

body {
  padding-bottom: 300px;
}

.container {
  position: fixed;
  left: 50px;
  bottom: 50px;
  background: green;
  height: 100px;
  width: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./darkmode.css">
</head>
<body>
    <div class="container"></div>
</body>
</html>

Greetings, Markus

mrkshx
  • 11
  • 3
  • Could you please provide a link, or another example? – MetropolisCZ Aug 12 '21 at 10:26
  • 1
    @MetropolisCZ Sure, I just added a little example in my question – mrkshx Aug 12 '21 at 10:55
  • How is body styled? Does it have position set for example? – A Haworth Aug 12 '21 at 10:56
  • @AHaworth In my example this is how body and html are styled: ```css body, html { padding: 0; background: white; height: 100%; } html { filter: invert(1); } body { padding-bottom: 300px; } ``` – mrkshx Aug 12 '21 at 11:19
  • I note that the filter is now on the html element. Running your snippet on Firefox (Windows 10) I can't see a problem. Could you expand on what the problem is? – A Haworth Aug 12 '21 at 11:37
  • @AHaworth Right, in the example appling the filter to body will make the container move both on Chrome and Firefox so I moved it to html. I also test on Windows 10 and there in Firefox the container is moving when I scroll altough position fixed is set – mrkshx Aug 12 '21 at 11:45
  • For what it's worth, while this may be a very fast way to apply a dark mode to your site it comes with some caveats-- the main one that comes to mind is any graphic or image you add to your site might be inverted, which wouldn't be ideal. Also, any previously large dark element on the page will become quite bright. A slightly more targeted approach without _too_ much more effort would be to use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) in order to set your colors, and change their values when dark mode is toggled. – Alexander Nied Sep 07 '21 at 01:00

0 Answers0