From 200aa2232598aa6940a8a54d1912cf004b27dff9 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Mon, 20 Jul 2026 17:17:57 +0200
Subject: [PATCH] fix dark components and fix documentation

---
 .../BIMDataAvatar/BIMDataAvatar.vue           | 13 ++----
 .../BIMDataCheckbox/BIMDataCheckbox.vue       | 12 ++---
 .../BIMDataColorSelector.vue                  | 13 +-----
 .../BIMDataDatePicker/BIMDataDatePicker.vue   | 12 +----
 .../components/DateInput.vue                  | 14 ++----
 .../BIMDataDropdownList.vue                   | 11 +----
 .../BIMDataDropdownMenu.vue                   | 17 +++----
 .../BIMDataIcon/BIMDataIcon.vue               | 13 ++----
 src/BIMDataComponents/BIMDataIcon/Icon.vue    | 13 ++----
 .../BIMDataInfobox/BIMDataInfobox.vue         | 12 ++---
 .../BIMDataInput/BIMDataInput.vue             | 12 ++---
 .../BIMDataMenu/BIMDataMenu.vue               | 16 ++-----
 .../BIMDataMenuInline/BIMDataMenuInline.vue   | 11 +----
 .../BIMDataNavigation/BIMDataNavigation.vue   | 13 +-----
 .../BIMDataPaginatedList.vue                  | 11 +----
 .../BIMDataPagination/BIMDataPagination.vue   | 11 +----
 .../BIMDataRadio/BIMDataRadio.vue             | 14 ++----
 .../BIMDataSafeZoneInline.vue                 | 18 +++-----
 .../BIMDataSearchAutocomplete.vue             | 16 +++----
 .../BIMDataSelect/BIMDataSelectMulti.vue      | 11 +----
 .../BIMDataSelect/BIMDataSelectSingle.vue     | 12 +----
 .../BIMDataSlider/BIMDataSlider.vue           | 16 ++-----
 .../BIMDataTable/BIMDataTable.vue             |  9 ++--
 .../BIMDataTabs/BIMDataTabs.vue               | 11 +----
 .../BIMDataText/BIMDataText.vue               | 21 +++++----
 .../BIMDataTextarea/BIMDataTextarea.vue       | 16 ++-----
 .../BIMDataToggle/BIMDataToggle.vue           | 12 ++---
 src/BIMDataComponents/mixins/darkTheme.js     | 45 +++++++++++++++++++
 src/BIMDataComponents/mixins/useDarkTheme.js  | 38 ++++++++++++++++
 src/web/views/Components/Input/Input.vue      |  1 +
 src/web/views/Components/Radio/Radio.vue      | 25 ++++-------
 31 files changed, 188 insertions(+), 281 deletions(-)
 create mode 100644 src/BIMDataComponents/mixins/darkTheme.js
 create mode 100644 src/BIMDataComponents/mixins/useDarkTheme.js

diff --git a/src/BIMDataComponents/BIMDataAvatar/BIMDataAvatar.vue b/src/BIMDataComponents/BIMDataAvatar/BIMDataAvatar.vue
index c062bf3a..159b1fb0 100644
--- a/src/BIMDataComponents/BIMDataAvatar/BIMDataAvatar.vue
+++ b/src/BIMDataComponents/BIMDataAvatar/BIMDataAvatar.vue
@@ -25,12 +25,6 @@ import { computed } from "vue";
 import BIMDataIconUser from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconUser.vue";
 
 export default {
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
   props: {
     user: {
       type: Object,
@@ -39,7 +33,7 @@ export default {
     size: {
       type: [Number, String],
       default: 32,
-      validate: (value) => value >= 32,
+      validate: value => value >= 32,
     },
     initialsSize: {
       type: [Number, String],
@@ -47,7 +41,8 @@ export default {
     color: {
       type: String,
       default: "primary",
-      validate: (value) => ["primary", "secondary", "silver-light"].includes(value),
+      validate: value =>
+        ["primary", "secondary", "silver-light"].includes(value),
     },
   },
   setup(props) {
@@ -55,7 +50,7 @@ export default {
       (
         `${props.user.firstname?.[0] ?? ""}` +
         `${props.user.lastname?.[0] ?? ""}`
-      ).toUpperCase()
+      ).toUpperCase(),
     );
 
     return {
diff --git a/src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue b/src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue
index ba0ad9e2..721bae45 100644
--- a/src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue
+++ b/src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue
@@ -14,15 +14,12 @@
 </template>
 
 <script>
+import darkThemeMixin from "../mixins/darkTheme.js";
+
 export default {
   name: "BIMDataCheckbox",
   inheritAttrs: false,
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     text: {
       type: String,
@@ -76,9 +73,6 @@ export default {
         height: `clamp(14px, calc(${size} * 1.1), 20px)`,
       };
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     onClick() {
diff --git a/src/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue b/src/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue
index e42a3cea..c57b604a 100644
--- a/src/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue
+++ b/src/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue
@@ -23,6 +23,7 @@
 <script>
 import { colors } from "./colors.js";
 import BIMDataCard from "../BIMDataCard/BIMDataCard.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 const colorLines = Object.entries(colors).reduce((acc, cur, i) => {
   if (i % 5 === 0) {
@@ -37,12 +38,7 @@ export default {
   components: {
     BIMDataCard,
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     modelValue: {
       type: String,
@@ -56,11 +52,6 @@ export default {
       colorLines,
     };
   },
-  computed: {
-    isDark() {
-      return this.darkThemeRef;
-    },
-  }
 };
 </script>
 
diff --git a/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue b/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue
index 5f0dda40..ad02ee18 100644
--- a/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue
+++ b/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue
@@ -187,6 +187,7 @@ import DisabledDate from "./utils/DisabledDate.js";
 import inputProps from "./mixins/inputProps.vue";
 import makeDateUtils from "./utils/DateUtils.js";
 import navMixin from "./mixins/navMixin.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 import PickerDay from "./components/PickerDay.vue";
 import PickerMonth from "./components/PickerMonth.vue";
 import PickerYear from "./components/PickerYear.vue";
@@ -210,17 +211,11 @@ export default {
     PickerMonth,
     PickerYear,
   },
-  mixins: [inputProps, navMixin],
+  mixins: [inputProps, navMixin, darkThemeMixin],
   model: {
     prop: "modelValue",
     event: "update:modelValue",
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
   props: {
     autoCloseRange: {
       type: Boolean,
@@ -444,9 +439,6 @@ export default {
     translation() {
       return this.language;
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   watch: {
     disabledDates: {
diff --git a/src/BIMDataComponents/BIMDataDatePicker/components/DateInput.vue b/src/BIMDataComponents/BIMDataDatePicker/components/DateInput.vue
index ffc9a22a..0e858919 100644
--- a/src/BIMDataComponents/BIMDataDatePicker/components/DateInput.vue
+++ b/src/BIMDataComponents/BIMDataDatePicker/components/DateInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'not-empty': formattedValue, 'dark': isDark }">
+  <div :class="{ 'not-empty': formattedValue, dark: isDark }">
     <slot name="beforeDateInput" />
     <!-- Calendar Button -->
     <button
@@ -76,17 +76,12 @@ import BIMDataButton from "../../BIMDataButton/BIMDataButton.vue";
 
 import makeDateUtils from "../utils/DateUtils.js";
 import inputProps from "../mixins/inputProps.vue";
+import darkThemeMixin from "../../mixins/darkTheme.js";
 
 export default {
   name: "DateInput",
   components: { BIMDataIconDelete, BIMDataButton },
-  mixins: [inputProps],
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [inputProps, darkThemeMixin],
   props: {
     isOpen: {
       type: Boolean,
@@ -128,9 +123,6 @@ export default {
 
       return this.formatDate(this.selectedDate);
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   watch: {
     showCalendarOnFocus: {
diff --git a/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue b/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
index 92c661fe..42637c86 100644
--- a/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
+++ b/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
@@ -74,6 +74,7 @@ import clickaway from "../../BIMDataDirectives/click-away.js";
 import BIMDataIconChevron from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue";
 import BIMDataPaginatedList from "../BIMDataPaginatedList/BIMDataPaginatedList.vue";
 import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
@@ -82,12 +83,7 @@ export default {
     BIMDataButton,
   },
   directives: { clickaway },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     list: {
       type: Array,
@@ -186,9 +182,6 @@ export default {
         );
       }
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     onHeaderClick() {
diff --git a/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue b/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
index 65a35cdf..c05420b2 100644
--- a/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
+++ b/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="bimdata-dropdown" v-clickaway="away" :class="{dark: isDark, border}">
+  <div
+    class="bimdata-dropdown"
+    v-clickaway="away"
+    :class="{ dark: isDark, border }"
+  >
     <div
       class="bimdata-dropdown__content"
       :class="{ active: displayed, disabled }"
@@ -75,16 +79,12 @@
 import clickaway from "../../BIMDataDirectives/click-away.js";
 import BIMDataIconChevron from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue";
 import BIMDataTextbox from "../../BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   directives: { clickaway },
   components: { BIMDataIconChevron, BIMDataTextbox },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     disabled: {
       type: Boolean,
@@ -142,9 +142,6 @@ export default {
         visibility: this.menuHeader ? "visible" : "hidden",
       };
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   watch: {
     header: {
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue
index 42c5f775..e21992f7 100644
--- a/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue
@@ -11,6 +11,7 @@
 
 <script>
 import iconsColors from "../../assets/iconsColors.js";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 const sizeToPixel = {
   xxxs: 10,
@@ -26,12 +27,7 @@ const sizeToPixel = {
 
 export default {
   name: "BIMDataIcon",
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     name: {
       type: String,
@@ -81,7 +77,7 @@ export default {
         "icon-stroke": this.stroke,
         [`icon-fill--${this.color}`]: this.fill && this.color,
         [`icon-stroke--${this.color}`]: this.stroke && this.color,
-        "dark": this.isDark
+        dark: this.isDark,
       };
     },
     style() {
@@ -96,9 +92,6 @@ export default {
       };
       return style;
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     getPixelSize() {
diff --git a/src/BIMDataComponents/BIMDataIcon/Icon.vue b/src/BIMDataComponents/BIMDataIcon/Icon.vue
index b2090d60..64936a41 100644
--- a/src/BIMDataComponents/BIMDataIcon/Icon.vue
+++ b/src/BIMDataComponents/BIMDataIcon/Icon.vue
@@ -15,6 +15,7 @@
 
 <script>
 import iconsColors from "../../assets/iconsColors.js";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 const sizeToPixel = {
   xxxs: 10,
@@ -30,12 +31,7 @@ const sizeToPixel = {
 
 export default {
   name: "BIMDataIcon",
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     color: {
       type: String,
@@ -81,7 +77,7 @@ export default {
         "icon-stroke": this.stroke,
         [`icon-fill--${this.color}`]: this.fill && this.color,
         [`icon-stroke--${this.color}`]: this.stroke && this.color,
-        "dark": this.isDark
+        dark: this.isDark,
       };
     },
     style() {
@@ -96,9 +92,6 @@ export default {
       };
       return style;
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     getPixelSize() {
diff --git a/src/BIMDataComponents/BIMDataInfobox/BIMDataInfobox.vue b/src/BIMDataComponents/BIMDataInfobox/BIMDataInfobox.vue
index d3dc32f4..ed9674ca 100644
--- a/src/BIMDataComponents/BIMDataInfobox/BIMDataInfobox.vue
+++ b/src/BIMDataComponents/BIMDataInfobox/BIMDataInfobox.vue
@@ -16,8 +16,9 @@
 </template>
 
 <script setup>
-import { inject, computed } from "vue";
-defineProps({
+import { useDarkTheme, darkProp } from "../mixins/useDarkTheme.js";
+
+const props = defineProps({
   text: {
     type: String,
     default: "",
@@ -40,11 +41,10 @@ defineProps({
       ].includes(v),
     default: "neutral",
   },
+  dark: darkProp,
 });
-const darkThemeRef = inject("BIMDATA_DESIGN_SYSTEM_DARK_THEME", {
-  value: false,
-});
-const isDark = computed(() => darkThemeRef?.value);
+
+const isDark = useDarkTheme(props);
 </script>
 
 <style scoped>
diff --git a/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue b/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
index b909ed1b..cf63243a 100644
--- a/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
+++ b/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
@@ -62,19 +62,16 @@
 </template>
 
 <script>
+import darkThemeMixin from "../mixins/darkTheme.js";
+
 let uuid = 0;
 
 export default {
+  mixins: [darkThemeMixin],
   model: {
     prop: "modelValue",
     event: "update:modelValue",
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
   props: {
     autocomplete: {
       type: Boolean,
@@ -164,9 +161,6 @@ export default {
       // Si `label` est vide, utilise la valeur de `placeholder`
       return this.label || this.placeholder;
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
     computedBackgroundColor() {
       return this.isDark ? this.backgroundColorDark : this.backgroundColor;
     },
diff --git a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
index 8e1d8669..0a6f2f60 100644
--- a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
+++ b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
@@ -24,8 +24,7 @@
       @mouseleave="hoveredItemKey = null"
       :style="{
         color: item.color,
-        'background-color':
-            hoveredItemKey === item.key ? item.background : '',
+        'background-color': hoveredItemKey === item.key ? item.background : '',
       }"
     >
       <div v-if="item.groupTitle" class="bimdata-menu__item__title">
@@ -82,6 +81,7 @@
 import clickaway from "../../BIMDataDirectives/click-away.js";
 import BIMDataIconChevron from "../../BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue";
 import BIMDataTextbox from "../../BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   directives: { clickaway },
@@ -89,12 +89,7 @@ export default {
     BIMDataIconChevron,
     BIMDataTextbox,
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     menuItems: {
       type: Array,
@@ -150,11 +145,6 @@ export default {
       this.hoveredItemKey = item.key;
     },
   },
-  computed: {
-    isDark() {
-      return this.darkThemeRef;
-    },
-  },
 };
 </script>
 
diff --git a/src/BIMDataComponents/BIMDataMenuInline/BIMDataMenuInline.vue b/src/BIMDataComponents/BIMDataMenuInline/BIMDataMenuInline.vue
index ff3f7f20..df6a97dd 100644
--- a/src/BIMDataComponents/BIMDataMenuInline/BIMDataMenuInline.vue
+++ b/src/BIMDataComponents/BIMDataMenuInline/BIMDataMenuInline.vue
@@ -47,6 +47,7 @@ import {
   BIMDataIconClose,
   BIMDataIconEllipsis,
 } from "../BIMDataIcon/BIMDataIconStandalone/index.js";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   directives: { clickaway },
@@ -55,12 +56,7 @@ export default {
     BIMDataIconClose,
     BIMDataIconEllipsis,
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     isSubmenuRight: {
       type: Boolean,
@@ -103,9 +99,6 @@ export default {
       }
       return `right: ${this.width}`;
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     away() {
diff --git a/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue b/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
index 5c1ffa70..22a39d05 100644
--- a/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
+++ b/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
@@ -74,6 +74,7 @@ import {
   BIMDataIconDoubleChevron,
 } from "../BIMDataIcon/BIMDataIconStandalone/index.js";
 import BIMDataButton from "../../BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
@@ -81,12 +82,7 @@ export default {
     BIMDataIconDoubleChevron,
     BIMDataButton,
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     first: {
       type: Boolean,
@@ -126,11 +122,6 @@ export default {
     },
   },
   emits: ["first", "previous", "next", "last"],
-  computed: {
-    isDark() {
-      return this.darkThemeRef;
-    },
-  },
 };
 </script>
 
diff --git a/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue b/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
index 49f3caa3..7da2c955 100644
--- a/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
+++ b/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
@@ -41,18 +41,14 @@
 <script>
 import BIMDataPagination from "../BIMDataPagination/BIMDataPagination.vue";
 import BIMDataSpinner from "../BIMDataSpinner/BIMDataSpinner.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
     BIMDataPagination,
     BIMDataSpinner,
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     list: {
       type: Array,
@@ -129,9 +125,6 @@ export default {
         !!this.backgroundColor && this.backgroundColor !== "var(--color-white)"
       );
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   watch: {
     list: {
diff --git a/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue b/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
index a50d7850..5ee0a534 100644
--- a/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
+++ b/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
@@ -33,18 +33,14 @@
 <script>
 import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
 import BIMDataNavigation from "../BIMDataNavigation/BIMDataNavigation.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
     BIMDataNavigation,
     BIMDataButton,
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     length: {
       type: Number,
@@ -93,9 +89,6 @@ export default {
         !!this.backgroundColor && this.backgroundColor !== "var(--color-white)"
       );
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     firstPage() {
diff --git a/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue b/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue
index f79202fb..1f3ee8ae 100644
--- a/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue
+++ b/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue
@@ -6,7 +6,7 @@
       disabled,
       'bimdata-radio--checked': checked,
       'bimdata-radio--big': big,
-      dark: isDark
+      dark: isDark,
     }"
     :disabled="disabled"
     @click="onClick"
@@ -23,17 +23,14 @@
 </template>
 
 <script>
+import darkThemeMixin from "../mixins/darkTheme.js";
+
 export default {
+  mixins: [darkThemeMixin],
   model: {
     prop: "modelValue",
     event: "update:modelValue",
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
   props: {
     big: {
       type: Boolean,
@@ -57,9 +54,6 @@ export default {
     checked() {
       return this.modelValue === this.value;
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     onClick() {
diff --git a/src/BIMDataComponents/BIMDataSafeZoneInline/BIMDataSafeZoneInline.vue b/src/BIMDataComponents/BIMDataSafeZoneInline/BIMDataSafeZoneInline.vue
index 73432ffb..02159624 100644
--- a/src/BIMDataComponents/BIMDataSafeZoneInline/BIMDataSafeZoneInline.vue
+++ b/src/BIMDataComponents/BIMDataSafeZoneInline/BIMDataSafeZoneInline.vue
@@ -17,7 +17,10 @@
       :color="isDark ? 'quaternary' : 'granite'"
       @click="$emit('cancel-delete')"
     >
-      <BIMDataIconClose size="xxs" :color="isDark ? 'quaternary-lighter' : 'granite'" />
+      <BIMDataIconClose
+        size="xxs"
+        :color="isDark ? 'quaternary-lighter' : 'granite'"
+      />
     </BIMDataButton>
   </div>
 </template>
@@ -25,18 +28,14 @@
 <script>
 import BIMDataIconClose from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconClose.vue";
 import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
     BIMDataIconClose,
     BIMDataButton,
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     reverse: {
       type: Boolean,
@@ -44,11 +43,6 @@ export default {
     },
   },
   emits: ["confirm-delete", "cancel-delete"],
-  computed: {
-    isDark() {
-      return this.darkThemeRef;
-    },
-  }
 };
 </script>
 
diff --git a/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue b/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue
index 44aefca2..96ff6919 100644
--- a/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue
+++ b/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue
@@ -2,7 +2,10 @@
   <div
     class="bimdata-search-autocomplete"
     v-clickaway="away"
-    :class="[{ open: openResults, dark: isDark }, `bimdata-search-autocomplete--${color}`]"
+    :class="[
+      { open: openResults, dark: isDark },
+      `bimdata-search-autocomplete--${color}`,
+    ]"
   >
     <div class="bimdata-search-autocomplete__input flex items-center">
       <span class="bimdata-search-icon flex">
@@ -86,6 +89,7 @@ import {
   BIMDataIconSearch,
 } from "../BIMDataIcon/BIMDataIconStandalone/index.js";
 import BIMDataTextbox from "../../BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
@@ -94,12 +98,7 @@ export default {
     BIMDataTextbox,
   },
   directives: { clickaway },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     items: {
       type: Array,
@@ -168,9 +167,6 @@ export default {
         this.search !== "" && this.results.length !== 0 && this.isOpen === true
       );
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     onChange() {
diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue
index 41351da0..9f36a504 100644
--- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue
+++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue
@@ -86,6 +86,7 @@ import clickaway from "../../BIMDataDirectives/click-away.js";
 // Components
 import BIMDataCheckbox from "../BIMDataCheckbox/BIMDataCheckbox.vue";
 import BIMDataIconChevron from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
@@ -95,16 +96,11 @@ export default {
   directives: {
     clickaway,
   },
+  mixins: [darkThemeMixin],
   model: {
     prop: "modelValue",
     event: "update:modelValue",
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
   props: {
     color: {
       type: String,
@@ -230,9 +226,6 @@ export default {
         }
       }
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     toggle() {
diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue
index 3a3daf68..f5842099 100644
--- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue
+++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue
@@ -83,6 +83,7 @@
 <script>
 import clickaway from "../../BIMDataDirectives/click-away.js";
 import BIMDataIconChevron from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
@@ -91,16 +92,11 @@ export default {
   directives: {
     clickaway,
   },
+  mixins: [darkThemeMixin],
   model: {
     prop: "modelValue",
     event: "update:modelValue",
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
   props: {
     width: [String, Number],
     height: [String, Number],
@@ -204,10 +200,6 @@ export default {
         return label.includes(lowerCaseSearchText);
       });
     },
-
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   methods: {
     toggle() {
diff --git a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
index 6beb10ef..522474d1 100644
--- a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
+++ b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bimdata-slider" :class="{dark: isDark}">
+  <div class="bimdata-slider" :class="{ dark: isDark }">
     <input
       ref="input"
       class="bimdata-slider-input"
@@ -22,13 +22,10 @@
 </template>
 
 <script>
+import darkThemeMixin from "../mixins/darkTheme.js";
+
 export default {
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     min: {
       type: [Number, String],
@@ -101,11 +98,6 @@ export default {
       this.tooltipPosition = `calc(${newVal}% + (${8 - newVal * 0.18}px))`;
     },
   },
-  computed: {
-    isDark() {
-      return this.darkThemeRef;
-    },
-  },
 };
 </script>
 
diff --git a/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue b/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
index cf9e4444..361d3cb4 100644
--- a/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
+++ b/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
@@ -164,9 +164,10 @@
 </template>
 
 <script>
-import { computed, inject, ref, watch, shallowReactive } from "vue";
+import { computed, ref, watch, shallowReactive } from "vue";
 import { useRowSelection } from "./table-row-selection.js";
 import clickaway from "../../BIMDataDirectives/click-away.js";
+import { useDarkTheme, darkProp } from "../mixins/useDarkTheme.js";
 
 // Components
 import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
@@ -234,6 +235,7 @@ export default {
       type: Function,
       default: () => false,
     },
+    dark: darkProp,
   },
   emits: [
     "update:selection",
@@ -245,10 +247,7 @@ export default {
     "row-drop",
   ],
   setup(props, { emit }) {
-    const darkThemeRef = inject("BIMDATA_DESIGN_SYSTEM_DARK_THEME");
-    const isDark = computed(() => {
-      return darkThemeRef.value;
-    });
+    const isDark = useDarkTheme(props);
     // Compute rows keys based on props values.
     const computedRows = computed(() =>
       props.rows.map((row, i) => ({ key: row[props.rowKey] ?? i, data: row })),
diff --git a/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue b/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue
index 620143b4..61269ace 100644
--- a/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue
+++ b/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue
@@ -42,18 +42,14 @@
 <script>
 import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
 import BIMDataIconChevron from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue";
+import darkThemeMixin from "../mixins/darkTheme.js";
 
 export default {
   components: {
     BIMDataButton,
     BIMDataIconChevron,
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     width: {
       type: [String, Number],
@@ -93,9 +89,6 @@ export default {
     tabWidth() {
       return Number.isNaN(+this.tabSize) ? this.tabSize : `${this.tabSize}px`;
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   watch: {
     tabs() {
diff --git a/src/BIMDataComponents/BIMDataText/BIMDataText.vue b/src/BIMDataComponents/BIMDataText/BIMDataText.vue
index 39d640e8..b37ee566 100644
--- a/src/BIMDataComponents/BIMDataText/BIMDataText.vue
+++ b/src/BIMDataComponents/BIMDataText/BIMDataText.vue
@@ -1,17 +1,19 @@
 <template>
-  <component :is="component" :style="style" :class="classes" class="bimdata-text">
+  <component
+    :is="component"
+    :style="style"
+    :class="classes"
+    class="bimdata-text"
+  >
     <slot></slot>
   </component>
 </template>
 
 <script>
+import darkThemeMixin from "../mixins/darkTheme.js";
+
 export default {
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
+  mixins: [darkThemeMixin],
   props: {
     component: {
       type: String,
@@ -139,11 +141,8 @@ export default {
         }
       }
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
 };
 </script>
 
-<style scoped src="./BIMDataText.css"></style>
\ No newline at end of file
+<style scoped src="./BIMDataText.css"></style>
diff --git a/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue b/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue
index 080d4eb5..332846fe 100644
--- a/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue
+++ b/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue
@@ -29,17 +29,14 @@
 </template>
 
 <script>
+import darkThemeMixin from "../mixins/darkTheme.js";
+
 export default {
+  mixins: [darkThemeMixin],
   model: {
     prop: "modelValue",
     event: "update:modelValue",
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
   props: {
     name: {
       type: [String, Number],
@@ -97,7 +94,7 @@ export default {
       successAndError => {
         if (successAndError)
           throw new Error("Textarea state cannot be both success and error.");
-      }
+      },
     );
   },
   mounted() {
@@ -124,11 +121,6 @@ export default {
       }
     },
   },
-  computed: {
-    isDark() {
-      return this.darkThemeRef;
-    },
-  },
 };
 </script>
 
diff --git a/src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue b/src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue
index a9d42d97..2b64ff92 100644
--- a/src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue
+++ b/src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue
@@ -17,17 +17,14 @@
 </template>
 
 <script>
+import darkThemeMixin from "../mixins/darkTheme.js";
+
 export default {
+  mixins: [darkThemeMixin],
   model: {
     prop: "modelValue",
     event: "update:modelValue",
   },
-  inject: {
-    darkThemeRef: {
-      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
-      default: () => ({ value: false }),
-    },
-  },
   props: {
     disabled: {
       type: Boolean,
@@ -53,9 +50,6 @@ export default {
         this.$emit("update:modelValue", newValue);
       },
     },
-    isDark() {
-      return this.darkThemeRef;
-    },
   },
   created() {
     // Math.random is random enough to avoid conflict
diff --git a/src/BIMDataComponents/mixins/darkTheme.js b/src/BIMDataComponents/mixins/darkTheme.js
new file mode 100644
index 00000000..e77d167a
--- /dev/null
+++ b/src/BIMDataComponents/mixins/darkTheme.js
@@ -0,0 +1,45 @@
+/**
+ * Shared mixin that exposes a normalized `isDark` computed to every
+ * BIMData component.
+ *
+ * Resolution order:
+ *   1. If the component receives an explicit `dark` prop (true or false),
+ *      that value wins — allowing a component to force light or dark
+ *      independently from any surrounding provider.
+ *   2. Otherwise, fall back to the value provided through the
+ *      `BIMDATA_DESIGN_SYSTEM_DARK_THEME` injection (a `Ref<boolean>` when
+ *      the design-system plugin is properly wired).
+ *   3. When neither a prop nor a provider is set, the component renders
+ *      in light mode (the default of the design-system).
+ *
+ * The prop uses `default: null` so we can distinguish between:
+ *   - `<Comp />`               → prop is null → follow the provider
+ *   - `<Comp dark />`          → prop is true → force dark
+ *   - `<Comp :dark="false" />` → prop is false → force light
+ */
+export default {
+  inject: {
+    darkThemeRef: {
+      from: "BIMDATA_DESIGN_SYSTEM_DARK_THEME",
+      default: null,
+    },
+  },
+  props: {
+    dark: {
+      type: Boolean,
+      default: null,
+    },
+  },
+  computed: {
+    isDark() {
+      if (this.dark === true) return true;
+      if (this.dark === false) return false;
+      const injected = this.darkThemeRef;
+      if (injected == null) return false;
+      if (typeof injected === "object" && "value" in injected) {
+        return !!injected.value;
+      }
+      return !!injected;
+    },
+  },
+};
diff --git a/src/BIMDataComponents/mixins/useDarkTheme.js b/src/BIMDataComponents/mixins/useDarkTheme.js
new file mode 100644
index 00000000..478eab94
--- /dev/null
+++ b/src/BIMDataComponents/mixins/useDarkTheme.js
@@ -0,0 +1,38 @@
+import { inject, computed } from "vue";
+
+/**
+ * Composition API equivalent of the `darkTheme` mixin.
+ *
+ * Resolution order:
+ *   1. Explicit `dark` prop (true / false) wins.
+ *   2. Otherwise, injected `BIMDATA_DESIGN_SYSTEM_DARK_THEME` (Ref<boolean>).
+ *   3. Default is light mode.
+ *
+ * @param {object} props The component props object (must expose `dark`).
+ * @returns {import("vue").ComputedRef<boolean>} A reactive `isDark` flag.
+ */
+export function useDarkTheme(props) {
+  const darkThemeRef = inject("BIMDATA_DESIGN_SYSTEM_DARK_THEME", null);
+
+  return computed(() => {
+    if (props?.dark === true) return true;
+    if (props?.dark === false) return false;
+    if (darkThemeRef == null) return false;
+    if (typeof darkThemeRef === "object" && "value" in darkThemeRef) {
+      return !!darkThemeRef.value;
+    }
+    return !!darkThemeRef;
+  });
+}
+
+/**
+ * Shared prop definition for the optional `dark` prop.
+ *
+ * Using `default: null` allows components to distinguish between
+ * "no prop provided" (fall back to the provider) and an explicit
+ * `false` (force light mode even inside a dark provider).
+ */
+export const darkProp = {
+  type: Boolean,
+  default: null,
+};
diff --git a/src/web/views/Components/Input/Input.vue b/src/web/views/Components/Input/Input.vue
index d379dbd5..37bb1840 100644
--- a/src/web/views/Components/Input/Input.vue
+++ b/src/web/views/Components/Input/Input.vue
@@ -34,6 +34,7 @@
             :borderRadius="borderRadiusInput"
             :isLabel="isLabel"
             :height="heightInput"
+            :dark="dark"
           >
             <template #leftInputIcon v-if="leftInputIcon">
               <BIMDataIconShow class="fill-granite-light" margin="6px" />
diff --git a/src/web/views/Components/Radio/Radio.vue b/src/web/views/Components/Radio/Radio.vue
index d0fb5f98..3ec3d876 100644
--- a/src/web/views/Components/Radio/Radio.vue
+++ b/src/web/views/Components/Radio/Radio.vue
@@ -20,6 +20,7 @@
             v-model="selectedValue"
             :disabled="isDisabled"
             :big="isBig"
+            :dark="isDark"
           />
           <BIMDataRadio
             text="Mode 1"
@@ -27,6 +28,7 @@
             v-model="selectedValue"
             :disabled="isDisabled"
             :big="isBig"
+            :dark="isDark"
           />
           <BIMDataRadio
             text="Mode 2"
@@ -34,6 +36,7 @@
             v-model="selectedValue"
             :disabled="isDisabled"
             :big="isBig"
+            :dark="isDark"
           />
           <div style="width: 100%; padding: 36px; text-align: center">
             {{ `Selected Value: ${selectedValue}` }}
@@ -43,11 +46,7 @@
         <template #parameters>
           <BIMDataCheckbox text="disabled" v-model="isDisabled" />
           <BIMDataCheckbox text="big" v-model="isBig" />
-          <BIMDataCheckbox
-            text="dark"
-            :model-value="isDark"
-            @update:modelValue="handleDarkCheckbox"
-          />
+          <BIMDataCheckbox text="dark" v-model="isDark" />
           <BIMDataInput v-model="text" placeholder="Text for mode 0" />
           <BIMDataButton
             color="primary"
@@ -73,6 +72,7 @@
               v-model="selectedValue"
               :disabled="{{ isDisabled }}"
               :big="{{ isBig }}"
+              :dark="{{ isDark }}"
             /&gt;
             &lt;BIMDataRadio
               text="Mode 1"
@@ -80,6 +80,7 @@
               v-model="selectedValue"
               :disabled="{{ isDisabled }}"
               :big="{{ isBig }}"
+              :dark="{{ isDark }}"
             /&gt;
             &lt;BIMDataRadio
               text="Mode 2"
@@ -87,6 +88,7 @@
               v-model="selectedValue"
               :disabled="{{ isDisabled }}"
               :big="{{ isBig }}"
+              :dark="{{ isDark }}"
             /&gt;
           </pre>
         </template>
@@ -133,8 +135,7 @@ export default {
       selectedValue: null,
       isDisabled: false,
       isBig: false,
-      isDarkManual: false,
-      isDarkManuallySet: false,
+      isDark: false,
       propsData,
       eventsData,
       slotsData,
@@ -147,21 +148,11 @@ export default {
         ? "theme-dark"
         : "theme-light";
     },
-    isDark() {
-      if (this.isDarkManuallySet) {
-        return this.isDarkManual;
-      }
-      return this.currentTheme === "theme-dark";
-    },
   },
   methods: {
     resetRadio() {
       this.selectedValue = null;
     },
-    handleDarkCheckbox(val) {
-      this.isDarkManual = val;
-      this.isDarkManuallySet = true;
-    },
   },
 };
 </script>