polyfill apple emoji

Author: DylanVann

packages/docs/index.css

@@ -135,3 +135,12 @@ svg .text-shadow {
 .prose h1 {
   margin: inherit !important;
 }
+
+.emoji {
+  display: inline;
+  height: 1em;
+  width: 1em;
+  margin: 0 !important;
+  margin-top: -0.2em !important;
+  vertical-align: middle;
+}

packages/docs/index.js

@@ -19,8 +19,10 @@ const toggleElements = document.querySelectorAll('.toggle')
 mode.subscribe((v) => {
   toggleElements.forEach(
     (el) =>
-      (el.querySelector('.label').textContent =
-        v === 'dark' ? '🌚 Dark' : '🌝 Light'),
+      (el.querySelector('.label').innerHTML =
+        v === 'dark'
+          ? '<img class="emoji" src="moon.png"> Dark'
+          : '<img class="emoji" src="sun.png"> Light'),
   )
   changeFavicon(v === 'dark' ? 'moon.png' : 'sun.png')
 })

packages/docs/index.pug

@@ -14,9 +14,9 @@ html
             include ./index.css
     body.prose
         div.header.flex.items-center.mb-3.justify-between.flex-col(class="md:flex-row")
-            h1(class="mb-3 md:mb-0") 🌚🌝 Perfect Dark Mode
+            h1(class="mb-3 md:mb-0") <img class="emoji" src="moon.png"><img class="emoji" src="sun.png"> Perfect Dark Mode
             button.toggle.flex.flex-col.items-center(style="visibility: hidden;")
-                span.label 🌝 color mode
+                span.label <img class="emoji" src="sun.png"> color mode
                 span.text-xs (Click Me)
 
         div.flex.space-x-2.justify-center(class="md:justify-start")
@@ -44,7 +44,7 @@ html
         // their system color mode.
         p You can set the color mode, this will be saved.
         button.toggle(style="visibility: hidden;")
-            span.label 🌝 color mode
+            span.label <img class="emoji" src="sun.png"> color mode
         p You can reset the color mode and fallback to system color mode.
         button(id="button") Reset
         p For debugging and understanding here is the saved color mode and the OS color mode.