Creating Styles and Options

How Styles & Options Work

First, let's talk about how userChrome Companion works. Assuming you already know what userChrome & CSS are..

• userChrome Companion manipulates Firefox's Window Title by adding text (characters, emojis, codes, etc) to it.
• userChrome CSS can target the Firefox Window Title and applies Styles based on what it can find.

Now let's say you have an option in userChrome Companion, like: 🐱 cat mode or 🐶 dog mode. Turning these options ON will add them +1 to Firefox's Window Title. And it will stay there (whether you close the sidebar, restart, etc) until you toggle it off.

• New Tab in the Window Title becomes,
• 🐱 New Tab or 🐱 🐶 New Tab

Combining Styles with Options

In your userChrome CSS, you can apply styles for these options, like:

:root[titlemodifier*="🐱"] {
    #navigator-toolbox {
        display: none !important;
    }
}
:root[titlemodifier*="🐶"]
    #urlbar {
        background-color: transparent !important;
    }
}

And obviously options (🐱 cat mode,🐶 dog mode) can be parsed seperately or together via the css, like:

/* both 🐱 🐶 present in title at the same time */
:root[titlemodifier*="🐱"][titlemodifier*="🐶"] {
    #navigator-toolbox {
        display: none !important;
    }
}
/* or like this*/
:root[titlemodifier*="🐱 🐶"] {
    #navigator-toolbox {
        display: none !important;
    }
    #urlbar {
        background-color: transparent !important;
    }
}

I think the best part about this is that Theme Creators can share/use/import their own custom options by linking to it via github, like:

./presets/preset-example