Colour scheme switcher

src/components/ColourSchemeButton.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ColourSchemeButton } from "./ColourSchemeButton";
+
+const meta: Meta<typeof ColourSchemeButton> = {
+  title: "SciReactUI/Control/ColorSchemeButton",
+  component: ColourSchemeButton,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Switch between dark and light modes.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LightSelected: Story = {
+  args: {},
+};

src/components/ColourSchemeButton.test.tsx

@@ -0,0 +1,51 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent } from "@testing-library/react";
+
+import { ColourSchemeButton } from "./ColourSchemeButton";
+import { ColourSchemes } from "../utils/globals";
+
+const mockSetColorScheme = jest.fn();
+jest.mock("@mui/material", () => {
+  return {
+    ...jest.requireActual("@mui/material"),
+    useColorScheme: jest.fn().mockReturnValue({
+      colorScheme: jest.requireActual("../utils/globals").ColourSchemes.Dark,
+      setColorScheme: (scheme: ColourSchemes) => mockSetColorScheme(scheme),
+    }),
+  };
+});
+
+describe("ColourSchemeButton", () => {
+  it("should render without errors", () => {
+    render(<ColourSchemeButton />);
+  });
+
+  it("should show dark icon and button", () => {
+    const { getByTestId, getByRole } = render(<ColourSchemeButton />);
+
+    const button = getByRole("button");
+    expect(button).toBeInTheDocument();
+
+    const icon = getByTestId("BedtimeIcon");
+    expect(icon).toBeInTheDocument();
+  });
+
+  it("should change colour scheme on click", () => {
+    const { getByRole } = render(<ColourSchemeButton />);
+
+    const button = getByRole("button");
+    fireEvent.click(button);
+
+    expect(mockSetColorScheme).toHaveBeenCalledWith(ColourSchemes.Light);
+  });
+
+  it("should call local onclick when button clicked", () => {
+    const mockOnClick = jest.fn();
+    const { getByRole } = render(<ColourSchemeButton onClick={mockOnClick} />);
+
+    const button = getByRole("button");
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+});

src/components/ColourSchemeButton.tsx

@@ -0,0 +1,44 @@
+import { useColorScheme, useTheme } from "@mui/material";
+import { IconButton, IconButtonProps } from "@mui/material";
+import { LightMode, Bedtime } from "@mui/icons-material";
+
+import { ColourSchemes } from "../utils/globals";
+
+const ColourSchemeButton = (props: IconButtonProps) => {
+  const theme = useTheme();
+  const { colorScheme: colourScheme, setColorScheme: setColourScheme } =
+    useColorScheme();
+
+  if (!colourScheme) return undefined;
+
+  const isDark = (): boolean => colourScheme === ColourSchemes.Dark;
+
+  return (
+    <IconButton
+      sx={{
+        height: 35,
+        width: 35,
+        borderRadius: "5px",
+        backgroundColor: theme.palette.primary.light,
+        color: theme.palette.primary.contrastText,
+        "&:hover": {
+          opacity: 0.8,
+          backgroundImage: "",
+          backgroundColor: isDark() ? "#111" : "skyblue",
+          color: "yellow",
+        },
+      }}
+      aria-label={`Colour scheme switcher: ${colourScheme}`}
+      {...props}
+      onClick={(event) => {
+        setColourScheme(isDark() ? ColourSchemes.Light : ColourSchemes.Dark);
+        if (props.onClick) props.onClick(event);
+      }}
+    >
+      {isDark() ? <Bedtime /> : <LightMode />}
+    </IconButton>
+  );
+};
+
+export type { IconButtonProps };
+export { ColourSchemeButton };

src/index.ts

@@ -1,7 +1,8 @@
 // components
 export * from "./components/Breadcrumbs";
-export * from "./components/Navbar";
+export * from "./components/ColourSchemeButton";
 export * from "./components/Footer";
+export * from "./components/Navbar";
 export * from "./components/User";
 export * from "./components/VisitInput";
 export * from "./components/ImageColorSchemeSwitch";

src/utils/globals.ts

@@ -0,0 +1,4 @@
+export enum ColourSchemes {
+  Light = "light",
+  Dark = "dark",
+}