diff --git a/packages/nextjs-themes/src/client/color-switch/color-switch.test.tsx b/packages/nextjs-themes/src/client/color-switch/color-switch.test.tsx
index 357d6e1b..4298e3c4 100644
--- a/packages/nextjs-themes/src/client/color-switch/color-switch.test.tsx
+++ b/packages/nextjs-themes/src/client/color-switch/color-switch.test.tsx
@@ -7,6 +7,7 @@ describe("color-switch", () => {
test("color-scheme-toggle", ({ expect }) => {
const hook = renderHook(() => useTheme());
+ act(() => hook.result.current.setColorSchemePref(""));
render();
const element = screen.getByTestId("color-switch");
act(() => fireEvent.click(element));
@@ -15,5 +16,7 @@ describe("color-switch", () => {
expect(hook.result.current.colorSchemePref).toBe("light");
act(() => fireEvent.click(element));
expect(hook.result.current.colorSchemePref).toBe("system");
+ act(() => fireEvent.click(element));
+ expect(hook.result.current.colorSchemePref).toBe("dark");
});
});
diff --git a/packages/nextjs-themes/src/client/color-switch/color-switch.tsx b/packages/nextjs-themes/src/client/color-switch/color-switch.tsx
index 9a240af2..4bf00480 100644
--- a/packages/nextjs-themes/src/client/color-switch/color-switch.tsx
+++ b/packages/nextjs-themes/src/client/color-switch/color-switch.tsx
@@ -35,15 +35,13 @@ export function ColorSwitch({ size = 25 }: ColorSwitchProps) {
}
};
return (
-
e.key === "Enter" && toggleColorScheme()}
- role="button"
+ type="button"
// @ts-expect-error -- setting custom attribute
style={{ "--size": `${size}px` }}
- tabIndex={0}
/>
);
}
diff --git a/packages/nextjs-themes/src/styles.css b/packages/nextjs-themes/src/styles.css
index 1905a738..d0b40c2e 100644
--- a/packages/nextjs-themes/src/styles.css
+++ b/packages/nextjs-themes/src/styles.css
@@ -1,4 +1,5 @@
.nextjs-themes--color-switch {
+ all: unset;
position: relative;
box-shadow: none;
color: #aaa;