diff --git a/css/backoffice/utils/variables/colors/_all.scss b/css/backoffice/utils/variables/colors/_all.scss
index bc56d42e5..d2dab10ad 100644
--- a/css/backoffice/utils/variables/colors/_all.scss
+++ b/css/backoffice/utils/variables/colors/_all.scss
@@ -6,4 +6,5 @@
 @import "base";
 @import "base-palette";
 @import "semantic-palette";
-@import "lifecycle-palette";
\ No newline at end of file
+@import "lifecycle-palette";
+@import "skeleton-palette";
\ No newline at end of file
diff --git a/css/backoffice/utils/variables/colors/_skeleton-palette.scss b/css/backoffice/utils/variables/colors/_skeleton-palette.scss
new file mode 100644
index 000000000..9b73f95bf
--- /dev/null
+++ b/css/backoffice/utils/variables/colors/_skeleton-palette.scss
@@ -0,0 +1,17 @@
+/*
+ * @copyright   Copyright (C) 2010-2023 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+/* Skeleton palette */
+/* - Colors used by skeletons svg to display placeholders */
+
+$ibo-skeleton-start-color: $ibo-color-grey-200 !default;
+$ibo-skeleton-stop-color: $ibo-color-blue-grey-100 !default;
+
+/* CSS variables */
+/* Skeleton CSS3 variables are not ibo prefixed as they are not iTop backoffice exclusives*/
+:root {
+  --skeleton-start-color: #{$ibo-skeleton-start-color};
+  --skeleton-stop-color: #{$ibo-skeleton-stop-color};
+}
\ No newline at end of file
diff --git a/images/placeholders/skeleton-dashboard.svg b/images/placeholders/skeleton-dashboard.svg
index d36062b96..3a6bca4df 100644
--- a/images/placeholders/skeleton-dashboard.svg
+++ b/images/placeholders/skeleton-dashboard.svg
@@ -38,7 +38,7 @@
     <linearGradient id="dashboard-fill">
       <stop
               offset="0.599964"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
@@ -51,7 +51,7 @@
       </stop>
       <stop
               offset="1.59996"
-              stop-color="#ecebeb"
+              stop-color="var(--skeleton-stop-color)"
               stop-opacity="1"
       >
         <animate
@@ -64,7 +64,7 @@
       </stop>
       <stop
               offset="2.59996"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
diff --git a/images/placeholders/skeleton-list.svg b/images/placeholders/skeleton-list.svg
index 56a448b9e..f714a9426 100644
--- a/images/placeholders/skeleton-list.svg
+++ b/images/placeholders/skeleton-list.svg
@@ -39,7 +39,7 @@
     <linearGradient id="list-fill">
       <stop
               offset="0.599964"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
@@ -52,7 +52,7 @@
       </stop>
       <stop
               offset="1.59996"
-              stop-color="#ecebeb"
+              stop-color="var(--skeleton-stop-color)"
               stop-opacity="1"
       >
         <animate
@@ -65,7 +65,7 @@
       </stop>
       <stop
               offset="2.59996"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
diff --git a/images/placeholders/skeleton-object.svg b/images/placeholders/skeleton-object.svg
index c49462e66..437be2d9c 100644
--- a/images/placeholders/skeleton-object.svg
+++ b/images/placeholders/skeleton-object.svg
@@ -44,7 +44,7 @@
     <linearGradient id="object-fill">
       <stop
               offset="0.599964"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
@@ -57,7 +57,7 @@
       </stop>
       <stop
               offset="1.59996"
-              stop-color="#ecebeb"
+              stop-color="var(--skeleton-stop-color)"
               stop-opacity="1"
       >
         <animate
@@ -70,7 +70,7 @@
       </stop>
       <stop
               offset="2.59996"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
diff --git a/images/placeholders/skeleton.svg b/images/placeholders/skeleton.svg
index 41addc105..5d7264b42 100644
--- a/images/placeholders/skeleton.svg
+++ b/images/placeholders/skeleton.svg
@@ -39,7 +39,7 @@
     <linearGradient id="misc-fill">
       <stop
               offset="0.599964"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
@@ -52,7 +52,7 @@
       </stop>
       <stop
               offset="1.59996"
-              stop-color="#ecebeb"
+              stop-color="var(--skeleton-stop-color)"
               stop-opacity="1"
       >
         <animate
@@ -65,7 +65,7 @@
       </stop>
       <stop
               offset="2.59996"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate