MightyCreak
fixup! banner.svg: Fix text color in dark mode
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?
@qwertychouskie Your original solution works correctly if the whole SVG is simply inserted as part of the HTML (in place of the <img> tag).
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 body selectors to something that will match inside the SVG also does the trick. I'm not sure what is the correct approach here tho
edit: The latter way doesn't quite work because the dark-theme | light-theme class set on body does not propagate to the SVG. But now I found this proposal which sounds relevant and the surrounding discussion offers a few workarounds.
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 :wink:
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 public/css/style.css.