mirror of
https://github.com/Vendicated/Vencord
synced 2024-09-13 04:29:24 -04:00
ThemeAttributes: Add classes to html
for hard to detect state (streamer mode)
This commit is contained in:
parent
bbf43c3073
commit
281ea730e3
2 changed files with 21 additions and 2 deletions
|
@ -27,3 +27,9 @@ This allows themes to more easily theme those elements or even do things that ot
|
||||||
`--avatar-url-<resolution>` contains a URL for the users avatar with the size attribute adjusted for the resolutions `128, 256, 512, 1024, 2048, 4096`.
|
`--avatar-url-<resolution>` contains a URL for the users avatar with the size attribute adjusted for the resolutions `128, 256, 512, 1024, 2048, 4096`.
|
||||||
|
|
||||||
![image](https://github.com/Vendicated/Vencord/assets/26598490/192ddac0-c827-472f-9933-fa99ff36f723)
|
![image](https://github.com/Vendicated/Vencord/assets/26598490/192ddac0-c827-472f-9933-fa99ff36f723)
|
||||||
|
|
||||||
|
## CSS Classes
|
||||||
|
|
||||||
|
Discord sets some classes on the `html` element to indicate app state. ThemeAttributes adds a few more classes to this list for certain features that cannot be reliably detected using other selectors
|
||||||
|
|
||||||
|
- `streamer-mode` is added when Streamer Mode is enabled, as the Notice bar for this can be dismissed
|
||||||
|
|
|
@ -6,9 +6,11 @@
|
||||||
|
|
||||||
import { Devs } from "@utils/constants";
|
import { Devs } from "@utils/constants";
|
||||||
import definePlugin from "@utils/types";
|
import definePlugin from "@utils/types";
|
||||||
import { UserStore } from "@webpack/common";
|
import { findStoreLazy } from "@webpack";
|
||||||
|
import { UserStore, useStateFromStores } from "@webpack/common";
|
||||||
import { Message } from "discord-types/general";
|
import { Message } from "discord-types/general";
|
||||||
|
|
||||||
|
const StreamerModeStore = findStoreLazy("StreamerModeStore");
|
||||||
|
|
||||||
export default definePlugin({
|
export default definePlugin({
|
||||||
name: "ThemeAttributes",
|
name: "ThemeAttributes",
|
||||||
|
@ -51,6 +53,13 @@ export default definePlugin({
|
||||||
match: /src:(\i),"aria-hidden":!0/,
|
match: /src:(\i),"aria-hidden":!0/,
|
||||||
replace: "$&,style:$self.getAvatarStyles($1)"
|
replace: "$&,style:$self.getAvatarStyles($1)"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
find: '"; --devtools-sidebar-width: "',
|
||||||
|
replacement: {
|
||||||
|
match: /overlay:__OVERLAY__/,
|
||||||
|
replace: "$&,...$self.rootClassNames()"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
|
@ -71,5 +80,9 @@ export default definePlugin({
|
||||||
"data-author-username": author?.username,
|
"data-author-username": author?.username,
|
||||||
"data-is-self": authorId && authorId === UserStore.getCurrentUser()?.id,
|
"data-is-self": authorId && authorId === UserStore.getCurrentUser()?.id,
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
|
|
||||||
|
rootClassNames: () => ({
|
||||||
|
"streamer-mode": useStateFromStores([StreamerModeStore], () => StreamerModeStore.enabled),
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue