How to edit an installed theme to apply to only one domain?

[xenornithos]

Firefox user. I've installed "black chat gmail" via Stylus and noticed it seems active on every website beyond only Gmail (regarding as unnecessary, I'd prefer to restrict it to display and activate exclusively within Gmail). The theme appears to be in a "global" category, but I'm not sure how to change that to one domain (mail.google.com) and function properly. I noticed other Gmail themes also personally installed have the domain line and thus are only displayed and active when viewing the Gmail site.

Below is the full stylesheet code of the theme in question, followed by an edit I've attempted (simply including the domain code before the section that modify the webpage elements). However, my edit essentially rendered the theme as though disabled, so I'm not sure what's wrong and would like assistance, please.

/* ==UserStyle==
@name         black chat gmail
@namespace    USO Archive
@author       Riccardo Nicolai
@description  black style
@version      20250225.17.09
@license      NONE
@preprocessor uso
==/UserStyle== */
:root{
  --stream-container-background-color: #131314;
  --gm3-color-surface-container-lowest: #131314;
  --gm3-color-on-surface: #fff;
  --gm3-color-on-surface-variant: #ffffff;
    



}

/* ==UserStyle==
@name         black chat gmail
@namespace    USO Archive
@author       Riccardo Nicolai
@description  black style
@version      20250225.17.09
@license      NONE
@preprocessor uso
==/UserStyle== */
@-moz-document domain("mail.google.com") {
:root{
  --stream-container-background-color: #131314;
  --gm3-color-surface-container-lowest: #131314;
  --gm3-color-on-surface: #fff;
  --gm3-color-on-surface-variant: #ffffff;
    



    }
}

[tophf]

Syntactically your edit is correct as the style is actually applied to the correct domain where it is active. The problem is that those definitions of colors in your code aren't used by the actual site because it either redefines them downstream or just doesn't use any variables at all and defines the colors directly. There are two solutions: either recolor all elements en masse using !important after each color or inspect the individual elements you want to change and see where they set the colors, then override that.

[tophf]

Also note that the chat element may be inside an iframe with a different URL/domain, which is seen when inspecting it in devtools.

[xenornithos]

Syntactically your edit is correct as the style is actually applied to the correct domain where it is active. The problem is that those definitions of colors in your code aren't used by the actual site because it either redefines them downstream or just doesn't use any variables at all and defines the colors directly. There are two solutions: either recolor all elements en masse using !important after each color or inspect the individual elements you want to change and see where they set the colors, then override that.

Thanks. I wouldn't be sure about being able to get all the elements since I've tried it before and wasn't getting much recoloured, as I'm unfamiliar with the process, while having a pre-made option (that "black chat gmail" provides) at least works for that much. So I was hoping it only needed an extra line of code to restrict it to one domain. Not a great issue, hopefully, but was curious to learn what was required for this matter.

However, somehow as of currently, since I also use UltimaDark, they seem to have been working to unify a fully dark mode for Gmail and sidebar tools (still a WIP), and now that extension is darkening the background of what Stylus' "black chat gmail" has been for. Honestly, I'm hoping it can all be made consistent within that one source so as to rely on just one source for Gmail alone, but I will hold on to the themes I have for Stylus in case something breaks at one point and they could be utilised again. I might then revisit what to do about "black chat gmail" being an active constant outside of Gmail.

I guess one other question out of curiosity -- would it affect much if this theme were active on whatever website I visit? Idk quite how extensions' resources function with what's active and making an impact on performance or not, but aside from it being a bit of a visual bother, for one persistently active theme, I would assume this rather small theme/stylesheet is likely seldom any impact to the browser or while visiting webpages.

[tophf]

The overhead shouldn't be noticeable.

[tophf]

According to #1994 you need to use chat.google.com instead of mail.google.com because the chat is inside an iframe, which is what I suggested initially.

[xenornithos]

Oh, thanks for bringing that to attention. I just edited it to include that chat domain and it worked -- it's no longer showing up on every site, just within Gmail.