ThemeAttributes: add larger avatar url variables to avatars (#2449)

Co-authored-by: vee <vendicated@riseup.net>
This commit is contained in:
Board 2024-05-15 01:07:33 +02:00 committed by GitHub
parent 719c6140f3
commit d8b3869b81
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 42 additions and 2 deletions

View file

@ -1,6 +1,6 @@
# ThemeAttributes # ThemeAttributes
This plugin adds data attributes to various elements inside Discord This plugin adds data attributes and CSS variables to various elements inside Discord
This allows themes to more easily theme those elements or even do things that otherwise wouldn't be possible This allows themes to more easily theme those elements or even do things that otherwise wouldn't be possible
@ -19,3 +19,11 @@ This allows themes to more easily theme those elements or even do things that ot
- `data-is-self` is a boolean indicating whether this is the current user's message - `data-is-self` is a boolean indicating whether this is the current user's message
![image](https://github.com/Vendicated/Vencord/assets/45497981/34bd5053-3381-402f-82b2-9c812cc7e122) ![image](https://github.com/Vendicated/Vencord/assets/45497981/34bd5053-3381-402f-82b2-9c812cc7e122)
## CSS Variables
### Avatars
`--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)

View file

@ -9,10 +9,11 @@ import definePlugin from "@utils/types";
import { UserStore } from "@webpack/common"; import { UserStore } from "@webpack/common";
import { Message } from "discord-types/general"; import { Message } from "discord-types/general";
export default definePlugin({ export default definePlugin({
name: "ThemeAttributes", name: "ThemeAttributes",
description: "Adds data attributes to various elements for theming purposes", description: "Adds data attributes to various elements for theming purposes",
authors: [Devs.Ven], authors: [Devs.Ven, Devs.Board],
patches: [ patches: [
// Add data-tab-id to all tab bar items // Add data-tab-id to all tab bar items
@ -32,9 +33,36 @@ export default definePlugin({
match: /\.messageListItem(?=,"aria)/, match: /\.messageListItem(?=,"aria)/,
replace: "$&,...$self.getMessageProps(arguments[0])" replace: "$&,...$self.getMessageProps(arguments[0])"
} }
},
// add --avatar-url-<resolution> css variable to avatar img elements
// popout profiles
{
find: ".LABEL_WITH_ONLINE_STATUS",
replacement: {
match: /src:null!=\i\?(\i).{1,50}"aria-hidden":!0/,
replace: "$&,style:$self.getAvatarStyles($1)"
}
},
// chat avatars
{
find: "showCommunicationDisabledStyles",
replacement: {
match: /src:(\i),"aria-hidden":!0/,
replace: "$&,style:$self.getAvatarStyles($1)"
}
} }
], ],
getAvatarStyles(src: string) {
return Object.fromEntries(
[128, 256, 512, 1024, 2048, 4096].map(size => [
`--avatar-url-${size}`,
`url(${src.replace(/\d+$/, String(size))})`
])
);
},
getMessageProps(props: { message: Message; }) { getMessageProps(props: { message: Message; }) {
const author = props.message?.author; const author = props.message?.author;
const authorId = author?.id; const authorId = author?.id;

View file

@ -382,6 +382,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
name: "ant0n", name: "ant0n",
id: 145224646868860928n id: 145224646868860928n
}, },
Board: {
name: "BoardTM",
id: 285475344817848320n,
},
philipbry: { philipbry: {
name: "philipbry", name: "philipbry",
id: 554994003318276106n id: 554994003318276106n