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 */}

<button className="btn btn-outline" onClick={() => setTheme(theme === "light" ? "dark" : "light")} > Switch to {theme === "light" ? "Dark" : "Light"} Mode </button>

``` #### 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](https://hive-api.sagarkothari88.one/) | 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](https://distriator.com/) | | [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) | | Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration | | [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) | --- ### 🙌 Support Back ❤️ **Appreciate my work? Consider supporting @threespeak & @sagarkothari88!** ❤️ | Vote | For | Witness | |------|-----|---------| | [](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 | | [](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak |