diff --git a/web/chat/text-message.react.js b/web/chat/text-message.react.js
--- a/web/chat/text-message.react.js
+++ b/web/chat/text-message.react.js
@@ -73,7 +73,13 @@
       canReply={canReply}
     >
       <div className={messageClassName} style={messageStyle}>
-        <Markdown rules={rules}>{text}</Markdown>
+        <Markdown
+          threadColor={props.threadInfo.color}
+          rules={rules}
+          isViewer={isViewer}
+        >
+          {text}
+        </Markdown>
       </div>
     </ComposedMessage>
   );
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -11,20 +11,13 @@
   display: inline;
 }
 
-div.markdown blockquote {
+div.blockquote {
   display: inline-block;
   padding: 0.5em 10px;
   box-sizing: border-box;
   width: 100%;
   margin: 6px 0;
-}
-div.darkBackground blockquote {
-  background: #a9a9a9;
-  border-left: 5px solid #808080;
-}
-div.lightBackground blockquote {
-  background: #d3d3d3;
-  border-left: 5px solid #c0c0c0;
+  border-radius: 8px;
 }
 
 div.markdown code {
diff --git a/web/markdown/markdown.react.js b/web/markdown/markdown.react.js
--- a/web/markdown/markdown.react.js
+++ b/web/markdown/markdown.react.js
@@ -3,6 +3,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import * as SimpleMarkdown from 'simple-markdown';
+import tinycolor from 'tinycolor2';
 
 import css from './markdown.css';
 import type { MarkdownRules } from './rules.react';
@@ -10,19 +11,19 @@
 type Props = {
   +children: string,
   +rules: MarkdownRules,
+  +threadColor?: string,
+  +isViewer?: boolean,
 };
 function Markdown(props: Props): React.Node {
-  const { children, rules } = props;
-  const { simpleMarkdownRules, useDarkStyle } = rules;
+  const { children, rules, threadColor, isViewer } = props;
+  const { simpleMarkdownRules } = rules;
 
   const markdownClassName = React.useMemo(
     () =>
       classNames({
         [css.markdown]: true,
-        [css.darkBackground]: useDarkStyle,
-        [css.lightBackground]: !useDarkStyle,
       }),
-    [useDarkStyle],
+    [],
   );
 
   const parser = React.useMemo(
@@ -38,7 +39,15 @@
     () => SimpleMarkdown.outputFor(simpleMarkdownRules, 'react'),
     [simpleMarkdownRules],
   );
-  const renderedOutput = React.useMemo(() => output(ast), [ast, output]);
+  const renderedOutput = React.useMemo(
+    () =>
+      output(ast, {
+        color: isViewer
+          ? tinycolor(threadColor).darken(20).toString()
+          : `#${String(threadColor)}`,
+      }),
+    [ast, output, threadColor, isViewer],
+  );
 
   return <div className={markdownClassName}>{renderedOutput}</div>;
 }
diff --git a/web/markdown/rules.react.js b/web/markdown/rules.react.js
--- a/web/markdown/rules.react.js
+++ b/web/markdown/rules.react.js
@@ -9,6 +9,7 @@
 import type { RelativeMemberInfo } from 'lib/types/thread-types';
 
 import { useSelector } from '../redux/redux-utils';
+import css from './markdown.css';
 
 export type MarkdownRules = {
   +simpleMarkdownRules: SharedMarkdown.ParserRules,
@@ -89,6 +90,22 @@
           content: parse(content, state),
         };
       },
+      // eslint-disable-next-line react/display-name
+      react: (
+        node: SharedMarkdown.SingleASTNode,
+        output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
+        state: SharedMarkdown.State,
+      ) => {
+        return (
+          <div
+            key={state.key}
+            className={css.blockquote}
+            style={{ backgroundColor: state.color }}
+          >
+            {output(node.content, state)}
+          </div>
+        );
+      },
     },
     inlineCode: SimpleMarkdown.defaultRules.inlineCode,
     em: SimpleMarkdown.defaultRules.em,