bimdata · LrxGaelle · Jul 21, 2026 · Jul 20, 2026
diff --git 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,23 +33,24 @@ export default {
     size: {
       type: [Number, String],
       default: 32,
-      validate: (value) => value >= 32,
+      validate: value => value >= 32,
     },
     initialsSize: {
       type: [Number, String],
     },
     color: {
       type: String,
       default: "primary",
-      validate: (value) => ["primary", "secondary", "silver-light"].includes(value),
+      validate: value =>
+        ["primary", "secondary", "silver-light"].includes(value),
     },
   },
   setup(props) {
     const initials = computed(() =>
       (
         `${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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
     },