The Multi-Tone Magic extension offers users a delightful customization experience for the ALX AFRICA Intranet, the premier learning platform for ALX_AFRICA. With a simple click, users can access a vibrant array of color themes, ranging from classic navy-blue to refreshing teal and everything in between, including pink, green, black, ocean-blue, purple, orange, yellow, and sleek grey. This intuitive pop-up window empowers users to tailor their browsing experience to their unique preferences, enhancing both usability and aesthetic appeal.
"Pink" - Embrace Your Inner Barbie! Let the shades of pink immerse you in a world of elegance and joy, reminiscent of your childhood fantasies!
"Green" - Feel the Earth's Serenity! Connect with nature through lush green hues that evoke the tranquility of forests and meadows!
"Ocean" - Dive into Oceanic Depths! Experience the refreshing blues of the ocean, taking you on a calming journey amidst the waves!
"Black" - Sleek and Elegant! The timeless black theme adds a touch of sophistication and modernity to your browsing!
"Teal" - Enchanting and Sophisticated! The blend of blue and green brings forth a sophisticated yet vibrant aura.
"Purple" - Indulge in Royal Elegance! Elevate your browsing experience with rich purples that evoke a sense of regal refinement!
"Orange" - Radiate Positivity! Bask in the warmth and radiance of vibrant oranges, sparking energy and enthusiasm!
"Yellow" - Embrace Sunshine and Happiness! Let the brilliance of yellow brighten your day, bringing in joy and positivity!
"Grey" - Chic and Minimalistic! For those who prefer a sleek and minimalist vibe, grey offers understated elegance!
-
Visit the Chrome Web Store and search for "Multi-Theme Selector."
-
Click on the "Add to Chrome" button to install the extension.
-
Once installed, the extension icon will appear in the browser toolbar.
-
Click pin in your list of extensions to pin browser toolbar.
- Click on the extension icon in the toolbar to open the theme selector.
- Toggle the switch to enable or disable the extension.
- Choose a theme by clicking on the color circles.
- The selected theme is saved and persists even after reloading the page or reopening the browser.
- Fork this project
- [Clone](git clone https://github.com/wellingtonmwadali/ALX_MultiTone-Magic.git) your forked version
- Make changes
- Create a branch
- Commit your changes (write a short descriptive message of what you have done)
- Push your changes to your forked version
- Go to the original project on GitHub & Create a Pull Request
- Contribute to the development of the extension on GitHub.
-
Open Theme Selector:
- Click on the extension icon in the toolbar.
- Toggle the switch to enable/disable the extension.
-
Select a Theme:
- Click on one of the color circles to apply the selected theme.
-
Persistence:
- The selected theme persists across page reloads and browser restarts.
1.Define your theme (e.g custom-theme) in your branch.
2.Add your theme circle in the popup-styles.css file.
```css
/* popup-styles.css */
.theme-custom {
/* Add your theme color-code */
}
```
-
Edit your theme in the Theme/theme.css file.
.body-custom-theme .#element { /* element's styles*/ }
-
Create a pull request from your branch.
Feel free to add or modify the content to better resonate with yourself:
- To modify existing themes,create a branch and edit the corresponding CSS themes (e.g.,
theme-grey.,theme-light-green.css) in the theme.css file inside the Theme folder. - Then create a pull request on your branch.
- If you encounter any issues or have questions, check the FAQ section or reach out to either Mwadali or Alex
A: Toggle the switch off, and the extension will reset to the default theme.
A: Ensure that your classes are defined as expected i.e should start with body .theme-{colorname}.
A: Reload the page after you select your theme.
B: Toggle the switch off and chose your theme.