[tex4ht] [bug #623] Images inverted with dark mode by default html5 css

[Michal Hoftich]

Update of bug #623 (project tex4ht):

 Open/Closed:Open => Closed 


___

Reply to this item at:

  

___
  Message sent via/by Puszcza
  http://puszcza.gnu.org.ua/

[tex4ht] [bug #623] Images inverted with dark mode by default html5 css

[Michal Hoftich]

Follow-up Comment #3, bug #623 (project tex4ht):

Dear Oliver, 

thanks for the confirmation. It was really an omission on my side that I added
color inversion, but didn't set the basic colors. I probably forgot to import
it from the test file I used at the time. I will add it now.

___

Reply to this item at:

  

___
  Message sent via/by Puszcza
  http://puszcza.gnu.org.ua/

[tex4ht] [bug #623] Images inverted with dark mode by default html5 css

[Oliver Freyermuth]

Follow-up Comment #2, bug #623 (project tex4ht):

Dear Michal,

aaah, I see. In fact, my problems were seen with TikZpictures, i.e. I'm the
same guy from here:
https://tex.stackexchange.com/a/641354/224985

The black pgfornaments became invisible with a dark theme for me by default,
which confused me at first. I then tried with a colourful TikZ picture and saw
the colours became inverted, i.e. I used:

\tikzset{pgfornamentstyle/.style={color=black,fill=yellow, opacity=0.7,
line width=0.5pt}};
\node[anchor=south]{\pgfornament[height=1.0cm]{87}};

within that example and the ornaments came up with a blue fill colour. But you
are fully correct, it does not happen to \includegraphics. 

The CSS config you added works perfectly fine for me in the case of black TikZ
images, it makes them visible nicely and the body and text are well adapted to
the dark theme. So I think this is a large improvement to the default :-). 

___

Reply to this item at:

  

___
  Message sent via/by Puszcza
  http://puszcza.gnu.org.ua/

[tex4ht] [bug #623] Images inverted with dark mode by default html5 css

[Michal Hoftich]

Follow-up Comment #1, bug #623 (project tex4ht):

Dear Olivier,

Yes, I've added this rule because I've found that images created from math or
TikZ images with transparent backgrounds were completely black. They always
have a filename that starts with the \jobname, so src^="\jobname" should match
only these images, as opposed to pictures included by \includegraphics, which
generally aren't named the same as the main document. So, it is really strange
that the images you included are inverted. This rule shouldn't apply to them.

But as you wrote that you have a white background, I realized we don't set a
dark background in the dark mode. We should fix that. Does the following
config file work for you?

\Preamble{xhtml}
\Css{
body {
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
}
}
\begin{document}
\EndPreamble




___

Reply to this item at:

  

___
  Message sent via/by Puszcza
  http://puszcza.gnu.org.ua/

[tex4ht] [bug #623] Images inverted with dark mode by default html5 css

[Oliver Freyermuth]

URL:
  

 Summary: Images inverted with dark mode by default html5 css
 Project: tex4ht
Submitted by: olifre
Submitted on: Tue Apr  9 00:38:42 2024
Category: None
Priority: 5 - Normal
Severity: 3 - Minor
  Status: None
 Privacy: Public
 Assigned to: None
Originator Email: 
 Open/Closed: Open
 Discussion Lock: Any

___

Details:

Dear Karl,

feel free to close if this is intended — after updating from TeXlive 2021 to
2023, I noticed that with the default CSS and HTML5 mode in a dark-themed
browser, all image colours are inverted. 

Body background colour and text colours are unaffected, but images are caught
by the rule:

\Css{
  @media (prefers-color-scheme: dark) {
img[src^="\jobname"]{filter: invert(1); }
  }
}

which was added in
https://tug.org/svn/texlive/trunk/Master/texmf-dist/source/generic/tex4ht/tex4ht-html5.tex?r1=64099=65513
. The comment there mentions this is a fix for:
"background of generated images in the dark mode"
so I presume it was added on purpose. 

It seems quite irritating for a default — black graphics (e.g. pgfornaments)
vanish against the white background when shown in a dark-themed browser, and
photos get inverted colours. 

I'm personally using:

filter: drop-shadow(7px 7px 4px rgba(0, 0, 0, .7)) invert(0) !important;

in my CSS for all images to overwrite that. and of course "nostyle" might be
what I should actually be using when using a custom CSS. 

As outlined, if the default is intended, feel free to close. 
Thanks!




___

Reply to this item at:

  

___
  Message sent via/by Puszcza
  http://puszcza.gnu.org.ua/