Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://mamot.fr/users/sknob/statuses/113078829296718140">sknob ⏚ (sknob@mamot.fr)'s status on Wednesday, 04-Sep-2024 19:45:30 JST</a><a href="https://mamot.fr/@sknob" title="sknob@mamot.fr"><img src="https://gnusocial.jp/avatar/84527-48-20240516164230.webp" width="48" height="48" alt="sknob ⏚" style="position: absolute; left: 0; top: 0;">sknob ⏚</a><div><ul><li></ul></div></section><article><p>I implemented dark mode on my ancient but serviceable hand-made music site (<a href="https://sknob.fr/music" rel="nofollow noreferrer">https://sknob.fr/music</a> ) this morning using <a href="https://mastodon.ar.al/@aral">@aral</a>’s great CSS filter-based technique (<a href="https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/" rel="nofollow noreferrer">https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/</a>)</p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/3612352#notice-7083732">In conversation</a><time datetime="2024-09-04T19:45:30+09:00" title="Wednesday, 04-Sep-2024 19:45:30 JST">about 3 months ago</time> <span>from <span><a href="https://mamot.fr/@sknob/113078829296718140" rel="external" title="Sent from mamot.fr via ActivityPub">mamot.fr</a></span></span><a href="https://mamot.fr/@sknob/113078829296718140">permalink</a><h4>Attachments</h4><ol><li><article><header><div>Domain not in remote thumbnail source whitelist: ar.al</div><h5><a href="https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/">Implementing dark mode in a handful of lines of CSS with CSS filters</a></h5><div></div></header><div>I finally got round to implementing dark mode for this site (the cobbler’s children have no shoes and all that…)
Here’s all the CSS I had to add:
@media (prefers-color-scheme: dark) { /* Invert all elements on the body while attempting to not alter the hue substantially. */ body { filter: invert(100%) hue-rotate(180deg); } /* Workarounds and optical adjustments. */ /* Firefox workaround: Set the background colour for the html element separately because, unlike other browsers, Firefox doesn’t apply the filter to the root element’s background.</div><footer></footer></article></li><li><article><header><div>No result found on File_thumbnail lookup.</div><h5><a href="https://sknob.fr/music/">Ouvaton.coop - Coopérative d'hébergement</a></h5><div></div></header><div></div><footer></footer></article></li></ol></footer></blockquote>

Corresponding Notice

Embed this notice
sknob ⏚ (sknob@mamot.fr)'s status on Wednesday, 04-Sep-2024 19:45:30 JSTsknob ⏚
- Aral Balkan
I implemented dark mode on my ancient but serviceable hand-made music site (https://sknob.fr/music ) this morning using @aral’s great CSS filter-based technique (https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/)
In conversationabout 3 months ago from mamot.frpermalink
Attachments
1. Domain not in remote thumbnail source whitelist: ar.al
  Implementing dark mode in a handful of lines of CSS with CSS filters
  I finally got round to implementing dark mode for this site (the cobbler’s children have no shoes and all that…) Here’s all the CSS I had to add: @media (prefers-color-scheme: dark) { /* Invert all elements on the body while attempting to not alter the hue substantially. */ body { filter: invert(100%) hue-rotate(180deg); } /* Workarounds and optical adjustments. */ /* Firefox workaround: Set the background colour for the html element separately because, unlike other browsers, Firefox doesn’t apply the filter to the root element’s background.
2. No result found on File_thumbnail lookup.
  Ouvaton.coop - Coopérative d'hébergement

Public

Embed Notice

HTML Code

Corresponding Notice