ketekny-ui-kit 1.0.36 → 1.0.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kArrayList.vue

@@ -12,8 +12,8 @@
       :rows="rows"
       :disabled="disabled"
       :class="[
-        'block w-full p-3 transition border border-gray-300 shadow-sm outline-none rounded-xl',
-        disabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white focus:border-primary focus:ring-2 focus:ring-primary/20',
+        'block w-full p-3 transition border border-gray-300 shadow-sm outline-none rounded-xl dark:border-slate-600 dark:text-slate-100 dark:placeholder-slate-500',
+        disabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-slate-900 dark:text-slate-500' : 'bg-white focus:border-primary focus:ring-2 focus:ring-primary/20 dark:bg-slate-800',
       ]"
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -21,7 +21,7 @@
       @compositionend="onCompositionEnd"
     ></textarea>
 
-    <div class="flex items-center justify-between mt-2 text-xs text-gray-500">
+    <div class="flex items-center justify-between mt-2 text-xs text-gray-500 dark:text-slate-400">
       <span>Items: <span class="font-semibold text-primary">{{ count }}</span></span>
       <span v-if="hint">{{ hint }}</span>
     </div>

package/src/ui/kConfirmDialog.vue

@@ -2,9 +2,9 @@
   <Teleport to="body">
     <Transition name="fade">
       <div v-if="visible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40" style="z-index: 1500">
-        <div class="w-full max-w-md p-6 bg-white border rounded-lg shadow-xl border-primary/20">
+        <div class="w-full max-w-md p-6 bg-white border rounded-lg shadow-xl border-primary/20 dark:bg-slate-800 dark:border-slate-700">
           <h2 class="mb-2 text-lg font-semibold text-primary">{{ title }}</h2>
-          <div class="mb-6 text-gray-700"><span v-html="message" /></div>
+          <div class="mb-6 text-gray-700 dark:text-slate-300"><span v-html="message" /></div>
           <div class="flex justify-end gap-3">
             <kButton :disabled="loading" secondary label="Άκυρο" @click="cancel" />
             <kButton :loading="loading" danger label="Συνέχεια" @click="confirm" />

package/src/ui/kDatatable.vue

@@ -43,7 +43,7 @@
             :disabled="disabled || !isItemSelectable(slotItem)"
             :title="!isItemSelectable(slotItem) ? 'Row is not selectable' : ''"
             @mousedown="captureSelectionInteraction"
-            @click.stop="captureSelectionInteraction"
+            @click.stop
             @change="($event) => handleItemSelectionChange($event, slotItem)"
           />
         </div>
@@ -191,6 +191,16 @@ export default {
   methods: {
     captureSelectionInteraction(event) {
       this.pendingShiftSelection = Boolean(event?.shiftKey || this.isShiftKeyPressed);
+      if (event?.type === "mousedown" && event?.shiftKey && typeof event.preventDefault === "function") {
+        // Prevent browser range-text selection while using Shift+click for row-range selection.
+        event.preventDefault();
+      }
+      if (typeof window !== "undefined" && typeof window.getSelection === "function") {
+        const selection = window.getSelection();
+        if (selection && typeof selection.removeAllRanges === "function") {
+          selection.removeAllRanges();
+        }
+      }
     },
     handleWindowKeydown(event) {
       if (event?.key === "Shift") {
@@ -684,6 +694,43 @@ export default {
   color: #1f2937;
 }
 
+.dark .customize-table {
+  --easy-table-row-border: 1px solid #374151;
+
+  --easy-table-header-font-color: #e5e7eb;
+
+  --easy-table-body-even-row-font-color: #e5e7eb;
+  --easy-table-body-row-font-color: #e5e7eb;
+  --easy-table-body-row-hover-font-color: #e5e7eb;
+  --easy-table-body-row-hover-background-color: #1e3a5f;
+
+  --easy-table-footer-font-color: #e5e7eb;
+  --easy-table-rows-per-page-selector-font-color: #e5e7eb;
+
+  --easy-table-loading-mask-background-color: rgba(15, 23, 42, 0.6);
+}
+
+.dark .k-datatable-checkbox {
+  background-color: #1e293b;
+  border-color: #64748b;
+}
+
+.dark .k-datatable-checkbox:disabled {
+  background-color: #334155;
+  border-color: #475569;
+}
+
+.dark .customize-table .easy-data-table__footer select {
+  background-color: #1e293b;
+  color: #e5e7eb;
+  border-color: #3b82f6;
+}
+
+.dark .customize-table .easy-data-table__footer select option {
+  background-color: #1e293b;
+  color: #e5e7eb;
+}
+
 @media (max-width: 640px) {
   .k-datatable-wrapper .customize-table {
     --easy-table-header-font-size: 12px;

package/src/ui/kEditor.vue

@@ -4,14 +4,14 @@
   </div>
   <div class="w-full">
     <!-- Toolbar -->
-    <div class="flex items-center gap-2 px-2 py-1 border rounded-t-md bg-primary/5 border-primary/20">
+    <div class="flex items-center gap-2 px-2 py-1 border rounded-t-md bg-primary/5 border-primary/20 dark:bg-slate-700/50 dark:border-slate-600">
       <button
         :disabled="disabled"
         v-for="(cmd, i) in toolbar"
         :key="i"
         @click.prevent="exec(cmd.command, cmd.value)"
         :title="cmd.title"
-        class="text-gray-600 p-1.5 rounded"
+        class="text-gray-600 p-1.5 rounded dark:text-slate-400"
         :class="disabled == false ? 'hover:text-primary hover:bg-primary/10' : ''"
       >
         <component :is="cmd.icon" class="w-5 h-5" />
@@ -27,12 +27,12 @@
       @blur="updateValue"
       :placeholder="placeholder"
     ></div>
-    <div class="text-sm text-red-500" v-if="hasError && error !== true && error !== ''">
+    <div class="text-sm text-red-500 dark:text-rose-400" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
 
     <!-- Info message -->
-    <div class="text-sm text-primary/80" v-if="info != null">
+    <div class="text-sm text-primary/80 dark:text-slate-400" v-if="info != null">
       {{ info }}
     </div>
   </div>
@@ -65,9 +65,9 @@ export default {
   data() {
     return {
       defaultStyle:
-        "w-full px-3 py-2 border rounded-b-lg transition shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 min-h-[150px] focus:border-primary bg-white placeholder-gray-400 !list-disc !list-inside prose",
-      errorStyle: "border-red-500 focus:ring focus:ring-red-300' : 'border-gray-300 focus:ring focus:ring-blue-300",
-      disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed editor pointer-events-none select-none",
+        "w-full px-3 py-2 border rounded-b-lg transition shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 min-h-[150px] focus:border-primary bg-white placeholder-gray-400 !list-disc !list-inside prose dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
+      errorStyle: "border-red-500 focus:ring focus:ring-red-300 dark:border-rose-500 dark:focus:ring-rose-500/20",
+      disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed editor pointer-events-none select-none dark:!bg-slate-900 dark:!text-slate-500",
       toolbar: [
         { command: "bold", icon: Bold, title: "Bold" },
         { command: "italic", icon: Italic, title: "Italic" },

package/src/ui/kInputDialog.vue

@@ -2,10 +2,10 @@
   <Teleport to="body">
     <Transition name="fade">
       <div v-if="visible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40" style="z-index: 1500" @keydown.esc.prevent="cancel">
-        <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
-          <h2 class="mb-2 text-lg font-semibold">{{ title }}</h2>
+        <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl dark:bg-slate-800">
+          <h2 class="mb-2 text-lg font-semibold dark:text-slate-100">{{ title }}</h2>
 
-          <div class="mb-4 text-gray-700">
+          <div class="mb-4 text-gray-700 dark:text-slate-300">
             <span v-html="message" />
           </div>
 
@@ -14,7 +14,7 @@
               :type="inputType"
               v-model="value"
               :placeholder="placeholder"
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-slate-700 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500 dark:focus:ring-indigo-400"
               :disabled="loading"
               ref="inputEl"
               @keyup.enter="confirm"

package/src/ui/kList.vue

@@ -7,7 +7,7 @@
       <div
         v-for="(stat, index) in normalizedStats"
         :key="resolveKey(stat, index)"
-        class="flex items-center gap-3 p-3 border border-gray-200 rounded-xl bg-white"
+        class="flex items-center gap-3 p-3 border border-gray-200 rounded-xl bg-white dark:bg-slate-800 dark:border-slate-700"
       >
         <div
           v-if="stat.icon"
@@ -26,21 +26,21 @@
         </div>
 
         <div class="min-w-0">
-          <dt class="text-sm text-gray-500 truncate">{{ stat.label }}</dt>
-          <dd class="text-xl font-semibold text-gray-900 truncate">{{ stat.value }}</dd>
+          <dt class="text-sm text-gray-500 truncate dark:text-slate-400">{{ stat.label }}</dt>
+          <dd class="text-xl font-semibold text-gray-900 truncate dark:text-slate-100">{{ stat.value }}</dd>
         </div>
       </div>
     </dl>
 
-    <div v-else class="overflow-hidden bg-white border border-gray-200 rounded-xl">
+    <div v-else class="overflow-hidden bg-white border border-gray-200 rounded-xl dark:bg-slate-800 dark:border-slate-700">
       <table class="w-full">
         <tbody>
           <tr
             v-for="(stat, index) in normalizedStats"
             :key="resolveKey(stat, index)"
-            class="border-b border-gray-200 last:border-b-0"
+            class="border-b border-gray-200 last:border-b-0 dark:border-slate-700"
           >
-            <td class="px-4 py-3 text-sm text-gray-600">
+            <td class="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
               <div class="flex items-center gap-2">
                 <div
                   v-if="stat.icon"
@@ -60,7 +60,7 @@
                 <span>{{ stat.label }}</span>
               </div>
             </td>
-            <td class="px-4 py-3 text-base font-semibold text-right text-gray-900">
+            <td class="px-4 py-3 text-base font-semibold text-right text-gray-900 dark:text-slate-100">
               {{ stat.value }}
             </td>
           </tr>

package/src/ui/kMenu.vue

@@ -14,7 +14,7 @@
       <slot name="trigger">
         <button
           type="button"
-          class="inline-flex items-center justify-center px-3 py-2 text-base font-medium text-center transition border rounded-lg shadow-sm bg-white border-slate-200 text-slate-700 hover:bg-slate-50">
+          class="inline-flex items-center justify-center px-3 py-2 text-base font-medium text-center transition border rounded-lg shadow-sm bg-white border-slate-200 text-slate-700 hover:bg-slate-50 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
           Menu
         </button>
       </slot>
@@ -24,12 +24,12 @@
       <div
         v-if="isOpen"
         ref="menuPanelRef"
-        class="z-[9999] overflow-auto border rounded-lg shadow-lg bg-white/95 backdrop-blur-sm border-primary/20 ring-1 ring-primary/10 max-h-[70vh]"
+        class="z-[9999] overflow-auto border rounded-lg shadow-lg bg-white/95 backdrop-blur-sm border-primary/20 ring-1 ring-primary/10 max-h-[70vh] dark:bg-slate-800/95 dark:border-slate-700 dark:ring-slate-700"
         :style="panelStyle"
         role="menu">
         <span
           aria-hidden="true"
-          class="absolute w-3 h-3 -translate-x-1/2 rotate-45 bg-white"
+          class="absolute w-3 h-3 -translate-x-1/2 rotate-45 bg-white dark:bg-slate-800"
           :class="[
             placement === 'top'
               ? 'bottom-[-7px] border-r border-b border-primary/20'
@@ -41,7 +41,7 @@
             <li v-for="(link, index) in normalizedLinks" :key="link.key || `${link.label}-${index}`">
               <component
                 :is="resolveLinkTag(link)"
-                class="flex items-center w-full gap-2 px-3 py-2 min-h-11 text-base rounded-md text-slate-700"
+                class="flex items-center w-full gap-2 px-3 py-2 min-h-11 text-base rounded-md text-slate-700 dark:text-slate-200"
                 :class="[
                   link.disabled
                     ? 'cursor-not-allowed opacity-50'

package/src/ui/kSearch.vue

@@ -20,8 +20,8 @@ export default {
   },
   data() {
     return {
-      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400",
-      disabledStyle: "bg-gray-100 text-gray-400 cursor-not-allowed",
+      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
+      disabledStyle: "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-slate-900 dark:text-slate-500",
 
       localValue: this.modelValue,
       debounceTimeout: null,

package/src/ui/kSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative w-full">
-    <label v-if="label != null" :for="computedId" class="inputLabel" :class="hasError ? 'text-red-500' : 'text-gray-700'">
+    <label v-if="label != null" :for="computedId" class="inputLabel" :class="hasError ? 'text-red-500 dark:text-rose-400' : 'text-gray-700 dark:text-slate-300'">
       {{ label }}
     </label>
 
@@ -8,7 +8,7 @@
       <SelectTrigger as-child>
         <div
           :id="computedId"
-          class="relative w-full px-3 py-2 text-gray-700 bg-white border rounded-lg cursor-pointer trigger-box"
+          class="relative w-full px-3 py-2 text-gray-700 bg-white border rounded-lg cursor-pointer trigger-box dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600"
           :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']"
           :aria-label="label || 'Select option'"
         >
@@ -17,7 +17,7 @@
           <button
             v-if="clearable && isSelectionSet && !disabled"
             type="button"
-            class="absolute text-gray-400 -translate-y-1/2 right-8 top-1/2 hover:text-red-500 transition-colors"
+            class="absolute text-gray-400 -translate-y-1/2 right-8 top-1/2 hover:text-red-500 transition-colors dark:text-slate-500 dark:hover:text-red-400"
             aria-label="Clear selection"
             @pointerdown.stop.prevent="clearSelection"
             @click.stop.prevent="clearSelection"
@@ -25,7 +25,7 @@
             <X class="w-4 h-4" />
           </button>
 
-          <span class="absolute text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2">
+          <span class="absolute text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-slate-500">
             <ChevronDown class="w-4 h-4 transition-transform duration-200" :class="{ 'rotate-180': open }" />
           </span>
         </div>
@@ -35,17 +35,17 @@
         <SelectContent
           position="popper"
           :side-offset="6"
-          class="select-content z-[9999] bg-white border border-gray-200 rounded-lg shadow-[0_10px_38px_-10px_rgba(22,23,24,0.35),0_10px_20px_-15px_rgba(22,23,24,0.2)] overflow-hidden"
+          class="select-content z-[9999] bg-white border border-gray-200 rounded-lg shadow-[0_10px_38px_-10px_rgba(22,23,24,0.35),0_10px_20px_-15px_rgba(22,23,24,0.2)] overflow-hidden dark:bg-slate-800 dark:border-slate-700"
         >
-          <div v-if="searchable" class="sticky top-0 z-10 p-2 border-b border-gray-100 bg-white">
+          <div v-if="searchable" class="sticky top-0 z-10 p-2 border-b border-gray-100 bg-white dark:bg-slate-800 dark:border-slate-700">
             <div class="relative">
-              <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+              <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none dark:text-slate-500" />
               <input
                 ref="searchInput"
                 type="text"
                 v-model="searchQuery"
                 placeholder="Αναζήτηση..."
-                class="w-full pl-9 pr-3 py-2 text-base border border-gray-200 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors placeholder-gray-400"
+                class="w-full pl-9 pr-3 py-2 text-base border border-gray-200 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors placeholder-gray-400 dark:bg-slate-700 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500"
                 role="searchbox"
                 aria-label="Search options"
                 @keydown="handleSearchKeydown"
@@ -64,9 +64,9 @@
               v-for="(option, index) in filteredOptions"
               :key="option[optionValue]"
               :value="option[optionValue]"
-              class="select-item relative flex items-center gap-1.5 rounded-[4px] py-2.5 pl-8 pr-3 text-base cursor-pointer outline-none select-none text-slate-700
+              class="select-item relative flex items-center gap-1.5 rounded-[4px] py-2.5 pl-8 pr-3 text-base cursor-pointer outline-none select-none text-slate-700 dark:text-slate-200
                      data-[highlighted]:bg-primary data-[highlighted]:text-white
-                     data-[state=checked]:bg-primary/5 data-[state=checked]:text-primary
+                     data-[state=checked]:bg-primary/5 data-[state=checked]:text-primary dark:data-[state=checked]:bg-slate-700 dark:data-[state=checked]:text-primary
                      data-[state=checked]:data-[highlighted]:bg-primary data-[state=checked]:data-[highlighted]:text-white"
             >
               <span class="absolute left-2 flex items-center justify-center w-4 h-4 shrink-0">
@@ -77,8 +77,8 @@
               <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
             </SelectItem>
 
-            <div v-if="filteredOptions.length === 0" class="flex flex-col items-center gap-1.5 px-3 py-4 text-base text-gray-400 text-center">
-              <SearchX class="w-5 h-5 text-gray-300" />
+            <div v-if="filteredOptions.length === 0" class="flex flex-col items-center gap-1.5 px-3 py-4 text-base text-gray-400 text-center dark:text-slate-500">
+              <SearchX class="w-5 h-5 text-gray-300 dark:text-slate-600" />
               <span>Δεν βρέθηκαν επιλογές</span>
             </div>
           </SelectViewport>
@@ -86,11 +86,11 @@
       </SelectPortal>
     </SelectRoot>
 
-    <div class="mt-1 text-sm text-red-500" v-if="hasError && error !== true && error !== ''">
+    <div class="mt-1 text-sm text-red-500 dark:text-rose-400" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
 
-    <div class="mt-1 text-sm text-gray-500" v-if="info">
+    <div class="mt-1 text-sm text-gray-500 dark:text-slate-400" v-if="info">
       {{ info }}
     </div>
   </div>
@@ -134,9 +134,9 @@ const searchQuery = ref("");
 const searchInput = ref(null);
 const viewportRef = ref(null);
 const generatedId = `select-${Math.random().toString(36).substr(2, 9)}`;
-const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400";
-const errorStyle = "border-red-500 focus:ring focus:ring-red-300";
-const disabledStyle = "!bg-gray-100 !text-gray-400 !cursor-not-allowed";
+const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500";
+const errorStyle = "border-red-500 focus:ring focus:ring-red-300 dark:border-rose-500 dark:focus:ring-rose-500/20";
+const disabledStyle = "!bg-gray-100 !text-gray-400 !cursor-not-allowed dark:!bg-slate-900 dark:!text-slate-500";
 
 function normalizeDropdownHeight(value) {
   const raw = String(value ?? "").trim();
@@ -349,4 +349,20 @@ function handleViewportKeydown(event) {
   background-color: #334155;
 }
 
+.dark :deep([data-reka-select-viewport]) {
+  scrollbar-color: #475569 #1e293b !important;
+}
+
+.dark :deep([data-reka-select-viewport]::-webkit-scrollbar-track) {
+  background: #1e293b;
+}
+
+.dark :deep([data-reka-select-viewport]::-webkit-scrollbar-thumb) {
+  background-color: #475569;
+  border-color: #1e293b;
+}
+
+.dark :deep([data-reka-select-viewport]::-webkit-scrollbar-thumb:hover) {
+  background-color: #64748b;
+}
 </style>

package/src/ui/kSelectButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="k-select-button inline-flex max-w-full overflow-x-auto border rounded-md border-primary/25" :aria-disabled="disabled.toString()">
+  <div class="k-select-button inline-flex max-w-full overflow-x-auto border rounded-md border-primary/25 dark:border-slate-600" :aria-disabled="disabled.toString()">
 
     <button
       v-for="(option, index) in options"
@@ -40,7 +40,7 @@ export default {
       return "bg-primary text-white";
     },
     inactiveClasses() {
-      return this.disabled ? "bg-white text-gray-500" : "bg-white text-primary/90 hover:bg-primary/10";
+      return this.disabled ? "bg-white text-gray-500 dark:bg-slate-800 dark:text-slate-400" : "bg-white text-primary/90 hover:bg-primary/10 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-primary/20";
     },
   },
   methods: {

package/src/ui/kSkeleton.vue

@@ -1,7 +1,7 @@
 <template lang="">
   <template v-if="type === 'text'">
     <div class="space-y-2 animate-pulse">
-      <div v-for="n in normalizedRows" :key="n" class="w-full h-4 rounded bg-primary/20"></div>
+      <div v-for="n in normalizedRows" :key="n" class="w-full h-4 rounded bg-primary/20 dark:bg-slate-700"></div>
     </div>
   </template>
 </template>

package/src/ui/kTags.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="w-full">
-    <div v-if="label != null" class="inputLabel" :class="hasError ? 'text-rose-800' : 'text-primary/90'">
+    <div v-if="label != null" class="inputLabel" :class="hasError ? 'text-rose-800 dark:text-rose-400' : 'text-primary/90'">
       {{ label }}
     </div>
     <div
       :class="[
         'flex flex-wrap items-center gap-2 p-2 border rounded-xl shadow-sm min-h-[3rem] transition',
-        hasError ? 'border-rose-500 bg-rose-50/40 focus-within:border-rose-600 focus-within:ring-2 focus-within:ring-rose-500/20' : 'border-gray-300 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',
-        disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white',
+        hasError ? 'border-rose-500 bg-rose-50/40 focus-within:border-rose-600 focus-within:ring-2 focus-within:ring-rose-500/20 dark:bg-rose-950/40 dark:border-rose-500' : 'border-gray-300 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 dark:border-slate-600',
+        disabled ? 'bg-gray-100 cursor-not-allowed dark:bg-slate-900' : 'bg-white dark:bg-slate-800',
       ]">
       <span v-for="(tag, index) in internalTags" :key="index" class="flex items-center px-2 py-1 rounded-full text-primary bg-primary/10">
         {{ tag }}
@@ -25,16 +25,16 @@
         @blur="addTag"
         :placeholder="placeholder"
         :disabled="disabled"
-        :class="['flex-1 p-1 bg-transparent border-none focus:outline-none', disabled ? 'text-gray-400 cursor-not-allowed' : '']"
+        :class="['flex-1 p-1 bg-transparent border-none focus:outline-none dark:text-slate-100 dark:placeholder-slate-500', disabled ? 'text-gray-400 cursor-not-allowed dark:text-slate-500' : '']"
       />
     </div>
     <!-- Error message -->
-    <div class="text-sm text-rose-700" v-if="hasError && error !== true && error !== ''">
+    <div class="text-sm text-rose-700 dark:text-rose-400" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
 
     <!-- Info message -->
-    <div class="text-sm text-gray-500" v-if="info != null">
+    <div class="text-sm text-gray-500 dark:text-slate-400" v-if="info != null">
       {{ info }}
     </div>
   </div>
@@ -100,4 +100,7 @@ export default {
 input::-webkit-input-placeholder {
   color: #9ca3af; /* Tailwind gray-400 */
 }
+.dark input::-webkit-input-placeholder {
+  color: #64748b; /* Tailwind slate-500 */
+}
 </style>

package/src/ui/kTextArea.vue

@@ -4,7 +4,7 @@
       v-if="label != null"
       :for="inputId"
       class="inputLabel"
-      :class="hasError ? 'text-red-500' : 'text-primary/90'"
+      :class="hasError ? 'text-red-500 dark:text-rose-400' : 'text-primary/90'"
     >
       {{ label }}
     </label>
@@ -22,11 +22,11 @@
       :aria-describedby="describedById"
     />
 
-    <div :id="errorId" class="mt-1 text-red-500" v-if="hasError && error !== true && error !== ''">
+    <div :id="errorId" class="mt-1 text-red-500 dark:text-rose-400" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
 
-    <div :id="infoId" class="mt-1 text-primary/80" v-if="info != null">
+    <div :id="infoId" class="mt-1 text-primary/80 dark:text-slate-400" v-if="info != null">
       {{ info }}
     </div>
   </div>
@@ -74,9 +74,9 @@ export default {
     },
     textareaClass() {
       return [
-        'w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400',
-        this.hasError ? 'border-red-500 focus:ring focus:ring-red-300' : '',
-        this.disabled ? '!bg-gray-100 !text-gray-400 !cursor-not-allowed' : '',
+        'w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500',
+        this.hasError ? 'border-red-500 focus:ring focus:ring-red-300 dark:border-rose-500 dark:focus:ring-rose-500/20' : '',
+        this.disabled ? '!bg-gray-100 !text-gray-400 !cursor-not-allowed dark:!bg-slate-900 dark:!text-slate-500 dark:!border-slate-700' : '',
       ]
     },
   },

package/src/ui/kToolbar.vue

@@ -7,7 +7,7 @@
     :class="[
       'k-toolbar relative w-full',
       dense ? 'p-0 md:p-0' : 'px-3 md:px-4 py-2.5',
-      variant === 'plain' ? 'bg-transparent border-0 rounded-none shadow-none px-0 md:px-0' : 'border rounded-lg bg-white shadow-sm border-primary/20',
+      variant === 'plain' ? 'bg-transparent border-0 rounded-none shadow-none px-0 md:px-0' : 'border rounded-lg bg-white shadow-sm border-primary/20 dark:bg-slate-800 dark:border-slate-700',
       disabled ? 'pointer-events-none opacity-60' : '',
     ]">
     <div class="flex flex-wrap items-center gap-2 md:gap-3">
@@ -29,7 +29,7 @@
         ref="menuTriggerRef"
         type="button"
         v-show="isCompact"
-        class="inline-flex items-center justify-center p-2 ml-auto border rounded-md border-primary/30 text-slate-700 hover:bg-primary/10"
+        class="inline-flex items-center justify-center p-2 ml-auto border rounded-md border-primary/30 text-slate-700 hover:bg-primary/10 dark:border-slate-600 dark:text-slate-300"
         :aria-label="mobileMenuOpen ? 'Close toolbar actions menu' : 'Open toolbar actions menu'"
         :aria-expanded="mobileMenuOpen.toString()"
         @click="toggleMobileMenu">
@@ -69,9 +69,9 @@
         role="dialog"
         aria-modal="true"
         aria-label="Toolbar actions"
-        class="absolute bottom-0 left-0 right-0 p-3 border-t shadow-2xl rounded-t-2xl bg-white/95 backdrop-blur-sm border-primary/20"
+        class="absolute bottom-0 left-0 right-0 p-3 border-t shadow-2xl rounded-t-2xl bg-white/95 backdrop-blur-sm border-primary/20 dark:bg-slate-800/95 dark:border-slate-700"
         style="padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));">
-        <div class="flex items-center justify-between pb-2 mb-2 border-b border-primary/20">
+        <div class="flex items-center justify-between pb-2 mb-2 border-b border-primary/20 dark:border-slate-700">
           <h3 class="text-sm font-semibold text-primary">Actions</h3>
           <button type="button" class="p-2 rounded-md hover:bg-primary/10" aria-label="Close actions menu" @click="closeMobileMenu()">
             <kIcon name="X" :size="18" />
@@ -89,9 +89,9 @@
               disabled || action.disabled || action.loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary/10 active:bg-primary/15',
             ]"
             @click="handleMobileAction(action)">
-            <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600" />
-            <span class="text-sm font-medium text-slate-900">{{ action.label }}</span>
-            <span v-if="action.loading" class="w-4 h-4 ml-auto border-2 rounded-full border-slate-300 border-t-transparent animate-spin"></span>
+            <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600 dark:text-slate-400" />
+            <span class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ action.label }}</span>
+            <span v-if="action.loading" class="w-4 h-4 ml-auto border-2 rounded-full border-slate-300 border-t-transparent animate-spin dark:border-slate-600"></span>
           </button>
         </div>
       </section>

package/src/ui/kTree.vue

@@ -274,4 +274,26 @@ export default {
   margin-bottom: 0 !important;
   padding: 0 !important;
 }
+
+.dark .k-tree {
+  background: transparent;
+  color: #cbd5e1;
+}
+
+.dark .k-tree-node-content:hover {
+  background: #1e293b;
+}
+
+.dark .k-tree-node-content--selected {
+  background: #14532d;
+  color: #86efac;
+}
+
+.dark .k-tree-node-toggler {
+  color: #94a3b8;
+}
+
+.dark .k-tree-node-toggler:hover {
+  background: #334155;
+}
 </style>

package/src/ui/kUploader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto bg-white" :class="disabled ? 'pointer-events-none opacity-50' : ''">
+  <div class="mx-auto bg-white dark:bg-transparent" :class="disabled ? 'pointer-events-none opacity-50' : ''">
     <div
       v-if="multiple || (!multiple && files.length == 0)"
       @dragover.prevent="onDragover"
@@ -7,12 +7,12 @@
       @drop.prevent="onDrop"
       :class="[
         'border-2 border-dashed rounded-lg p-8 text-center transition-colors mb-8',
-        dragover ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary/50',
+        dragover ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary/50 dark:border-slate-600 dark:hover:border-primary/50',
       ]"
     >
       <div class="flex flex-col items-center justify-center space-y-4">
         <UploadCloudIcon class="w-12 h-12 text-primary/60" />
-        <p class="text-lg font-medium text-gray-700">
+        <p class="text-lg font-medium text-gray-700 dark:text-slate-200">
           Σύρετε το αρχείο εδώ, ή
           <label
             for="file-input"
@@ -21,7 +21,7 @@
             αναζητήστε
           </label>
         </p>
-        <p class="text-sm text-gray-500">
+        <p class="text-sm text-gray-500 dark:text-slate-400">
           Supported file types: {{ fileTypes.join(', ') }} (max {{ maxSize }})
         </p>
       </div>
@@ -42,13 +42,13 @@
         <li
           v-for="file in files"
           :key="file.name"
-          class="flex items-center justify-between p-4 bg-white rounded-lg shadow"
+          class="flex items-center justify-between p-4 bg-white rounded-lg shadow dark:bg-slate-800"
         >
           <div class="flex items-center space-x-4">
             <FileIcon class="w-8 h-8 text-primary/60" />
             <div>
-              <p class="text-sm font-medium text-gray-700">{{ file.fileName }}</p>
-              <p class="text-xs text-gray-500">{{ formatFileSize(file.fileSize) }}</p>
+              <p class="text-sm font-medium text-gray-700 dark:text-slate-200">{{ file.fileName }}</p>
+              <p class="text-xs text-gray-500 dark:text-slate-400">{{ formatFileSize(file.fileSize) }}</p>
             </div>
           </div>
           <div class="flex items-center space-x-4">
@@ -63,7 +63,7 @@
             <CheckCircleIcon class="w-5 h-5 text-green-500" />
             <button
               @click="removeFile(file)"
-              class="text-gray-400 hover:text-red-500 focus:outline-none"
+              class="text-gray-400 hover:text-red-500 focus:outline-none dark:text-slate-500 dark:hover:text-red-400"
               :disabled="disabled"
               aria-label="Remove file"
             >

package/src/ui/themes/kInput.theme.js

@@ -1,19 +1,19 @@
 export const K_INPUT_THEME = {
   label: "text-primary/90",
-  labelDisabled: "text-slate-500",
-  labelError: "text-rose-800",
+  labelDisabled: "text-slate-500 dark:text-slate-400",
+  labelError: "text-rose-800 dark:text-rose-400",
   baseInput:
-    "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-slate-900 bg-white placeholder-gray-400 focus:ring-2 focus:ring-primary/25 focus:border-primary",
+    "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-slate-900 bg-white placeholder-gray-400 focus:ring-2 focus:ring-primary/25 focus:border-primary dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
   withRightAdornment: "pr-10",
   withPasswordToggle: "pr-14",
-  disabled: "!bg-slate-50 !text-slate-400 !border-slate-200 !shadow-none cursor-not-allowed placeholder-slate-400",
-  errorInput: "border-rose-500 bg-rose-50/40 focus:border-rose-600 focus:ring-rose-500/20",
-  infoText: "text-sm text-slate-600",
-  errorText: "text-sm text-rose-700",
+  disabled: "!bg-slate-50 !text-slate-400 !border-slate-200 !shadow-none cursor-not-allowed placeholder-slate-400 dark:!bg-slate-900 dark:!text-slate-500 dark:!border-slate-700",
+  errorInput: "border-rose-500 bg-rose-50/40 focus:border-rose-600 focus:ring-rose-500/20 dark:bg-rose-950/40 dark:border-rose-500 dark:focus:ring-rose-500/20",
+  infoText: "text-sm text-slate-600 dark:text-slate-400",
+  errorText: "text-sm text-rose-700 dark:text-rose-400",
   trailingIcon: "absolute w-4 h-4 text-primary/70 -translate-y-1/2 pointer-events-none right-3 top-1/2",
-  trailingIconDisabled: "text-slate-400",
-  passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-3 text-slate-700",
+  trailingIconDisabled: "text-slate-400 dark:text-slate-500",
+  passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-3 text-slate-700 dark:text-slate-300",
   passwordToggleButton:
     "text-xs font-medium select-none rounded px-1 py-0.5 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-  passwordToggleButtonDisabled: "text-slate-400 cursor-not-allowed hover:bg-transparent",
+  passwordToggleButtonDisabled: "text-slate-400 cursor-not-allowed hover:bg-transparent dark:text-slate-500",
 };