diff --git a/components/SkeletonShimmer/index.tsx b/components/SkeletonShimmer/index.tsx
index e4bc5364b..bcc1c03ed 100644
--- a/components/SkeletonShimmer/index.tsx
+++ b/components/SkeletonShimmer/index.tsx
@@ -1,5 +1,19 @@
+import { cva } from "class-variance-authority"
+
 import styles from "./skeleton.module.css"
 
+const variants = cva(styles.shimmer, {
+  variants: {
+    contrast: {
+      light: styles.light,
+      dark: styles.dark,
+    },
+  },
+  defaultVariants: {
+    contrast: "light",
+  },
+})
+
 export default function SkeletonShimmer({
   height,
   width,
@@ -11,7 +25,7 @@ export default function SkeletonShimmer({
 }) {
   return (
     <div
-      className={`${styles.shimmer} ${styles[contrast]}`}
+      className={variants({ contrast })}
       style={{
         height: height,
         width: width,