fixup! banner.svg: Fix text color in dark mode #332
Conversation
This version should actually work. `<img>` tags don't inherit CSS styles, which caused the previous solution to not work.
|
I've tested locally and it still doesn't work. Are you sure it works on your side? |
|
Hmm, you are right. I'll play with other methods to make this work. |
|
@qwertychouskie Your original solution works correctly if the whole SVG is simply inserted as part of the HTML (in place of the So the problem is that the CSS properties do not propagate to external documents. Referencing the stylesheet from the SVG itself (like suggested here) and changing the relevant edit: The latter way doesn't quite work because the edit 2: Here's another half-decent workaround: https://stackoverflow.com/a/72804140 |
|
Interesting, thanks @mskiptr! The CSS proposal is promising, though a change in the syntax might take a while before it's approved! I'm not that attached to having the logo following the dark/light theme. I wouldn't do a workaround for that. That said, if you really want it, I'd be ok with simply having two different SVG files and load one or the other depending on the chosen theme. I think that should work with some basic CSS syntax. That's what would be done if the image was a rasterized one (e.g. PNG), so it's not such a big deal. SVG offers vectorial quality, that's one of its main feature. One day we'll be able to use CSS to tweak an included SVG image, but today's not the day 😉 |
|
How about a few lines of PHP that take the logo and inline it into the HTML? (So basically what's suggested here: https://stackoverflow.com/a/30087588.) Would that be a better approach? So essentially just diff --git a/src/Controller/BaseController.php b/src/Controller/BaseController.php
index 7e21ba1..bfde1d6 100644
--- a/src/Controller/BaseController.php
+++ b/src/Controller/BaseController.php
@@ -135,7 +135,15 @@ HTML;
</head>
<body>
<header>
- <a href="."><img src="images/banner.svg" class="banner" alt="Mesamatrix banner" /></a>
+ <a href=".">
+HTML;
+ $banner = new DOMDocument();
+ $banner->load('.../path/to/banner.svg');
+ $svg = $banner->getElementsByTagName('svg');
+ /* add class and alt to the <svg> node somehow? */
+ echo $svg->item(0)->C14N();
+ echo <<<'HTML'
+ </a>
<div class="menu">
<ul class="menu-list">…and the necessary adjustments to |
3 participants
This version should actually work.
<img>tags don't inherit CSS styles, which caused the previous solution to not work.