chore(website): Update Light/Dark Theme Toggle Icons

This icon is kind of standardized so might help users use the dark mode.
The light bulb was really just for fun.

Author: mlaursen

packages/documentation/src/components/Layout/ToggleTheme.module.scss

@@ -1,45 +1,32 @@
 import type { ReactElement } from "react";
-import cn from "classnames";
 import { AppBarAction } from "@react-md/app-bar";
-import { LightbulbOutlineSVGIcon } from "@react-md/material-icons";
+import { IconRotator } from "@react-md/icon";
+import { Brightness4SVGIcon } from "@react-md/material-icons";
 import { MenuItem } from "@react-md/menu";
 import { Tooltip, useTooltip } from "@react-md/tooltip";
-import { useIsUserInteractionMode, useToggle } from "@react-md/utils";
 
 import useTheme from "components/Theme/useTheme";
 import useThemeActions from "components/Theme/useThemeActions";
-import LightbulbSVGIcon from "icons/LightbulbSVGIcon";
-
-import styles from "./ToggleTheme.module.scss";
 
 export interface ToggleThemeProps {
   as: "action" | "menuitem";
 }
 
 export default function ToggleTheme({ as }: ToggleThemeProps): ReactElement {
-  const [toggled, enable, disable] = useToggle(false);
   const { theme } = useTheme();
   const { toggleTheme } = useThemeActions();
   const isLight = theme === "light";
 
-  const isMouseMode = useIsUserInteractionMode("mouse");
   const { elementProps, tooltipProps } = useTooltip({
     baseId: "toggle-theme",
     onClick: toggleTheme,
-    onMouseEnter: isMouseMode ? enable : undefined,
-    onMouseLeave: isMouseMode ? disable : undefined,
   });
 
-  let icon = <LightbulbOutlineSVGIcon />;
-  if (toggled !== isLight) {
-    icon = (
-      <LightbulbSVGIcon
-        className={cn({
-          [styles.on]: as === "menuitem",
-        })}
-      />
-    );
-  }
+  const icon = (
+    <IconRotator rotated={!isLight}>
+      <Brightness4SVGIcon />
+    </IconRotator>
+  );
 
   if (as === "menuitem") {
     return (
@@ -60,11 +47,6 @@ export default function ToggleTheme({ as }: ToggleThemeProps): ReactElement {
         {...elementProps}
         aria-label="Dark Theme"
         aria-pressed={!isLight}
-        className={cn({
-          [styles.on]: isLight,
-          [styles.off]: !isLight,
-        })}
-        inheritColor={!isLight}
       >
         {icon}
       </AppBarAction>

packages/documentation/src/components/Layout/ToggleTheme.tsx

@@ -10,7 +10,8 @@
 .transition {
   @include transition;
 
-  * {
+  // make it so the light/dark theme toggle still animates with the default transform
+  *:not(:global(.rmd-icon-rotator)) {
     @include transition;
   }
 }