feat: add dark mode

Author: tatevikg1

assets/editor/EditorAssetPicker.vue

@@ -8,100 +8,100 @@
       aria-labelledby="editor-asset-picker-title"
       @keydown.esc="$emit('close')"
     >
-      <div class="w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl">
-        <div class="flex items-center justify-between gap-3 border-b border-slate-200 px-4 py-3">
+      <div class="w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-xl">
+        <div class="flex items-center justify-between gap-3 border-b border-slate-200 dark:border-slate-700 px-4 py-3">
           <div class="min-w-0">
-            <h3 id="editor-asset-picker-title" class="text-sm font-semibold text-slate-900">
+            <h3 id="editor-asset-picker-title" class="text-sm font-semibold text-slate-900 dark:text-slate-100">
               Choose an existing asset
             </h3>
-            <p class="text-xs text-slate-500">Pick a file to insert it at the cursor position.</p>
+            <p class="text-xs text-slate-500 dark:text-slate-400">Pick a file to insert it at the cursor position.</p>
           </div>
 
           <button
             type="button"
-            class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            class="rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
             @click="$emit('close')"
           >
             Close
           </button>
         </div>
 
-        <div class="flex flex-col gap-3 border-b border-slate-200 px-4 py-3 sm:flex-row sm:items-center">
+        <div class="flex flex-col gap-3 border-b border-slate-200 dark:border-slate-700 px-4 py-3 sm:flex-row sm:items-center">
           <input
             ref="searchInput"
             :value="query"
             type="search"
-            class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+            class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 dark:bg-slate-800 outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
             placeholder="Search by file name"
             @input="$emit('update:query', $event.target.value)"
           >
 
           <button
             type="button"
-            class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            class="rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
             @click="$emit('refresh')"
           >
             Refresh
           </button>
         </div>
 
         <div class="max-h-[60vh] overflow-auto">
-          <div v-if="loading" class="px-4 py-8 text-sm text-slate-500">
+          <div v-if="loading" class="px-4 py-8 text-sm text-slate-500 dark:text-slate-400">
             Loading assets...
           </div>
 
-          <div v-else-if="error" class="px-4 py-8 text-sm text-red-600">
+          <div v-else-if="error" class="px-4 py-8 text-sm text-red-600 dark:text-red-400">
             {{ error }}
           </div>
 
           <table v-else class="w-full table-fixed border-separate border-spacing-0">
-            <thead class="sticky top-0 bg-slate-50">
-              <tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
-                <th class="w-24 border-b border-slate-200 px-4 py-3">Preview</th>
-                <th class="border-b border-slate-200 px-4 py-3">Name</th>
-                <th class="w-32 border-b border-slate-200 px-4 py-3">Type</th>
-                <th class="w-28 border-b border-slate-200 px-4 py-3">Size</th>
-                <th class="w-40 border-b border-slate-200 px-4 py-3">Updated</th>
-                <th class="w-28 border-b border-slate-200 px-4 py-3"></th>
+            <thead class="sticky top-0 bg-slate-50 dark:bg-slate-800">
+              <tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                <th class="w-24 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Preview</th>
+                <th class="border-b border-slate-200 dark:border-slate-700 px-4 py-3">Name</th>
+                <th class="w-32 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Type</th>
+                <th class="w-28 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Size</th>
+                <th class="w-40 border-b border-slate-200 dark:border-slate-700 px-4 py-3">Updated</th>
+                <th class="w-28 border-b border-slate-200 dark:border-slate-700 px-4 py-3"></th>
               </tr>
             </thead>
             <tbody>
               <tr v-if="!filteredItems.length">
-                <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">
+                <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500 dark:text-slate-400">
                   No assets found.
                 </td>
               </tr>
 
               <tr
                 v-for="item in filteredItems"
                 :key="item.url"
-                class="border-b border-slate-100 text-sm text-slate-700 hover:bg-slate-50"
+                class="border-b border-slate-100 dark:border-slate-700 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700"
               >
                 <td class="px-4 py-3 align-top">
                   <img
                     v-if="item.isImage"
                     :src="item.url"
                     :alt="item.fileName.slice(0, 5) + '...'"
-                    class="h-14 w-14 rounded border border-slate-200 object-cover"
+                    class="h-14 w-14 rounded border border-slate-200 dark:border-slate-700 object-cover"
                   >
                   <div
                     v-else
-                    class="flex h-14 w-14 items-center justify-center rounded border border-slate-200 bg-slate-50 text-xs font-semibold uppercase text-slate-500"
+                    class="flex h-14 w-14 items-center justify-center rounded border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-xs font-semibold uppercase text-slate-500 dark:text-slate-400"
                   >
                     {{ extensionLabel(item.fileName) }}
                   </div>
                 </td>
                 <td class="px-4 py-3 align-top">
-                  <p class="break-all font-medium text-slate-900">{{ item.fileName }}</p>
-                  <p class="break-all text-xs text-slate-500">{{ item.url }}</p>
+                  <p class="break-all font-medium text-slate-900 dark:text-slate-100">{{ item.fileName }}</p>
+                  <p class="break-all text-xs text-slate-500 dark:text-slate-400">{{ item.url }}</p>
                 </td>
-                <td class="px-4 py-3 align-top text-xs uppercase text-slate-500">
+                <td class="px-4 py-3 align-top text-xs uppercase text-slate-500 dark:text-slate-400">
                   {{ item.mimeType }}
                 </td>
-                <td class="px-4 py-3 align-top text-sm text-slate-600">
+                <td class="px-4 py-3 align-top text-sm text-slate-600 dark:text-slate-300">
                   {{ formatBytes(item.size) }}
                 </td>
-                <td class="px-4 py-3 align-top text-sm text-slate-600">
+                <td class="px-4 py-3 align-top text-sm text-slate-600 dark:text-slate-300">
                   {{ formatDate(item.modifiedAt) }}
                 </td>
                 <td class="px-4 py-3 align-top text-right">
@@ -118,9 +118,9 @@
           </table>
         </div>
 
-        <div class="flex items-center justify-between gap-3 border-t border-slate-200 px-4 py-3 text-sm text-slate-600">
+        <div class="flex items-center justify-between gap-3 border-t border-slate-200 dark:border-slate-700 px-4 py-3 text-sm text-slate-600 dark:text-slate-300">
           <span>{{ filteredItems.length }} asset{{ filteredItems.length === 1 ? '' : 's' }}</span>
-          <span class="text-xs text-slate-500">Choose a row to insert it immediately.</span>
+          <span class="text-xs text-slate-500 dark:text-slate-400">Choose a row to insert it immediately.</span>
         </div>
       </div>
     </div>

assets/styles/app.css

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @tailwind utilities;
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
   --color-primary: #2563eb;
   --color-secondary: #6b7280;

assets/vue/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-[#F8FAFC] flex text-slate-900 font-sans">
+  <div class="min-h-screen bg-[#F8FAFC] dark:bg-slate-900 flex text-slate-900 dark:text-slate-100 font-sans">
     <AppSidebar />
 
     <div class="flex flex-col flex-1 min-h-screen min-w-0">
@@ -9,5 +9,13 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue'
 import AppSidebar from './components/sidebar/AppSidebar.vue'
+import { useDarkMode } from './composables/useDarkMode'
+
+const { initDarkMode } = useDarkMode()
+
+onMounted(() => {
+  initDarkMode()
+})
 </script>

assets/vue/components/base/BaseBadge.vue

@@ -19,10 +19,10 @@ const badgeClass = computed(() => {
   const base = 'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium';
   switch (props.variant) {
     case 'counter':
-      return `${base} bg-indigo-50 text-ext-wf3 border border-indigo-100`;
+      return `${base} bg-indigo-50 dark:bg-indigo-500/10 text-ext-wf3 dark:text-indigo-300 border border-indigo-100 dark:border-indigo-500/20`;
     case 'neutral':
     default:
-      return `${base} bg-gray-100 text-gray-800`;
+      return `${base} bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-slate-200`;
   }
 })
 </script>

assets/vue/components/base/BaseButton.vue

@@ -23,9 +23,9 @@ const buttonClass = computed(() => {
   const base = 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2';
   switch (props.variant) {
     case 'secondary':
-      return `${base} text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:ring-blue-500`;
+      return `${base} text-gray-700 dark:text-slate-200 bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-700 focus:ring-blue-500`;
     case 'ghost':
-      return 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-600 bg-transparent hover:bg-blue-50 focus:outline-none';
+      return 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-600 dark:text-blue-400 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-500/10 focus:outline-none';
     case 'primary':
     default:
       return `${base} text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500`;

assets/vue/components/base/BaseCard.vue

@@ -16,8 +16,8 @@ const props = defineProps({
 })
 
 const cardVariantMap = {
-  default: 'rounded-lg shadow-sm border border-gray-100 bg-white',
-  subtle: 'rounded-lg shadow-sm border-0 bg-gray-50',
+  default: 'rounded-lg shadow-sm border border-gray-100 dark:border-slate-700 bg-white dark:bg-slate-800',
+  subtle: 'rounded-lg shadow-sm border-0 bg-gray-50 dark:bg-slate-800',
   danger: 'rounded-lg shadow-sm border-0 bg-red-600 text-white',
   success: 'rounded-lg shadow-sm border-0 bg-green-600 text-white',
 }

assets/vue/components/base/BaseIcon.vue

@@ -94,6 +94,10 @@ const icons = {
 
   pause: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="5" width="3" height="14" rx="1"></rect><rect x="14" y="5" width="3" height="14" rx="1"></rect></svg>`,
 
+  sun: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>`,
+
+  moon: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg>`,
+
   start: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4" rx="1"></polygon></svg>`,
 };
 
@@ -108,9 +112,9 @@ const wrapperClass = computed(() => {
   ];
 
   if (props.active) {
-    classes.push("text-ext-wf3");
+    classes.push("text-ext-wf3 dark:text-indigo-400");
   } else {
-    classes.push("text-slate-400 group-hover:text-slate-600");
+    classes.push("text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300");
   }
 
   return classes.join(" ");

assets/vue/components/base/BaseProgressBar.vue

@@ -1,6 +1,6 @@
 <!-- assets/vue/components/base/BaseProgressBar.vue -->
 <template>
-  <div class="progress bg-secondary bg-opacity-25 rounded-pill" :style="wrapperStyle">
+  <div class="progress bg-secondary bg-opacity-25 dark:bg-slate-700 rounded-pill" :style="wrapperStyle">
     <div
         class="progress-bar bg-primary rounded-pill"
         role="progressbar"

assets/vue/components/base/CkEditorField.vue

@@ -3,7 +3,7 @@
     <label
         v-if="label"
         :for="fieldId"
-        class="mb-1 block text-sm font-medium text-slate-700"
+        class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-200"
     >
       {{ label }}
     </label>
@@ -22,8 +22,8 @@
         :config="config"
     />
 
-    <p v-if="helperText" class="mt-1 text-xs text-slate-500">{{ helperText }}</p>
-    <p v-if="errorMessage" class="mt-1 text-xs text-red-600">{{ errorMessage }}</p>
+    <p v-if="helperText" class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ helperText }}</p>
+    <p v-if="errorMessage" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ errorMessage }}</p>
   </div>
 </template>