skelton dark mode color

packages/app/src/components/Skelton.module.scss

@@ -1,5 +0,0 @@
-@use '~/styles/bootstrap/init' as bs;
-
-.grw-skelton {
-  background-color: bs.$gray-200;
-}

packages/app/src/components/Skelton.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import styles from './Skelton.module.scss';
-
 type SkeltonProps = {
   width?: number,
   height?: number,
@@ -19,5 +17,5 @@ export const Skelton = (props: SkeltonProps): JSX.Element => {
     height,
   };
 
-  return <div style={style} className={`${styles['grw-skelton']} ${additionalClass} ${roundedPill ? 'rounded-pill' : ''}`}></div>;
+  return <div style={style} className={`grw-skelton ${additionalClass} ${roundedPill ? 'rounded-pill' : ''}`}></div>;
 };

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -513,3 +513,10 @@ ul.pagination {
 .grw-modal-head {
   border-color: $border-color-global;
 }
+
+/*
+ * skelton
+ */
+.grw-skelton {
+  background-color: lighten($bgcolor-subnav, 20%);
+}

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -405,3 +405,10 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 .grw-modal-head {
   border-color: $border-color-global;
 }
+
+/*
+ * skelton
+ */
+.grw-skelton {
+  background-color: $gray-200;
+}