diff --git a/src/plugins/themeAttributes/README.md b/src/plugins/themeAttributes/README.md
index 87cb803c..89001aae 100644
--- a/src/plugins/themeAttributes/README.md
+++ b/src/plugins/themeAttributes/README.md
@@ -1,6 +1,6 @@
 # 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
 
@@ -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
 
 ![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)
diff --git a/src/plugins/themeAttributes/index.ts b/src/plugins/themeAttributes/index.ts
index b8ceac62..b8084454 100644
--- a/src/plugins/themeAttributes/index.ts
+++ b/src/plugins/themeAttributes/index.ts
@@ -9,10 +9,11 @@ import definePlugin from "@utils/types";
 import { UserStore } from "@webpack/common";
 import { Message } from "discord-types/general";
 
+
 export default definePlugin({
     name: "ThemeAttributes",
     description: "Adds data attributes to various elements for theming purposes",
-    authors: [Devs.Ven],
+    authors: [Devs.Ven, Devs.Board],
 
     patches: [
         // Add data-tab-id to all tab bar items
@@ -32,9 +33,36 @@ export default definePlugin({
                 match: /\.messageListItem(?=,"aria)/,
                 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; }) {
         const author = props.message?.author;
         const authorId = author?.id;
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index e446a27b..69c18cd5 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -382,6 +382,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "ant0n",
         id: 145224646868860928n
     },
+    Board: {
+        name: "BoardTM",
+        id: 285475344817848320n,
+    },
     philipbry: {
         name: "philipbry",
         id: 554994003318276106n