feat: add dark/light discord iframe

Author: kravetsone

components/midori/community.vue

@@ -1,17 +1,19 @@
+<script setup lang="ts">
+import useDark from './use-dark'
+
+const isDark = useDark()
+</script>
+
 <template>
     <article
-        class="flex justify-between flex-col lg:flex-row-reverse items-center w-full max-w-6xl mx-auto my-8 gap-12"
-    >
+        class="flex justify-between flex-col lg:flex-row-reverse items-center w-full max-w-6xl mx-auto my-8 gap-12">
         <section class="flex flex-col w-full max-w-lg">
             <header class="flex flex-col justify-center items-start">
-                <h2
-                    class="text-2xl md:text-3xl leading-tight font-medium text-gray-400 mb-2"
-                >
+                <h2 class="text-2xl md:text-3xl leading-tight font-medium text-gray-400 mb-2">
                     Can't find what you're looking for?
                 </h2>
                 <h2
-                    class="text-5xl leading-tight font-semibold text-gray-400 mb-4 bg-clip-text text-transparent bg-gradient-to-tl from-fuchsia-500 to-blue-500"
-                >
+                    class="text-5xl leading-tight font-semibold text-gray-400 mb-4 bg-clip-text text-transparent bg-gradient-to-tl from-fuchsia-500 to-blue-500">
                     Join the community
                 </h2>
             </header>
@@ -23,13 +25,10 @@
             </p>
         </section>
         <section class="flex flex-col w-full max-w-xl rounded-lg overflow-hidden">
-            <iframe
-                class="w-full h-64"
-                src="https://discord.com/widget?id=1044804142461362206&theme=dark"
-                allowtransparency="true"
-                frameborder="0"
-                sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
-            />
+            <iframe class="w-full h-64"
+                :src="'https://discord.com/widget?id=1044804142461362206&theme=' + (isDark ? 'dark' : 'light')"
+                allowtransparency="true" frameborder="0"
+                sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" />
         </section>
     </article>
 </template>