2 files changed, 16 insertions, 1 deletions
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ff14a58a..99d7daca 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -79,6 +79,12 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Faint style (for notifs)
+    faint: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -277,7 +283,7 @@ export default {
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
-    const result = <span class="RichContent">
+    const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
       { pass2 }
     </span>
 
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 73eb07e9..962fd5bb 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,6 +1,15 @@
 .RichContent {
   font-family: var(--font);
 
+  &.-faint {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
+  }
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;