[BUG] - useTheme hook breaks application when passing characters like ">"

[iSaulX]

NextUI Version

2.6.8

Describe the bug

When using the useTheme hook and passing characters such as >, the entire application breaks and requires erasing the application data to restore functionality.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

• Use on any component the useTheme.
• Pass a string containing the > separated by a space (In my case I tried dark >)
• Call the hook to set the new state.
• Reload the page.

Expected behavior

Expect to set the default theme "light" instead of that error.

Screenshots or Videos

No response

Operating System Version

MacOS.

Browser

Safari

[linear]

ENG-1792 [BUG] - useTheme hook breaks application when passing characters like ">"

[wingkwong]

can you share the code or a sandbox?

[iSaulX]

can you share the code or a sandbox?

Hey! For sure. I was using a component to switch between themes, and i wrote dark > instead of dark, when i tried using the component and then reload the page, the whole screen got white. I noticed the error in the console, and the only solution was to delete all data from the page. Here's the code if you wanna replicate the bug. :P

import { Switch } from "@nextui-org/react";
import { useTheme } from "@nextui-org/use-theme";

export const MoonIcon = (props: any) => {
  return (
    <svg
      aria-hidden="true"
      focusable="false"
      height="1em"
      role="presentation"
      viewBox="0 0 24 24"
      width="1em"
      {...props}
    >
      <path
        d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
        fill="currentColor"
      />
    </svg>
  );
};

export const SunIcon = (props: any) => {
  return (
    <svg
      aria-hidden="true"
      focusable="false"
      height="1em"
      role="presentation"
      viewBox="0 0 24 24"
      width="1em"
      {...props}
    >
      <g fill="currentColor">
        <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
        <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l-.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
      </g>
    </svg>
  );
};

export default function ThemeSwitcher(): JSX.Element {
  const {theme, setTheme} = useTheme();

  return (
    <Switch
      defaultSelected
      color="primary"
      size="lg"
      thumbIcon={({ isSelected, className }) =>
        isSelected ? <MoonIcon className={className} /> : <SunIcon className={className} />
      }
      onValueChange={() => setTheme(theme === "dark" ? "light" : "dark >")}
    />
  );
}

[wingkwong]

May I know what is the reason of adding > there? or you just wanna point out that any arbitrary string would break the app?

and the only solution was to delete all data from the page

and what do you mean by that?