HTML

Relative Text Sizing as in-line CSS

Put this at the top of your page

<style>
/* TEXT SIZING - Relative */
.sm-text {
    font-size: 0.75rem !important; 
}

.xs-text {
    font-size: 0.625rem !important; 
}
</style>

Different img for Light or Dark Mode

You see both of these, right? | Image | Mode| | :--: | :--: | | | Light Mode (75x75) | | | Dark Mode (75x75) |

HTML Code

I know, no CSS!
NOTE: You can do this with two images but IF-THEN-ELSE infiltrated my brain.

<picture>
    <!-- light mode -->
     <source srcset="../../assets/images/github-mark-light.png" width="75" height="75" media="(prefers-color-scheme: light)">
    <!-- dark mode -->
     <source srcset="../../assets/images/github-mark-dark.png" width="75" height="75" media="(prefers-color-scheme: dark)">
    <!-- no  preference -->
     <img src="../../assets/images/github-mark.png" width="75" height="75">
</picture>

Test it out!

You should see one or the other - switch your modes. Try it!