Skip to content

Commit

Permalink
chore(website): Update Light/Dark Theme Toggle Icons
Browse files Browse the repository at this point in the history
This icon is kind of standardized so might help users use the dark mode.
The light bulb was really just for fun.
  • Loading branch information
mlaursen committed Apr 1, 2022
1 parent b147a88 commit 60a8825
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 47 deletions.

This file was deleted.

32 changes: 7 additions & 25 deletions packages/documentation/src/components/Layout/ToggleTheme.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

0 comments on commit 60a8825

Please sign in to comment.