Colour scheme switcher.

Author: akademy

src/components/ColourSchemeButton.stories.tsx

@@ -0,0 +1,23 @@
+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,52 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent } from "@testing-library/react";
+
+import { ColourSchemeButton } from "./ColourSchemeButton";
+import {ColourSchemes} from "../utils/globals";
+
+let 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,41 @@
+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 @@
+export enum ColourSchemes { Light="light", Dark="dark" }