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

[sagarkothari88]

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 */}
    <div className="flex justify-end mb-4">
        <button
            className="btn btn-outline"
            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
        >
            Switch to {theme === "light" ? "Dark" : "Light"} Mode
        </button>
    </div>

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

<AuthButton
    onAuthenticate={handleAuthenticate}
    aioha={aioha}
    onClose={() => {
        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

Contribution	To	Hive	Ecosystem
Hive Witness Node	Hive API Node	3Speak Video Encoder Node Operator (highest number of nodes)	3Speak Mobile App Developer
Podcast App Developer	3Shorts App Developer	3Speak Support & Maintenance Team	Distriator Developer
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App

---

🙌 Support Back

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

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak

Comments

[indiaunited]

This post has been manually curated by @steemflow from Indiaunited community. Join us on our Discord Server.

Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens. HP delegators and IUC token holders also get upto 20% additional vote weight.

Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.

_{100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @steemflow by upvoting this comment and support the community by voting the posts made by @indiaunited.}.

This post received an extra 7.53% vote for delegating HP / holding IUC tokens.

[sagarkothari88]

Thank you so much @steemflow & @indiaunited for curation

[steemflow]

😎🔥👍

[bhr-curation]

Nice! Dark/light mode for reactjs devs using hive-authentication is a great addition! 🚀

[sagarkothari88]

Thank you @bhr-curation

I'll keep up my best

[hivebuzz]

Congratulations @sagarkothari88! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

You received more than 38000 HP as payout for your posts, comments and curation. Your next payout target is 39000 HP. The unit is Hive Power equivalent because post and comment rewards can be split into HP and HBD

_{You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP}