chore: BEM SwitchAppearance

Author: SoonIter

packages/theme-default/src/components/SwitchAppearance/index.module.scss

@@ -0,0 +1,36 @@
+.rp-switch-appearance {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--rp-c-text-2);
+
+  &:hover {
+    color: var(--rp-c-text-1);
+  }
+
+  &__icon {
+    &--sun {
+      display: block;
+    }
+
+    &--moon {
+      display: none;
+    }
+  }
+}
+
+.rp-dark .rp-switch-appearance {
+  &__icon {
+    &--sun {
+      display: none;
+    }
+
+    &--moon {
+      display: block;
+    }
+  }
+}

packages/theme-default/src/components/SwitchAppearance/index.scss

@@ -4,8 +4,7 @@ import SunSvg from '@theme-assets/sun';
 import { type MouseEvent, useContext } from 'react';
 import { SvgWrapper } from '../SvgWrapper';
 import './global.scss';
-import { cls } from '../../utils';
-import * as styles from './index.module.scss';
+import './index.scss';
 
 const supportAppearanceTransition = () => {
   return (
@@ -87,17 +86,14 @@ export function SwitchAppearance({ onClick }: { onClick?: () => void }) {
   };
 
   return (
-    <div
-      onClick={handleClick}
-      className={cls('rspress-nav-appearance', styles.switchAppearance)}
-    >
+    <div onClick={handleClick} className="rp-switch-appearance">
       <SvgWrapper
-        className="dark:rp-hidden"
+        className="rp-switch-appearance__icon rp-switch-appearance__icon--sun"
         icon={SunSvg}
         fill="currentColor"
       />
       <SvgWrapper
-        className="rp-hidden dark:rp-block"
+        className="rp-switch-appearance__icon rp-switch-appearance__icon--moon"
         icon={MoonSvg}
         fill="currentColor"
       />