Skip to content

Instantly share code, notes, and snippets.

@joar

joar/magic-icon.svg

Last active February 13, 2019 06:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joar/acd2f788110f5d41ad6553fbec0ea576 to your computer and use it in GitHub Desktop.
Save joar/acd2f788110f5d41ad6553fbec0ea576 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
magic-icon.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
magic-test.html
<!doctype html>
<html>
<head>
<style>
div {
--bg-color: white;
--fg-color: black;
padding: 5px 10px;
background-color: var(--bg-color);
color: var(--fg-color);
}
.default img {
-moz-context-properties: none;
}
.dark {
--bg-color: black;
--fg-color: #f9f9fa;
}
.colorful {
--fg-color: red;
}
img {
-moz-context-properties: fill;
fill: currentColor;
border: thin solid var(--fg-color);
}
.img-32 { width: 32px; }
.img-24 { width: 24px; }
.img-20 { width: 20px; }
.img-16 { width: 16px; }
</style>
</head>
<body>
<div class="default">
<p>Without -moz-context-properties:</p>
<img class="img-24" src="magic-icon.svg">
<img class="img-20" src="magic-icon.svg">
<img class="img-16" src="magic-icon.svg">
<img class="img-32" src="magic-icon.svg">
</div>
<div class="dark">
<p>Dark theme</p>
<img class="img-24" src="magic-icon.svg">
<img class="img-20" src="magic-icon.svg">
<img class="img-16" src="magic-icon.svg">
<img class="img-32" src="magic-icon.svg">
</div>
<div class="light">
<p>Light theme</p>
<img class="img-24" src="magic-icon.svg">
<img class="img-20" src="magic-icon.svg">
<img class="img-16" src="magic-icon.svg">
<img class="img-32" src="magic-icon.svg">
</div>
<div class="colorful">
<p>Arbitrary foreground</p>
<img class="img-24" src="magic-icon.svg">
<img class="img-20" src="magic-icon.svg">
<img class="img-16" src="magic-icon.svg">
<img class="img-32" src="magic-icon.svg">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment