diff --git a/lib/src/client/color-switch/color-switch.module.scss b/lib/src/client/color-switch/color-switch.module.scss
index 05922b22..d0a27ad4 100644
--- a/lib/src/client/color-switch/color-switch.module.scss
+++ b/lib/src/client/color-switch/color-switch.module.scss
@@ -6,9 +6,9 @@
   border-radius: 50%;
   border: 1px dashed gray;
   cursor: pointer;
-  --size: 25px;
-  height: var(--size);
-  width: var(--size);
+  --s: 25px;
+  height: var(--s);
+  width: var(--s);
   transition: all 0.3s ease-in-out 0s !important;
 }
 
@@ -21,7 +21,7 @@
   top: 0;
   left: 0;
   font-weight: 600;
-  font-size: calc(1 * var(--size) / 2);
+  font-size: calc(1 * var(--s) / 2);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -31,7 +31,7 @@
 [data-csp="dark"] .s,
 [data-csp="dark"] ~ .s,
 [data-csp="dark"] ~ * .s {
-  box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff;
+  box-shadow: calc(var(--s) / 4) calc(var(--s) / -4) calc(var(--s) / 8) inset #fff;
   border: none;
   background: transparent;
   animation: a linear 0.5s;
diff --git a/lib/src/client/color-switch/color-switch.tsx b/lib/src/client/color-switch/color-switch.tsx
index 1d21cd7f..1f14260d 100644
--- a/lib/src/client/color-switch/color-switch.tsx
+++ b/lib/src/client/color-switch/color-switch.tsx
@@ -33,7 +33,7 @@ export const ColorSwitch = ({
 }: ColorSwitchProps) => {
   const { toggleColorScheme } = useTheme(targetSelector);
 
-  const cls = [styles["color-switch"], className].join(" ");
+  const cls = [styles.s, className].join(" ");
   return (
     <button
       className={cls}
@@ -41,7 +41,7 @@ export const ColorSwitch = ({
       // skipcq: JS-0417
       onClick={() => toggleColorScheme(skipSystem)}
       // @ts-expect-error -- setting custom attribute
-      style={{ "--size": `${size}px` }}
+      style={{ "--s": `${size}px` }}
       {...props}
     />
   );