fortalynx-theme-engine
v1.1.1
Published
⚠️ OLDER VERSIONS BELOW ARE DEPRECATED. PLEASE USE THIS STABLE VERSION
Downloads
9
Maintainers
muhammadtaha-mtglReadme
🌗 Fortalynx Theme Engine
⚠️ OLDER VERSIONS BELOW ARE DEPRECATED. PLEASE USE THIS STABLE VERSION
Version: v1.1.1
A lightweight, scalable, and fully customizable Dark & Light Theme Engine for modern React projects — powered by CSS variables and designed for flexibility.
📌 About
The Fortalynx Theme Engine is a plug-and-play dark/light mode system built using native CSS variables and React context. It ensures smooth theme switching, tokenized design control, and optional transition effects across your app — with a future-proof override system for custom color theming.
✨ Features
- ✅ Easy integration into any React app
- 🎨 Pre-defined CSS tokens for background, text, border, icons & transitions
- 🌗 Seamless dark/light mode switching with localStorage memory
- 🧩 Customizable via override file (
fortalynx-override.css) - 🔁 Built-in transition support
- 🔧 Token-based architecture for scalable design systems
- 📦 Minimal dependencies
📦 Installation
Install via npm or yarn:
npm install fortalynx-theme-engine
# or
yarn add fortalynx-theme-engine
---
**⚙️ Integration Steps**
*🔧 Step 1: Wrap your app with the Theme Provider
# import FortalynxThemeProvider from 'fortalynx-theme-engine';
# <FortalynxThemeProvider>
# <App />
# </FortalynxThemeProvider>
*🔘 Step 2: Add the Theme Toggle Button
# import ThemeToggleIcon from 'fortalynx-theme-engine';
# <ThemeToggleIcon />
*🎨 Step 3: Apply CSS Tokens in your stylesheet
**Use the provided tokens from engine.css like this**
# .section {
# background-color: var(--bg-color);
# color: var(--text-color);
# border: 1px solid var(--border-color);
# }
---
*🎨 Custom Theming via Override CSS To customize themes:
*1-Create a file named fortalynx-override.css in your src/ folder
*2-Copy the override template provided in the docs or package
*3-Override any token like this:
# :root {
# --text-color: #1a1a1a;
# --bg-color: #ffffff;
# }
# [data-theme='dark'] {
# --text-color: #ff4f4f;
# --bg-color: #121212;
# }
*Just override the color code in override fortalynx template but dont edit the tokens
*This will override colors globally throughout your app wherever tokens are used.
---
*📘 Important Guidelines
*✅ Do:
*Use var(--token-name) inside your CSS or Tailwind styles
*Import engine.css before fortalynx-override.css
*Stick to provided token names or add your own in future updates
*Use data-theme="dark" on <html> (handled automatically)
*❌ Don’t:
*Manually modify files inside node_modules/fortalynx-theme-engine
*Change token names directly — change only their values via override
---
**⚠️ You may notice a white flash when switching to or refreshing in dark mode.**
*This happens because the saved theme is applied after your app loads.
**➡️ To fix this, Add this script **before your app loads** (in `public/index.html`):
# ```html
# <script>
# try {
# const theme = localStorage.getItem("fortalynx-theme");
# if (theme) {
# document.documentElement.setAttribute("data-theme", theme);
# }
# } catch (e) {}
# </script>
---
**👤 Author**
*Muhammad Taha
*🏢 Founder of MTGL
*🧠 Founder of MTGL | Creator of Fortalynx
*📧 Email: [email protected]
---
**💬 Notes for Developers**
# Fortalynx Theme Engine was originally created to power theming in the Fortalynx Web Builder. However, recognizing the need for clean, scalable theming in modern projects, it is now publicly available.
# Whether you're building personal portfolios, SaaS dashboards, or startup UIs — this engine is designed to make your theming simple, flexible, and future-proof.
---
**💬 Support or Contributions**
*This engine was made to simplify dark/light mode setup for all React devs, without bloated configs or complex setups.
*1 Feel free to use it in any commercial or personal project.
*2 Contributions for advanced features (like typography tokens, animation control, etc.) are welcome.
*3 If you want to contribute, open an issue or fork the repo.
---
**🧾 Version**
# - **Current Version:** `v1.1.1`#
* Initial release of Fortalynx Theme Engine
* Future updates will include:
- More theme tokens
- Smoother transition management
- Auto detection of system theme
- Improved developer experience
**Keep checking for updates**
---
**🧾 Credits**
- Icons used via [`react-icons`](https://react-icons.github.io/react-icons/) package
Licensed under [MIT](https://github.com/react-icons/react-icons/blob/master/LICENSE)