Skip to main content

useTheme

This hook returns the current theme setting for the device. It is useful for styling your Widget based on the user's theme preference.

Import​

import { useTheme } from "~lib/use-theme";

API​

const theme = useTheme();

Parameters​

This hook takes no parameters.

Return Value​

NameTypeDescription
theme"light" | "dark"The current theme setting

Example​

import { useTheme } from "~lib/use-theme";

const Widget = () => {
  const theme = useTheme();

  const backgroundColor = theme === "dark" ? "#1a1a1a" : "#ffffff";
  const textColor = theme === "dark" ? "#ffffff" : "#000000";

  return (
    <div style={{ backgroundColor, color: textColor, padding: "20px" }}>
      <h1>Current Theme: {theme}</h1>
      <p>This widget adapts to your theme preference.</p>
    </div>
  );
};

See Also​

  • useDarkMode - Returns a boolean for dark mode preference. Use useTheme when you need the theme as a string ("light" or "dark"), or useDarkMode when you just need a boolean toggle.