diff --git a/packages/app/src/Element/Skeleton.css b/packages/app/src/Element/Skeleton.css
index 09213ac4..a05f8955 100644
--- a/packages/app/src/Element/Skeleton.css
+++ b/packages/app/src/Element/Skeleton.css
@@ -3,10 +3,14 @@
   height: 1em;
   position: relative;
   overflow: hidden;
-  background-color: #dddbdd;
+  background-color: var(--note-bg);
   border-radius: 16px;
 }
 
+html.light .skeleton {
+  background-color: var(--gray-secondary);
+}
+
 .skeleton::after {
   position: absolute;
   top: 0;
@@ -17,26 +21,26 @@
   background-image: linear-gradient(
     90deg,
     rgba(255, 255, 255, 0) 0,
-    rgba(255, 255, 255, 0.2) 20%,
-    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0.02) 20%,
+    rgba(255, 255, 255, 0.05) 60%,
     rgba(255, 255, 255, 0)
   );
   animation: shimmer 2s infinite;
   content: "";
 }
 
+html.light .skeleton::after {
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0)
+  );
+}
+
 @keyframes shimmer {
   100% {
     transform: translateX(100%);
   }
 }
-
-@media screen and (prefers-color-scheme: dark) {
-  .skeleton {
-    background-color: #50535a;
-  }
-
-  .skeleton::after {
-    background-image: linear-gradient(90deg, #50535a 0%, #656871 20%, #50535a 40%, #50535a 100%);
-  }
-}