[create-theme]: Rainbow Audio Tabs

[LexyDevv]

Name

Rainbow Audio Tabs

Description

Never lose track of a noisy tab again. This mod adds a flowing background to tabs playing audio.

Homepage

https://github.com/LexyDevv/Zen-Rainbow-Audio-Tabs

Image

https://github.com/LexyDevv/Zen-Rainbow-Audio-Tabs/blob/main/preview.png?raw=true

Type

• JSON Color Theme

Theme Styles

@keyframes audio-rainbow-flow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.tabbrowser-tab[soundplaying] .tab-background {
    /* Notice the fallback: var(--variable-name, default-value) */
    background-image: linear-gradient(90deg, var(--mod-rainbow-colors, #ff4b4b, #e8d024, #24b8e8, #9b24e8, #ff4b4b) ) !important;
    background-size: 200% 200% !important;
    animation: audio-rainbow-flow 12s linear infinite !important;
    /* Fallback for opacity */
    opacity: var(--mod-rainbow-opacity, 0.15) !important;
}

Readme

Rainbow Audio Tabs for Zen Browser

Never lose track of a noisy tab again. This mod adds a flowing background to tabs playing audio. 

## Features

* **Animated Glow:** Moving gradient that highlights the active audio tab.
* **Fully Customizable Colors:** Don't like the default rainbow? You can change it to likings
* **Adjustable Opacity:** 

## How to Customize

1. Open Zen **Settings**.
2. Navigate to **Zen Mods** on the left sidebar.
3. Find **Rainbow Audio Tabs** in your list of installed mods.
4. Tweak the settings directly in the menu:
   * **Gradient Colors:** Type a comma-separated list of your favorite colors (hex codes, RGB, or standard color names like `blue, pink, purple`). *Note: You must have at least 2 colors for the gradient to work.*
   * **Glow Opacity:** Adjust the brightness from `0.0` (invisible) to `1.0` (solid color). The default is a soft `0.25`.

Preferences

{
  "mod.rainbow.colors": "Gradient Colors (Comma separated, min 2)",
  "mod.rainbow.opacity": "Glow Opacity (0.0 to 1.0)"
}

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-2020 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.