Hive dApps Dev Update - hive-authentication - reactjs package update - dark and light mode support added

Hello Hive Community Members,

With this post, today I will share an update on hive-authentication package that we've built & maintaining it as an open source. You can find all about it by clicking following link

https://github.com/sag333ar/hive-authentication

You can also find it on npmjs.com with following link

https://www.npmjs.com/package/hive-authentication

hive-authentication package

• Hive authentication package is for reactjs developers
• It provides ready-made-ui for logging in & switching users
• It works on top of another package @aioha
• hive authentication package allows user to login to multiple accounts with wallets like hive-keychain, hive-auth & sometimes with posting key as well.

What did we change?

We added support for dark mode & light mode. After updating to latest version of package, you may follow the steps listed below to add support for dark or light mode.

Step 1. Set current mode (dark or light)

const [theme, setTheme] = useState<"light" | "dark">("light");

In this example, we are using light mode as default.

Step 2. Apply theme to document

useEffect(() => {
    // Apply the theme manually by setting a data-theme attribute on the HTML element
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

Step 3. Add Theme Toggle

{/* Theme Toggle */}
    

         setTheme(theme === "light" ? "dark" : "light")}
        >
            Switch to {theme === "light" ? "Dark" : "Light"} Mode
        
    

Step 4. Supply updated theme to hive-authentication package's button

 {
        console.log("AuthButton dialog closed");
    }}
    onSignMessage={(username) => {
        return `${new Date().toISOString()}:${username}`;
    }}
    theme={theme} // Pass theme to AuthButton
/>

That's it & you are all set with it. Keep using hive-authentication package & share feedback if you've any.

Preview Images

Light mode

Dark mode

🦾 Power-Up the Hive! 🚀🌒

• 💪 Making Hive’s community stronger, one bug at a time!
• 🧙‍♂️ Love to all the open-source wizards—your code is my spellbook!
• 🌒 Hive = blockchain rocket. Destination: THE MOON! Unlimited upvotes, here we come! 🚀

🙌 Support, Laughs & Good Vibes Zone

• Found a bug? Smack it with an UPVOTE 🐞!
• Want more Hive sorcery? Vote me as Hive Witness 🧙‍♂️!
• Tips, jokes, karma, Hive-love—send ‘em all ❤️.
• Until next time—BYEEE 👋🚀

🚀 My Contributions to ♦️ Hive Ecosystem

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak