fix: cause when github-dark theme showed in light theme

Author: kravetsone

components/midori/editor.vue

@@ -127,7 +127,7 @@ onMounted(() => {
     const editor = document.querySelector<HTMLElement>('pre.elysia-editor')
 
     editor.innerHTML = highlighter.codeToHtml(code, {
-        theme: isDark ? 'github-dark' : 'github-light',
+        theme: isDark.value ? 'github-dark' : 'github-light',
         lang: 'javascript',
     })
 
@@ -136,7 +136,7 @@ onMounted(() => {
 
         editor.innerHTML = highlighter.codeToHtml(
             event.currentTarget.innerText, {
-            theme: isDark ? 'github-dark' : 'github-light',
+            theme: isDark.value ? 'github-dark' : 'github-light',
             lang: 'javascript',
         })
 
@@ -194,7 +194,8 @@ onMounted(() => {
         </p>
 
         <aside class="flex flex-col md:flex-row justify-center items-center w-full max-w-6xl gap-8 my-8">
-            <section class="flex flex-col w-full h-96 border dark:border-slate-700 bg-white dark:bg-slate-800 rounded-2xl">
+            <section
+                class="flex flex-col w-full h-96 border dark:border-slate-700 bg-white dark:bg-slate-800 rounded-2xl">
                 <div class="mockup-window flex relative w-full h-full shadow-xl">
                     <pre class="elysia-editor block !bg-transparent !text-base !font-mono rounded-xl w-full max-w-xl h-full !pt-0 !px-2 outline-none"
                         contenteditable="true">

components/midori/index.vue

@@ -18,10 +18,6 @@ import '../tailwind.css'
 import './midori.css'
 
 import BuiltWithLove from './built-with-love.vue'
-
-import useDark from './use-dark'
-
-const isDark = useDark()
 </script>
 
 <template>
@@ -48,13 +44,15 @@ const isDark = useDark()
                 <template v-slot:server>
                     <slot name="server"></slot>
                 </template>
+
                 <template v-slot:client>
                     <slot name="client"></slot>
                 </template>
             </E2ETypeSafety>
             <Plugins />
             <Suspense>
                 <Editor />
+
                 <template #fallback>
                     <video muted autoplay loop>
                         <source src="/assets/elysia.mp4" />